极验滑动验证登录
极验滑动验证登录
滑动验证码
验证码是网站用来防止网络入侵的一种手段，现在相对安全而且比较流行的就是滑动验证码，
实现效果如下：
geetest
极验验证码
Python 实现的滑动验证码网址：https://docs.geetest.com/install/deploy/server/python
注意： 使用第三方插件时不要求看懂，只要求能按照提供的 demo 和技术文档完成其功能。
安装极验自己的包
在项目中需要使用极验自己的包
from geetest import GeetestLib
可以使用 Pycharm 安装此包或者直接用 pip 安装
pip install geetest
HTML 页面代码
需要引入极验提供的 JS 文件
<!-- 引入封装了failback的接口--initGeetest -->
<script src="http://static.geetest.com/static/tools/gt.js"></script>
使用 AJAX 异步向后台发送数据，所以引入 JQuery 文件
<script src="/static/jquery-3.3.1.js"></script>
HTML 代码部分与普通 Form 表单页面所不同的就是多了个放置验证码的 form-group 组：
<div class="form-group">
<!-- 放置极验的滑动验证码 -->
<div id="popup-captcha"></div>
</div>
前端向后端获取验证码信息
通过 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 地址： https://github.com/protea-ban/oldboy/tree/master/s9day76/bbs
