极验验证码示例
官网: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标签。
1 <script src="/static/jquery.js"></script> 2 <script src="/static/bootstrap/js/bootstrap.min.js"></script> 3 <script src="http://static.geetest.com/static/tools/gt.js"></script> 4 <script> 5 var handlerPopup = function (captchaObj) { 6 // 成功的回调 7 captchaObj.onSuccess(function () { 8 var validate = captchaObj.getValidate(); 9 $.ajax({ 10 url: "/login/", // 进行二次验证 11 type: "post", 12 dataType: "json", 13 data: { 14 username: $('#username').val(), 15 password: $('#password').val(), 16 csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(), 17 geetest_challenge: validate.geetest_challenge, 18 geetest_validate: validate.geetest_validate, 19 geetest_seccode: validate.geetest_seccode 20 }, 21 success: function (ret) { 22 if (ret.status) { 23 location.href = ret.msg; 24 } else { 25 $(".login-error").text(ret.msg); 26 } 27 } 28 }); 29 }); 30 $("#login-button").click(function () { 31 captchaObj.show(); 32 }); 33 // 将验证码加到id为captcha的元素里 34 captchaObj.appendTo("#popup-captcha"); 35 // 更多接口参考:http://www.geetest.com/install/sections/idx-client-sdk.html 36 }; 37 // 验证开始需要向网站主后台获取id,challenge,success(是否启用failback) 38 $.ajax({ 39 url: "/pc-geetest/register?t=" + (new Date()).getTime(), // 加随机数防止缓存 40 type: "get", 41 dataType: "json", 42 success: function (data) { 43 // 使用initGeetest接口 44 // 参数1:配置参数 45 // 参数2:回调,回调的第一个参数验证码对象,之后可以使用它做appendTo之类的事件 46 initGeetest({ 47 gt: data.gt, 48 challenge: data.challenge, 49 product: "popup", // 产品形式,包括:float,embed,popup。注意只对PC版验证码有效 50 offline: !data.success // 表示用户后台检测极验服务器是否宕机,一般不需要关注 51 // 更多配置参数请参见:http://www.geetest.com/install/sections/idx-client-sdk.html#config 52 }, handlerPopup); 53 } 54 }); 55 </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)