Django之驗證碼
阿新 • • 發佈：2019-01-28
token 有效 tro itl tools 宕機 container quest http
一、自己生成驗證碼
二、極驗科技互動驗證碼
使用前步驟：下載官網文件——pip install geetest——引入其封裝的js模塊
代碼分為三段：生成驗證碼——顯示驗證碼——驗證驗證碼、
1 from django.shortcuts import render,HttpResponse 2 from django.http import JsonResponse 3 from django.contrib import auth 4 from geetest import GeetestLib 5 6 # Create your views here. 7 8 #使用極驗滑動驗證碼的登陸 9 def login(request): 10 if request.method == "POST": 11 print("1") 12 #初始化一個返回給ajax的字典 13 ret = {"status":0,"msg":""} 14 #從提交的數據中獲取用戶名和密碼 15 username = request.POST.get("username") 16 password = request.POST.get("password") 17 #獲取驗證碼相關數據 18 gt = GeetestLib(pc_geetest_id, pc_geetest_key) 19 challenge = request.POST.get(gt.FN_CHALLENGE, ‘‘) 20 validate = request.POST.get(gt.FN_VALIDATE, ‘‘) 21 seccode = request.POST.get(gt.FN_SECCODE, ‘‘) 22 status = request.session[gt.GT_STATUS_SESSION_KEY]23 user_id = request.session["user_id"] 24 25 if status: 26 result = gt.success_validate(challenge, validate, seccode, user_id) 27 else: 28 result = gt.failback_validate(challenge, validate, seccode) 29 30 #如果result有值，則驗證成功,利用auth做驗證 31 if result: 32 user = auth.authenticate(username=username,password=password) 33 if user: 34 #如果用戶名密碼正確 35 auth.login(request,user) 36 ret["msg"] = "/index/" 37 else: 38 ret["status"] = 1 39 ret["msg"] = "用戶名密碼錯誤" 40 else: 41 #如果驗證嗎錯誤 42 ret["status"] = 1 43 ret["msg"] = "驗證碼錯誤" 44 return JsonResponse(ret) 45 return render(request,"login.html",locals()) 46 47 48 #請在官網申請ID使用，示例ID不可使用 49 pc_geetest_id = "b46d1900d0a894591916ea94ea91bd2c" 50 pc_geetest_key = "36fc3fe98530eea08dfc6ce76e3d24c4" 51 #獲取滑動驗證碼 52 def get_geetest(request): 53 user_id = ‘test‘ 54 gt = GeetestLib(pc_geetest_id, pc_geetest_key) 55 status = gt.pre_process(user_id) 56 request.session[gt.GT_STATUS_SESSION_KEY] = status 57 request.session["user_id"] = user_id 58 response_str = gt.get_response_str() 59 return HttpResponse(response_str) 60 61 62 def index(request): 63 return render(request,"index.html",locals())
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css"> 7 <link rel="stylesheet" href="/static/css/mystyle.css"> 8 </head> 9 <body> 10 11 <div class="container"> 12 <div class="row"> 13 <form class="form-horizontal col-md-6 col-md-offset-3 login-form"> 14 {% csrf_token %} 15 <div class="form-group"> 16 <label for="username" class="col-sm-2 control-label">用戶名</label> 17 <div class="col-sm-10"> 18 <input type="text" class="form-control" id="username" name="username" placeholder="用戶名"> 19 </div> 20 </div> 21 <div class="form-group"> 22 <label for="password" class="col-sm-2 control-label">密碼</label> 23 <div class="col-sm-10"> 24 <input type="password" class="form-control" id="password" name="password" placeholder="密碼"> 25 </div> 26 </div> 27 <div class="form-group"> 28 <div id="popup-captcha"></div> 29 </div> 30 <div class="form-group"> 31 <div class="col-sm-offset-2 col-sm-10"> 32 <button type="button" class="btn btn-default" id="login-button">登錄</button> 33 <span class="login-error"></span> 34 </div> 35 </div> 36 </form> 37 </div> 38 </div> 39 40 41 <script src="/static/jquery.js"></script> 42 <script src="/static/bootstrap/js/bootstrap.min.js"></script> 43 <!-- 引入封裝了failback的接口--initGeetest --> 44 <script src="http://static.geetest.com/static/tools/gt.js"></script> 45 <script> 46 //發送數據 47 var handlerPopup = function (captchaObj) { 48 // 成功的回調 49 captchaObj.onSuccess(function () { 50 var validate = captchaObj.getValidate(); 51 var username = $("#username").val(); 52 var password = $("#password").val(); 53 $.ajax({ 54 url: "/login/", // 進行二次驗證 55 type: "post", 56 dataType: "json", 57 data: { 58 username: username, 59 password: password, 60 csrfmiddlewaretoken: $("[name=‘csrfmiddlewaretoken‘]").val(), 61 geetest_challenge: validate.geetest_challenge, 62 geetest_validate: validate.geetest_validate, 63 geetest_seccode: validate.geetest_seccode 64 }, 65 success: function (data) { 66 if(data.status){ 67 $(".login-error").text(data.msg); 68 }else{ 69 location.href = data.msg; 70 } 71 } 72 }); 73 }); 74 75 //綁定事件顯示滑動驗證碼 76 $("#login-button").click(function () { 77 captchaObj.show(); 78 }); 79 // 將驗證碼加到id為captcha的元素裏 80 captchaObj.appendTo("#popup-captcha"); 81 // 更多接口參考：http://www.geetest.com/install/sections/idx-client-sdk.html 82 }; 83 // 驗證開始需要向網站主後臺獲取id，challenge，success（是否啟用failback） 84 $.ajax({ 85 url: "/pc-geetest/register?t=" + (new Date()).getTime(), // 加隨機數防止緩存 86 type: "get", 87 dataType: "json", 88 success: function (data) { 89 // 使用initGeetest接口 90 // 參數1：配置參數 91 // 參數2：回調，回調的第一個參數驗證碼對象，之後可以使用它做appendTo之類的事件 92 initGeetest({ 93 gt: data.gt, 94 challenge: data.challenge, 95 product: "popup", // 產品形式，包括：float，embed，popup。註意只對PC版驗證碼有效 96 offline: !data.success // 表示用戶後臺檢測極驗服務器是否宕機，一般不需要關註 97 // 更多配置參數請參見：http://www.geetest.com/install/sections/idx-client-sdk.html#config 98 }, handlerPopup); 99 } 100 }); 101 102 103 </script> 104 </body> 105 </html>
Django之驗證碼