极验滑动验证登录
滑动验证码
验证码是网站用来防止网络入侵的一种手段，现在相对安全而且比较流行的就是滑动验证码，
实现效果如下：
geetest
极验验证码
官网：
Python 实现的滑动验证码网址：
注意： 使用第三方插件时不要求看懂，只要求能按照提供的 demo 和技术文档完成其功能。
安装极验自己的包
在项目中需要使用极验自己的包
from geetest import GeetestLib
可以使用 Pycharm 安装此包或者直接用 pip 安装
pip install geetest
HTML 页面代码
需要引入极验提供的 JS 文件
使用 AJAX 异步向后台发送数据，所以引入 JQuery 文件
HTML 代码部分与普通 Form 表单页面所不同的就是多了个放置验证码的 form-group 组：
前端向后端获取验证码信息
通过 AJAX 异步从后端获取验证码信息，代码直接拷过来就行，需要注意的是代码中获取验证码的路由，在 urls 和 views 中添加响应代码。
// 验证开始需要向网站主后台获取id，challenge，success（是否启用failback） $.ajax({ url: "/pc-geetest/register?t=" + (new Date()).getTime(), // 加随机数防止缓存 type: "get", dataType: "json", success: function (data) { // 使用initGeetest接口 // 参数1：配置参数 // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件 initGeetest({ gt: data.gt, challenge: data.challenge, product: "popup", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效 offline: !data.success // 表示用户后台检测极验服务器是否宕机，一般不需要关注 // 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config }, handlerPopup); } }); urls 中添加响应的路由：
url(r'^pc-geetest/register', views.pcgetcaptcha),
views 中响应的视图函数： 直接拷贝
# 请在官网申请ID使用，示例ID不可使用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)
前端向后盾发送验证码及数据信息
直接拷贝后需要改动的地方有：
- 进行二次验证的 url
url："/login/" - 往后端发送的数据
username: $("#username").val(),password: $("#password").val(),csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(), - 成功返回数据后的操作
success: function (data) { if (data.status) { // 有错误，在页面上提示 $(".login-error").text(data.msg); } else { // 登陆成功 location.href = data.msg; }} - 绑定 AJAX 触发元素
$("#login-button").click(function () { captchaObj.show(); }); - 绑定显示滑动验证码的元素
// 将验证码加到id为captcha的元素里captchaObj.appendTo("#popup-captcha");
var handlerPopup = function (captchaObj) { // 成功的回调 captchaObj.onSuccess(function () { var validate = captchaObj.getValidate(); $.ajax({ // url: "/pc-geetest/ajax_validate", url: "/login/", // 进行二次验证 type: "post", dataType: "json", data: { username: $("#username").val(), password: $("#password").val(), csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(), // 极验需要传到后端的数据 geetest_challenge: validate.geetest_challenge, geetest_validate: validate.geetest_validate, geetest_seccode: validate.geetest_seccode }, success: function (data) { if (data.status) { // 有错误，在页面上提示 $(".login-error").text(data.msg); } else { // 登陆成功 location.href = data.msg; } } }); }); $("#login-button").click(function () { captchaObj.show(); }); // 将验证码加到id为captcha的元素里 captchaObj.appendTo("#popup-captcha"); // 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html}; 视图函数处理
需要改动的地方就是验证码正确与不正确时返回的数据
def login(request): if request.method == "POST": # 初始化一个给AJAX返回的数据 ret = { "status": 0, "msg": ""} # 从提交过来的数据中 取到用户名和密码 username = request.POST.get("username") password = request.POST.get("password") # 极验获取的验证码并验证 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 status: result = gt.success_validate(challenge, validate, seccode, user_id) else: result = gt.failback_validate(challenge, validate, seccode) if result: # 验证码正确 # 利用auth模块做用户名和密码的校验 user = auth.authenticate(username=username, password=password) if user: auth.login(request, user) ret["msg"] = "/index/" else: # 用户名密码错误 ret["status"] = 1 ret["msg"] = "用户名或密码错误！" else: ret["status"] = 1 ret["msg"] = "验证码错误" return JsonResponse(ret) return render(request, "login.html") GitHub 地址：
