極驗驗證使用-滑動&選字驗證碼

時間 2019-12-09

標籤驗證使用滑動選字驗證碼简体版

原文原文鏈接

準備

SDK下載

首先在極驗官網下載好SDK，附上官網連接，點此可直接下載python版zip包。html

模塊安裝

使用該SDK時發現它依賴兩個模塊，分別是geetest和requests。python

pip install geetest
pip install requests

使用

我這裏是在Django環境下測試。jquery

登陸頁

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>登錄</title>
 6     <!-- 爲使用方便，直接使用jquery.js庫，如您代碼中不須要，能夠去掉 -->
 7     <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
 8     <!-- 引入封裝了failback的接口--initGeetest -->
 9     <script src="http://static.geetest.com/static/tools/gt.js"></script>
10 </head>
11 <body>
12 
13 <div class="popup">
14     <br>
15     <p>
16         <labe>用戶名：</labe>
17         <input id="username1" class="inp" type="text" value="admin">
18     </p>
19     <br>
20     <p>
21         <label>密&nbsp;&nbsp;&nbsp;&nbsp;碼：</label>
22         <input id="password1" class="inp" type="password" value="123">
23     </p>
24 
25     <br>
26     <input class="btn" id="popup-submit" type="submit" value="提交">
27 
28     <div id="popup-captcha"></div>
29 </div>
30 
31 <script>
32     var handlerPopup = function (captchaObj) {
33         // 成功的回調
34         captchaObj.onSuccess(function () {
35             var validate = captchaObj.getValidate();
36             $.ajax({
37                 url: "/login/", // 進行二次驗證
38                 type: "post",
39                 dataType: "json",
40                 data: {
41                     username: $('#username1').val(),
42                     password: $('#password1').val(),
43                     geetest_challenge: validate.geetest_challenge,
44                     geetest_validate: validate.geetest_validate,
45                     geetest_seccode: validate.geetest_seccode
46                 },
47                 success: function (data) {
48                     alert(data.msg)
49                 }
50             });
51         });
52         $("#popup-submit").click(function () {
53             captchaObj.show();
54         });
55         // 將驗證碼加到id爲captcha的元素裏
56         captchaObj.appendTo("#popup-captcha");
57         // 更多接口參考：http://www.geetest.com/install/sections/idx-client-sdk.html
58     };
59     // 驗證開始須要向網站主後臺獲取id，challenge，success（是否啓用failback）
60     $.ajax({
61         url: "/getcaptcha?t=" + (new Date()).getTime(), // 加隨機數防止緩存
62         type: "get",
63         dataType: "json",
64         success: function (data) {
65             // 使用initGeetest接口
66             // 參數1：配置參數
67             // 參數2：回調，回調的第一個參數驗證碼對象，以後能夠使用它作appendTo之類的事件
68             initGeetest({
69                 gt: data.gt,
70                 challenge: data.challenge,
71                 product: "popup", // 產品形式，包括：float，embed，popup。注意只對PC版驗證碼有效
72                 offline: !data.success // 表示用戶後臺檢測極驗服務器是否宕機，通常不須要關注
73                 // 更多配置參數請參見：http://www.geetest.com/install/sections/idx-client-sdk.html#config
74             }, handlerPopup);
75         }
76     });
77 </script>
78 </body>
79 </html>

/templates/login.html

注意：須要引入如下js：git

<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://static.geetest.com/static/tools/gt.js"></script>

相應接口

 1 from django.shortcuts import render, HttpResponse
 2 from django.http import JsonResponse
 3 from geetest import GeetestLib
 4 
 5 pc_geetest_id = "b46d1900d0a894591916ea94ea91bd2c"
 6 pc_geetest_key = "36fc3fe98530eea08dfc6ce76e3d24c4"
 7 
 8 
 9 def getcaptcha(request):
10     user_id = 'test'
11     gt = GeetestLib(pc_geetest_id, pc_geetest_key)
12     status = gt.pre_process(user_id)
13     request.session[gt.GT_STATUS_SESSION_KEY] = status
14     request.session["user_id"] = user_id
15     response_str = gt.get_response_str()
16     return HttpResponse(response_str)
17 
18 
19 # Create your views here.
20 def login(request):
21     if request.method == "POST":
22         gt = GeetestLib(pc_geetest_id, pc_geetest_key)
23         challenge = request.POST.get(gt.FN_CHALLENGE, '')
24         validate = request.POST.get(gt.FN_VALIDATE, '')
25         seccode = request.POST.get(gt.FN_SECCODE, '')
26         status = request.session[gt.GT_STATUS_SESSION_KEY]
27         user_id = request.session["user_id"]
28         if status:
29             result = gt.success_validate(challenge, validate, seccode, user_id)
30         else:
31             result = gt.failback_validate(challenge, validate, seccode)
32 
33         username = request.POST.get('username')
34         password = request.POST.get('password')
35         if result:
36             # 驗證成功
37             if username == 'admin' and password == '123':
38                 result = {'status': 0, 'msg': "登陸成功"}
39             else:
40                 result = {'status': 1, 'msg': "用戶名或密碼錯誤"}
41         else:
42             result = {'status': 2, 'msg': "驗證失敗"}
43         return JsonResponse(result)
44     return render(request, 'login.html')
45 
46 views.py

views.py

運行

配置好路由，運行。訪問localhost:8000/login/，點擊提交。效果以下圖：github

選字驗證碼

在我測試C#版Demo的時候發現它的驗證碼是選字驗證碼，最後發現只要把C#版Demo中的id和key替換上述views.py中的五、6行的id和key，頁面就是選字驗證碼。id和key以下：ajax

pc_geetest_id = "48a6ebac4ebc6642d68c217fca33eb4d"
pc_geetest_key = "4f1c085290bec5afdc54df73535fc361"

以下圖：django

完整示例下載

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。