極驗驗證碼示例

官網：https://docs.geetest.com/install/deploy/server/python

 

准備工作：

1、去官網下載相關代碼

2、安裝geetest模塊

 

第一步：將以下代碼拷貝到頁面的js文件中

注意修改幾個地方：

1、第10行，將url改成自己的登陸url。

2、第14-16行，提取自己頁面上的數據。

3、第30行，綁定自己的登陸按鈕。

4、第34行，在頁面中創建一個有這個class的div標簽。

<script src="/static/jquery.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script src="http://static.geetest.com/static/tools/gt.js"></script>
<script>
    var handlerPopup = function (captchaObj) {
        // 成功的回調
        captchaObj.onSuccess(function () {
            var validate = captchaObj.getValidate();
            $.ajax({
                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 (ret) {
                    if (ret.status) {
                        location.href = ret.msg;
                    } else {
                        $(".login-error").text(ret.msg);
                    }
                }
            });
        });
        $("#login-button").click(function () {
            captchaObj.show();
        });
        // 將驗證碼加到id為captcha的元素里
        captchaObj.appendTo("#popup-captcha");
        // 更多接口參考：http://www.geetest.com/install/sections/idx-client-sdk.html
    };
    // 驗證開始需要向網站主后台獲取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);
        }
    });
</scripts>

 

第二步：設置獲取驗證碼的url和視圖函數

1、url綁定視圖函數

    #獲取驗證碼信息
    path('pc-geetest/register', account.pcgetcaptcha),

2、視圖函數

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)

 

第三步：設置驗證碼和賬號密碼校驗的函數

def login(request):
    if request.method == "GET":
        return render(request, "login.html")
    # POST請求獲取用戶名和密碼
    username = request.POST.get("username")
    password = request.POST.get("password")

    ret = {"status": False, "msg": None}

    # 驗證碼相關操作
    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 not status:
        # 驗證碼校驗失敗
        result = gt.failback_validate(challenge, validate, seccode)
        ret["msg"] = "驗證碼錯誤"
    else:
        # 驗證碼校驗成功
        result = gt.success_validate(challenge, validate, seccode, user_id)
        user = auth.authenticate(username=username, password=password)
        if user:
            auth.login(request, user)
            ret["status"] = True
            ret["msg"] = "/index"
        else:
            ret["msg"] = "用戶名或密碼錯誤"

    return JsonResponse(ret)