基于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
<!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>
基于form表单的极验滑动验证小案例的更多相关文章
- django 基于form表单上传文件和基于ajax上传文件
一.基于form表单上传文件 1.html里是有一个input type="file" 和 ‘submit’的标签 2.vies.py def fileupload(request ...
- Vue（7）- vue-cookies、极验滑动验证geetest、vue-router的导航守卫
一.vue-cookies 参考文档简书:https://www.jianshu.com/p/535b53989b39 参考文档npm:https://www.npmjs.com/package/vu ...
- vue-cookies、极验滑动验证geetest、vue-router的导航守卫
一 . vue-cookies 参考文档简书:https://www.jianshu.com/p/535b53989b39 参考文档npm:https://www.npmjs.com/package/ ...
- 基于form表单submit提交不跳转
方法一:target <html> <body> <form action="" method="post" target=&qu ...
- 基于Spring MVC实现基于form表单上传Excel文件，批量导入数据
在pom.xml中引入: <!--处理2003 excel--> <dependency> <groupId>org.apache.poi</groupId& ...
- 基于form表单 写登陆注册
urls urlpatterns = [ url(r'^admin/', admin.site.urls), # 登录界面url(r'^login/$', views.login,name='logi ...
- 基于Spring3 MVC实现基于form表单文件上传
http://blog.csdn.net/jia20003/article/details/8474374/
- [oldboy-django][2深入django]form表单clean_xx, clean完成数据验证+ form错误信息
form后台生成form里面的Input标签,以及设置Input的属性 # 需求 后台生成form里面的input标签,并设置input标签的属性, class RegisterForm(Form): ...
- 关于AJAX与form表单提交数据的格式
一 form表单传输文件的格式: 只有三种: multipart/form-data 一般用于传输文件,图片文件或者其他的. 那么其中我们默认的是application/x-www-form-urle ...
随机推荐
- json字符串与json对象的转换
JSON(JavaScript Object Notation)格式是开发中较为常见的数据格式,优点是轻量,便于理解和解析生成.JSON对象是一个无序的键值对集合,以 { } 为开头和结尾,键与键之间 ...
- php不重新编译，添加模块
本文已安装mysqli模块为例 一:检查 1:首先保证php-fpm能正常启动 2:查看当前已安装的php模块是否有mysqli [root@oldboyedu ~]# /application/ph ...
- c++ 实时通信系统(基础知识TCP/IP篇)
编写前的基础知识 C/S结构: C/S是Client/Server,即客户端/服务器端架构,一种典型的两层架构.客户端包含一个或多个在用户的电脑上运行的程序服务器端有两种,一种是数据库服务器端,客户端 ...
- html 中 图片和文字一行 垂直居中对齐
效果: 代码:<div><img src='img/point_icon.png' width='35px' height='35px' style='float: lef ...
- linux系统很卡的基本排查方法
1. 查看内存使用情况 free -g 当观察到free栏已为0的时候,表示内存基本被吃完了,那就释放内存吧(释放内存参考上篇文章) 2. 查看磁盘使用情况 df -h 当发现磁盘使用率很高时,那就要 ...
- 2019全国卷(III)理科23题的另类解法
已知 $x,y,z\in\textbf{R}$且$x+y+z=1$ (1)求$(x-1)^2+(y+1)^2+(z+1)^2$的最小值: (2)若$(x-2)^2+(y-1)^2+(z-a)^2\ge ...
- HTML5 Geolocation学习
GeolocationAPI学习,我写的挺枯燥的,直接跳到最后看示例. 5.1 位置信息 HTML5 Geolocation API的使用方法相当简单.请求一个位置信息,如果用户同意,浏览器就会返回位 ...
- keep-alive实现返回保留筛选条件及筛选结果
实现页面返回时,保留筛选条件和筛选结果 说明 . keep-alive 是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM 实现 结合router实现部分页面缓存 模板应用 ...
- 弹出框 popover.js
弹出框 popover.js 为任意元素添加一小块浮层,就像 iPad 上一样,用于存放非主要信息. 弹出框的标题和内容的长度都是零的话将永远不会被显示出来. 插件依赖 弹出框依赖 工具提示插件 ,因 ...
- 使用 Capistrano 部署总结
使用 Capistrano 部署总结 2014年6月27日 admin发表评论阅读评论 简介 Capistrano 是一个 Ruby 程序,它提供高级的工具集来部署你的 Web应用到服务器上.Capi ...