1. 程式人生 > >1 如何引用第三方滑動驗證碼

1 如何引用第三方滑動驗證碼

login ... ajax pre else 網站 button val ssi

參考:極驗科技:https://docs.geetest.com/install/deploy/server/python

1 安裝requests

  pip install requests

2 拷貝你在網站上下載好的軟件包下面的sdk下面的geetest文件到你的項目utils目錄下面

3 拷貝代碼到views.py

from utils.geetest import GeetestLib # 導入滑動驗證碼的模塊
#請在官網申請ID使用,示例ID不可使用
pc_geetest_id = "b46d1900d0a894591916ea94ea91bd2c"
pc_geetest_key = "36fc3fe98530eea08dfc6ce76e3d24c4
"

#pcgetcaptcha就是初始化(API1),獲取流水標識並設置狀態碼

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)

4 把二次驗證的ap12放到登錄函數的裏面

技術分享圖片
 1 class LoginView(views.View):
 2     def get(self, request):
 3         return render(request, "login.html")
 4 
 5     def post(self, request):
 6         next_url = request.GET.get("next","/index/")
 7         username = request.POST.get("
username") 8 pwd = request.POST.get("password") 9 # v_code=request.POST.get("vcode","").upper() #如果用戶不寫驗證碼就是空 10 # 滑動驗證碼開始 11 gt = GeetestLib(pc_geetest_id, pc_geetest_key) 12 challenge = request.POST.get(gt.FN_CHALLENGE, ‘‘) 13 validate = request.POST.get(gt.FN_VALIDATE, ‘‘) 14 seccode = request.POST.get(gt.FN_SECCODE, ‘‘) 15 status = request.session[gt.GT_STATUS_SESSION_KEY] 16 user_id = request.session["user_id"] 17 if status: 18 result = gt.success_validate(challenge, validate, seccode, user_id) 19 else: 20 result = gt.failback_validate(challenge, validate, seccode) 21 #滑動驗證碼結束 22 23 24 # if v_code==request.session.get("v_code"): 25 if result: 26 27 user_obj = auth.authenticate(username=username, password=pwd) 28 if user_obj: 29 auth.login(request, user_obj) # auth認證登錄 30 return redirect(next_url) 31 else: 32 return render(request, "login.html", {"error_msg": "用戶名或密碼錯誤"}) 33 else: 34 return render(request, "login.html", {"error_msg": "驗證碼錯誤"})
View Code

5 urls裏面添加url

這個路徑是上面api1的路徑
url(r‘^ooxx/$‘, views.pcgetcaptcha),

6 修改login登錄頁面代碼

技術分享圖片
<script src="/static/plugins/jquery-3.3.1.min.js"></script>
{#<script src="/static/js/login.js"></script>#}
<!-- 引入封裝了failback的接口--initGeetest -->
<script src="http://static.geetest.com/static/tools/gt.js"></script>
<!--滑動驗證碼的ajax操作-->
<script>
    var handlerEmbed = function (captchaObj) {
        $("#login-button").click(function (e) {
            var validate = captchaObj.getValidate();
            if (!validate) {
                $("#notice")[0].className = "show";
                setTimeout(function () {
                    $("#notice")[0].className = "hide";
                }, 2000);
                e.preventDefault();
            }
        });
        // 將驗證碼加到id為captcha的元素裏,同時會有三個input的值:geetest_challenge, geetest_validate, geetest_seccode
        captchaObj.appendTo("#embed-captcha");
        captchaObj.onReady(function () {
            $("#wait")[0].className = "hide";
        });
        // 更多接口參考:http://www.geetest.com/install/sections/idx-client-sdk.html
    };
    $.ajax({
        // 獲取id,challenge,success(是否啟用failback)
        url: "/ooxx/?t=" + (new Date()).getTime(), // 加隨機數防止緩存
        type: "get",
        dataType: "json",
        success: function (data) {
            // 使用initGeetest接口
            // 參數1:配置參數
            // 參數2:回調,回調的第一個參數驗證碼對象,之後可以使用它做appendTo之類的事件
            initGeetest({
                gt: data.gt,
                challenge: data.challenge,
                product: "embed", // 產品形式,包括:float,embed,popup。註意只對PC版驗證碼有效
                offline: !data.success // 表示用戶後臺檢測極驗服務器是否宕機,一般不需要關註
                // 更多配置參數請參見:http://www.geetest.com/install/sections/idx-client-sdk.html#config
            }, handlerEmbed);
        }
    });
</script>
View Code

7 修改存放驗證碼的div的id和button按鈕的id,都要跟上面的js裏面的一致

         <div class="form-group" id="embed-captcha">
                    <p id="wait" class="show">正在加載驗證碼......</p>
                    <p id="notice" class="hide">請先拖動驗證碼到相應位置</p>

          </div>
          
button按鈕增加一個id名字跟上面的一致
<button type="submit" class="btn btn-success" id="login-button">登陸</button>

1 如何引用第三方滑動驗證碼