Django中使用geetest实现滑动验证
下载第三方模块
导入模块social-auth-app-django 和geetest 提前去官网下载gt.js或者引入http://static.geetest.com/static/tools/gt.js
pip install social-auth-app-django
pip install geetest
在django引用
1.目录结构
2.html层
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css">
<style>
.error{
color: red;
}
</style>
</head>
<body>
<h3>登录</h3> <!-- 为使用方便，直接使用jquery.js库，如您代码中不需要，可以去掉 -->
<script type="text/javascript" src="/static/bootstrap/js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="/static/bootstrap/js/bootstrap.js"></script>
<!-- 引入封装了failback的接口--initGeetest -->
<script src="http://static.geetest.com/static/tools/gt.js"></script> <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">登录 博客账号</p>
<p>请在下面的输入框中输入您的用户名和密码</p>
</div>
<div class="panel-body">
<div>
{% csrf_token %}
<div class="form-group">
<input type="text" class="form-control input-lg" id="user" placeholder="用户名">
</div>
<div class="form-group">
<input type="password" class="form-control input-lg" id="pwd" placeholder="密码">
</div>
<div class="form-group popup-div">
<!-- 放置极验的滑动验证码 -->
<div id="popup-captcha"></div> </div>
<div class="form-group">
<button class="btn btn-block btn-primary btn-lg" id="login-button" >登录</button>
</div> <span id="error" class="pull-right"></span>
</div> </div>
</div>
</div>
</div> </div> <script>
//发送数据
var handlerPopup = function (captchaObj) {
// 成功的回调
captchaObj.onSuccess(function () {
var validate = captchaObj.getValidate();
var username = $("#user").val();
var password = $("#pwd").val();
$.ajax({
url: "/blog/geelogin/", // 进行二次验证
type: "post",
dataType: "json",
data: {
username: username,
password: password,
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).css({'margin-left':'10px','color':'red'})
}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
};
// 验证开始需要向网站主后台获取id，challenge，success（是否启用failback）
$.ajax({
url: "/blog/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);
}
}); </script>
</body>
</html>
3.urls.py
from django.contrib import admin
from django.urls import path
from django.urls import re_path,include from blog import views urlpatterns = [
# path('admin/', admin.site.urls),
# re_path(r"blog/", include(('blog.urls', 'blog'))), # 分发
path('login/',views.login),
path('get_valid_img/',views.get_validCode_img),
path('index/',views.index),
path('geeindex/', views.geeindex),
re_path(r"^pc-geetest/register",views.get_geetest),
# re_path(r'^pc-geetest/validate$',views.pcvalidate),
# re_path(r'^pc-geetest/ajax_validate', views.pcajax_validate),
path('geelogin/',views.geelogin), ]
4.views.py
from django.shortcuts import render,HttpResponse # Create your views here.
from django.http import JsonResponse
from django.contrib import auth pc_geetest_id = "b46d1900d0a894591916ea94ea91bd2c"
pc_geetest_key = "36fc3fe98530eea08dfc6ce76e3d24c4" def geelogin(request):
"""
登录
:param request:
:return:
"""
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"] = "/blog/index/"
else:
# 用户名密码错误
ret["status"] = 1
ret["msg"] = "用户名或密码错误！"
else:
ret["status"] = 1
ret["msg"] = "验证码错误" return JsonResponse(ret) else:
return render(request,'geelogin.html') def index(request):
return render(request, 'index.html') from geetest import GeetestLib # 处理极验 获取验证码的视图
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)
5.index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<h3>首页{{ request.user }}</h3>
</body>
</html>
Django中使用geetest实现滑动验证的更多相关文章
- Django中使用geetest验证
一.geetest的使用方法 首先需要在setting中配置好文件 GEE_TEST = { "gee_test_access_id": "37ca5631edd1e88 ...
- Django中的Form表单验证
回忆一下Form表单验证的逻辑: 前端有若干个input输入框,将用户输入内容,以字典传递给后端. 后端预先存在一个Form表单验证的基类,封装了一个检测用户输入是否全部通过的方法.该方法会先定义好错 ...
- day 88 Vue学习之八geetest滑动验证
本节目录 一 geetest前端web中使用 二 xxx 三 xxx 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 geetest前端web中使用 下载gt文件,官网地址,下面我 ...
- day 86 Vue学习之八geetest滑动验证
Vue学习之八geetest滑动验证 本节目录 一 geetest前端web中使用 二 xxx 三 xxx 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 geetest前端web ...
- 滑动验证的设计与实现J2EE
滑动验证的设计与实现J2EE 注:本博文为博主原创,转载请注明出处. 项目源码地址:https://github.com/zhangxy1035/Verify 本篇博文的主要目录如下: 一.项目简介二 ...
- Django中使用极验Geetest滑动验证码
一,环境部署 1.创建一个django测试项目 此处省略... 二,文档部署 1.下载安装python对应的SDK 使用命令从Github导入完整项目:git clone https://github ...
- DRF 中使用 级验科技滑动验证
接口的login 登录 使用 Django 中的 auth 认证 因为之前合并了 django 的 用户表 创建的 用户 密码 会在内部进行加密 不知道加密方式所以要使用 authenticate 来 ...
- VUE中使用geetest滑动验证码
一,准备工作:服务端部署 下载文件gt.gs: https://github.com/GeeTeam/gt3-python-sdk 需要说明的是这里的gt.js文件,它用于加载对应的验证JS库. 1. ...
- Vue（7）- vue-cookies、极验滑动验证geetest、vue-router的导航守卫
一.vue-cookies 参考文档简书:https://www.jianshu.com/p/535b53989b39 参考文档npm:https://www.npmjs.com/package/vu ...
随机推荐
- [转] 以 async/await 为例，说明 babel 插件怎么搭
你一定碰到过这些库 babel-polyfill 项目地址:https://github.com/babel/babel/blob/master/packages/babel-polyfill 通过两 ...
- jq实现多选反选
<script type="text/javascript"> $('input [name="ckball"]').click(functi ...
- CentOs下手动升级node版本
查找对应的nodejs包,具体参考https://nodejs.org/download/release/ 切换到安装node的位置 此处为/usr/local/lib/nodejs 不存在可以建立 ...
- 我的Python笔记补充：入门知识拾遗
声明:本文整理借鉴金角大王的Python之路,Day1 - Python基础1,仅供本人学习使用!!! 入门知识拾遗 一.bytes类型 二.三元运算 1 result = 值1 if 条件 else ...
- 027 storm面试小题
1.大纲 Storm工作原理是什么? 流的模式是什么?默认是什么? 对于mapreduce如何理解? Storm的特点和特性是什么? Storm组件有哪些? 2.Storm工作原理是什么? 相对于ha ...
- python之socketserver实现并发
python之socketserver实现并发 服务端 import socketserver #socketserver模块是用来实现并发 # 我们自己的类里一定要继承socketserver.Ba ...
- ARP欺骗配置及演示过程
目录 环境 软件 网络拓扑图 配置流程 配置构思 具体流程 问题 演示过程 状态 检查Attack前centOS7_1的ARP地址表 在kali上输入以下命令发动攻击 此时查看centOS7_1的AR ...
- jquery只获取自身文本节点，不获取子元素的
jQuery.text()方法时候,会把子元素的文本也获取到,以下方法可获取自身文本节点,不包括子元素 <div id="demo">只获取我<a href=&q ...
- 【2019雅礼集训】【可持久化线段树】【模型转化】D1T2Permutation
目录 题意 输入格式 输出格式 思路 代码 题意 给定一个长度为n的序列A[],你需要确定一个长度为n的排列P[],定义当前排列的值为: \[\sum_{i=1}^{n}{A[i]P[i]}\] 现在 ...
- Nuxt.js 从入门到放弃
Nuxt 是 Vue 上的 SSR,也就是服务端渲染应用框架,可在很大程度上解决当前 SPA 和 CSR 的首页加载慢,不利于 SEO 的问题.本场 Chat 就将详细介绍 Nuxt 的使用以及相关概 ...