需导入模块social-auth-app-django
和geetest
提前去官网下载gt.js或者引入http://static.geetest.com/static/tools/gt.js
效果图:
html:
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-default login">
<div class="panel-heading">
<p class="h3">登录 Rango博客账号</p>
<p>请在下面的输入框中输入您的用户名和密码</p>
</div>
<div class="panel-body">
<div>
{% csrf_token %}
<div class="form-group">
<input type="text" class="form-control input-lg" name="user" placeholder="用户名">
</div>
<div class="form-group">
<input type="password" class="form-control input-lg" name="pwd" placeholder="密码">
</div>
<div class="form-group popup-div">
<!-- 放置极验的滑动验证码 -->
<span >验证码加载中...</span>
<div ></div>
</div>
<div class="form-group">
<button class="btn btn-block btn-primary btn-lg" >登录</button>
</div>
<a href="/register/">注册</a>
|
<a href="">找回密码</a>
<strong ></strong>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- geetest -->
{# <script src="http://static.geetest.com/static/tools/gt.js"></script>#}
<script src="/static/js/gt.js"></script>
<script src="/static/js/login.js"></script>
js:
// 极验滑动验证码
var handlerPopup = function (captchaObj) {
// appendTo方法用于将验证按钮插到宿主页面,使其显示在页面上。
captchaObj.appendTo('#popup-captcha');
// onReady监听验证按钮的 DOM 生成完毕事件
captchaObj.onReady(function () {
$("#wait").attr('class', 'hidden');
});
// onSuccess:监听验证成功事件,进行二次验证
captchaObj.onSuccess(function () {
$("#login-button").removeAttr('disabled');
$("#login-button").removeAttr('title');
});
$("#login-button").click(function () {
// getValidate:获取用户进行成功验证(onSuccess)所得到的结果,该结果用于进行服务端 SDK 进行二次验证。
var validate = captchaObj.getValidate();
if (!validate) {
return 0;
} else {
$.ajax({
url: "/login/", // 进行二次验证
type: "post",
dataType: "json",
data: {
username: $('input[name="user"]').val(),
password: $('input[name="pwd"]').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) {
$('#error').text(data.msg);
captchaObj.reset(); // 让验证回到初始状态
} else {
location.href = data.msg;
}
},
});
}
});
};
// 当input框获取焦点时将之前的错误清空
$('input[name="user"],input[name="pwd"]').focus(function () {
// 将之前的错误清空
$('#error').text('');
});
// 验证开始需要向网站主后台获取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, // 验证 id,极验后台申请得到
challenge: data.challenge, // 验证流水号,后服务端 SDK 向极验服务器申请得到
product: "popup", // 产品形式,包括:float,embed,popup。注意只对PC版验证码有效
offline: !data.success, // 表示用户后台检测极验服务器是否宕机,一般不需要关注
width: '100%', // 设置按钮的长度
// 更多配置参数请参见:http://www.geetest.com/install/sections/idx-client-sdk.html#config
}, handlerPopup);
},
});
views:
from django.shortcuts import render, HttpResponse
from django.http import JsonResponse
from django.contrib import auth
from geetest import GeetestLib
# 请在官网申请ID使用
pc_geetest_id = "xxxxxxxxxxxxxxxxxxx"
pc_geetest_key = "xxxxxxxxxxxxxxxxxxx"
def login(request):
if request.method == "POST":
ret = {
'status': None,
'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) # 将登录用户赋值给 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")
# 处理极验 获取验证码的视图
def get_geetest(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)
urls:
urlpatterns = [
path('admin/', admin.site.urls),
path('login/', views.login), # 登录视图
path('register/', views.register), # 注册视图
path('index/', views.index), # 首页
re_path(r'^$', views.index), # 首页
url(r'^pc-geetest/register', views.get_geetest),
]
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:【Django】使用geetest实现滑动验证 - Python技术站