極驗滑動驗證登陸

極驗滑動驗證登陸

滑動驗證碼

驗證碼是網站用來防止網絡入侵的一種手段,如今相對安全並且比較流行的就是滑動驗證碼,
實現效果以下:javascript

 

geetesthtml

 

極驗驗證碼

官網:http://www.geetest.com/前端

Python 實現的滑動驗證碼網址:https://docs.geetest.com/install/deploy/server/pythonjava

注意: 使用第三方插件時不要求看懂,只要求能按照提供的 demo 和技術文檔完成其功能。python

安裝極驗本身的包

在項目中須要使用極驗本身的包jquery

from geetest import GeetestLibgit

可使用 Pycharm 安裝此包或者直接用 pip 安裝github

pip install geetestajax

HTML 頁面代碼

須要引入極驗提供的 JS 文件json

<!-- 引入封裝了failback的接口--initGeetest -->
<script src="http://static.geetest.com/static/tools/gt.js"></script>

使用 AJAX 異步向後臺發送數據,因此引入 JQuery 文件

<script src="/static/jquery-3.3.1.js"></script>

HTML 代碼部分與普通 Form 表單頁面所不一樣的就是多了個放置驗證碼的 form-group 組:

<div class="form-group">
    <!-- 放置極驗的滑動驗證碼 -->
    <div id="popup-captcha"></div>
</div>

前端向後端獲取驗證碼信息

經過 AJAX 異步從後端獲取驗證碼信息,代碼直接拷過來就行,須要注意的是代碼中獲取驗證碼的路由,在 urls 和 views 中添加響應代碼。

// 驗證開始須要向網站主後臺獲取id,challenge,success(是否啓用failback)
    $.ajax({
        url: "/pc-geetest/register?t=" + (new Date()).getTime(), // 加隨機數防止緩存
        type: "get",
        dataType: "json",
        success: function (data) {
            // 使用initGeetest接口
            // 參數1:配置參數
            // 參數2:回調,回調的第一個參數驗證碼對象,以後可使用它作appendTo之類的事件
            initGeetest({
                gt: data.gt,
                challenge: data.challenge,
                product: "popup", // 產品形式,包括:float,embed,popup。注意只對PC版驗證碼有效
                offline: !data.success // 表示用戶後臺檢測極驗服務器是否宕機,通常不須要關注
                // 更多配置參數請參見:http://www.geetest.com/install/sections/idx-client-sdk.html#config
            }, handlerPopup);
        }
    });

urls 中添加響應的路由:

url(r'^pc-geetest/register', views.pcgetcaptcha),

views 中響應的視圖函數: 直接拷貝

# 請在官網申請ID使用,示例ID不可以使用
pc_geetest_id = "b46d1900d0a894591916ea94ea91bd2c"
pc_geetest_key = "36fc3fe98530eea08dfc6ce76e3d24c4"


# 極驗獲取驗證碼
def pcgetcaptcha(request):
    user_id = 'test'
    gt = GeetestLib(pc_geetest_id, pc_geetest_key)
    status = gt.pre_process(user_id)
    request.session[gt.GT_STATUS_SESSION_KEY] = status
    request.session["user_id"] = user_id
    response_str = gt.get_response_str()
    return HttpResponse(response_str)

前端向後盾發送驗證碼及數據信息

直接拷貝後須要改動的地方有:

  1. 進行二次驗證的 url
    url:"/login/"
  2. 日後端發送的數據
    username: $("#username").val(),
    password: $("#password").val(),
    csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
  3. 成功返回數據後的操做
    success: function (data) {
        if (data.status) {
            // 有錯誤,在頁面上提示
            $(".login-error").text(data.msg);
        } else {
            // 登錄成功
            location.href = data.msg;
        }
    }
  4. 綁定 AJAX 觸發元素
    $("#login-button").click(function () {
            captchaObj.show();
        });
  5. 綁定顯示滑動驗證碼的元素
    // 將驗證碼加到id爲captcha的元素裏
    captchaObj.appendTo("#popup-captcha");
var handlerPopup = function (captchaObj) {
    // 成功的回調
    captchaObj.onSuccess(function () {
        var validate = captchaObj.getValidate();
        $.ajax({
            // url: "/pc-geetest/ajax_validate",
            url: "/login/", // 進行二次驗證
            type: "post",
            dataType: "json",
            data: {
                username: $("#username").val(),
                password: $("#password").val(),
                csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
                // 極驗須要傳到後端的數據
                geetest_challenge: validate.geetest_challenge,
                geetest_validate: validate.geetest_validate,
                geetest_seccode: validate.geetest_seccode
            },
            success: function (data) {
                if (data.status) {
                // 有錯誤,在頁面上提示
                $(".login-error").text(data.msg);
            } else {
                // 登錄成功
                location.href = data.msg;
            }
            }
        });
    });
    $("#login-button").click(function () {
        captchaObj.show();
    });
    // 將驗證碼加到id爲captcha的元素裏
    captchaObj.appendTo("#popup-captcha");
    // 更多接口參考:http://www.geetest.com/install/sections/idx-client-sdk.html
};

視圖函數處理

須要改動的地方就是驗證碼正確與不正確時返回的數據

def login(request):
    if request.method == "POST":
        # 初始化一個給AJAX返回的數據
        ret = {"status": 0, "msg": ""}

        # 從提交過來的數據中 取到用戶名和密碼
        username = request.POST.get("username")
        password = request.POST.get("password")

        # 極驗獲取的驗證碼並驗證
        gt = GeetestLib(pc_geetest_id, pc_geetest_key)
        challenge = request.POST.get(gt.FN_CHALLENGE, '')
        validate = request.POST.get(gt.FN_VALIDATE, '')
        seccode = request.POST.get(gt.FN_SECCODE, '')
        status = request.session[gt.GT_STATUS_SESSION_KEY]
        user_id = request.session["user_id"]
        if status:
            result = gt.success_validate(challenge, validate, seccode, user_id)
        else:
            result = gt.failback_validate(challenge, validate, seccode)
        
        if result:
            # 驗證碼正確
            # 利用auth模塊作用戶名和密碼的校驗
            user = auth.authenticate(username=username, password=password)
            if user:
                auth.login(request, user)
                ret["msg"] = "/index/"
            else:
                # 用戶名密碼錯誤
                ret["status"] = 1
                ret["msg"] = "用戶名或密碼錯誤!"
        else:
            ret["status"] = 1
            ret["msg"] = "驗證碼錯誤"

        return JsonResponse(ret)

    return render(request, "login.html")

GitHub 地址: https://github.com/protea-ban/oldboy/tree/master/s9day76/bbs

相關文章
相關標籤/搜索