基于form表单的极验滑动验证小案例
01、目录展示
02、url.py
urlpatterns = [ path('admin/', admin.site.urls), path('login/',views.login), path('pc-geetest/register/',views.pcgetcaptcha), path('index/',views.index), # path('pc-geetest/validate/',views.pcvalidate), ]
03、view.py
from django.shortcuts import render # Create your views here. from django.shortcuts import HttpResponse, render, redirect from app01.models import User from utils.geetest import GeetestLib pc_geetest_id = "自己注册后得到的id" pc_geetest_key = "自己注册后得到的key" 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() print("发到get前段的验证码数据》〉",response_str) return HttpResponse(response_str) def login(request): if request.method == "POST": print(123123) # 前段提交的用户信息 username = request.POST.get("username") pwd = request.POST.get("password") print("提交〉〉", username, pwd) 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, "") secode = request.POST.get(gt.FN_SECCODE, "") status = request.session[gt.GT_STATUS_SESSION_KEY] user_id = request.session["user_id"] print("前端提交的验证码数据〉〉", challenge, validate, secode, status) print("user_id>>",user_id) print("status>>",status) if not status: # 失败 result = gt.failback_validate(challenge, validate, secode) ret["msg"] = "验证错误" else: # 成功 result = gt.success_validate(challenge, validate, secode) # 从数据库中获取用户 userinfo = User.objects.filter(name=username, pwd=pwd).first() if userinfo: ret["status"] = True ret["msg"] = "登录成功----" return render(request, "index.html") else: ret["msg"] = "用户名或则密码错误" print("----", ret) return HttpResponse(ret["msg"]) print("----",ret) # return HttpResponse(ret) else: return render(request, "login.html") def index(request): return HttpResponse("首页---")
04、login.html
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录界面测试</title> <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script> <!-- 引入封装了failback的接口--initGeetest --> <script src="http://static.geetest.com/static/tools/gt.js"></script> </head> <body> <h1>极验证测试</h1> <div class="geet"> <form class="popup" method="post" action="/login/"> {% csrf_token %} <br> <p> <label for="username">用户名:</label> <input class="inp" name="username" type="text"> </p> <br> <p> <label for="password">密 码:</label> <input class="inp" name="password" type="password"> </p> <div id="embed-captcha"></div> <p id="wait" class="show">正在加载验证码......</p> <p id="notice" class="hide">请先拖动验证码到相应位置</p> <br> <input class="btn" id="embed-submit" type="submit" value="提交"> </form> </div> <div id="popup-captcha"> </div> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <script src="http://static.geetest.com/static/tools/gt.js"></script> <script> var handlerEmbed = function (captchaObj) { $("#embed-submit").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: "/pc-geetest/register?t=" + (new Date()).getTime(), // 加随机数防止缓存 type: "get", dataType: "json", success: function (data) { console.log("返回的验证数据是〉〉", 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> </body> </html>
普通人!