1 如何引用第三方滑動驗證碼
阿新 • • 發佈:2018-09-23
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放到登錄函數的裏面
![技術分享圖片](/img/jia.gif)
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("View Codeusername") 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": "驗證碼錯誤"})
5 urls裏面添加url
這個路徑是上面api1的路徑
url(r‘^ooxx/$‘, views.pcgetcaptcha),
6 修改login登錄頁面代碼
![技術分享圖片](/img/jia.gif)
<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 如何引用第三方滑動驗證碼