python - 登陆验证的滑块接口
----------------- 滑块接口 -----------------
0:大体思路:点击登陆按钮的时候会进行第一次验证(滑块验证),然后访问后台滑块接口,并返回验证结果,如果滑块接口通过则进入第二次验证(登陆的用户名密码验证),访问登陆接口,并返回验证结果
一:前端
1. HTMl
<form action="" method="post" class="layui-form">
{% csrf_token %}
<input name="email" id="username" placeholder="输入电子邮箱" type="text" lay-verify="required" class="layui-input" value="{{ email }}">
<hr class="hr15">
<input name="password" id="password" lay-verify="required" placeholder="密码" type="password" class="layui-input" value="{{ password }}">
<hr class="hr15">
<div id="popup-captcha"></div> # 这个是滑块显示的div
<input value="登录" lay-submit lay-filter="login" id="login" style="width:100%;" type="button"> # 这里需要设置 id="login"
<hr class="hr15" >
<span style="color: red;" id="error">{{ error_login }}</span>
<hr class="hr15" >
<a href="/register/retrieve" style="float: left">忘记密码?</a>
<a href="/register" style="float: right">立即注册</a>
</form>
2. js 文件
// 引入滑块的 js 文件
<script src="http://static.geetest.com/static/tools/gt.js"></script>
<script>
$(function(){ // 登陆验证结果 ajax
var handlerPopup = function (captchaObj) {
// 成功的回调
captchaObj.onSuccess(function () {
var validate = captchaObj.getValidate();
let username = $('#login_user_name').val(); // 要验证的用户名
let password = $('#login_password').val(); // 要验证的密码 // 账号 $.ajax({
url: "/login/", // 进行二次验证(登陆验证),输入验证登陆的用户名和密码的接口
type: "post",
async : false,
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) {
console.log(data) // 返回结果,用户跳转页面或显示错误信息
if(data.res){
console.log(data);
location.href = data.url
}else{
$('#user_res').addClass('show_error')
}
}
});
}); $("#login").click(function () {
captchaObj.show();
});
// 将验证码加到id为captcha的元素里
captchaObj.appendTo("#popup-captcha");
// 更多接口参考:http://www.geetest.com/install/sections/idx-client-sdk.html
}; // 滑块显示
$.ajax({
url: "/pc-geetest/register?t=" + (new Date()).getTime(), // 加随机数防止缓存
type: "get",
dataType: "json",
async : false,
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>
二:Python 后端
- URL
urlpatterns = [
# 登陆
re_path('^login/$',views.login), # 滑块接口
re_path('^pc-geetest/register',views.get_geetest),
]
- Views
from geetest import GeetestLib # 滑块验证
pc_geetest_id = "b46d1900d0a894591916ea94ea91bd2c"
pc_geetest_key = "36fc3fe98530eea08dfc6ce76e3d24c4" 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)
python - 登陆验证的滑块接口的更多相关文章
- python学习 登陆验证
#!/usr/bin/env python #-*- coding=utf-8 -*- #----------------导入模块------------------------------ impo ...
- Python实现简单登陆验证(文件操作)
利用python编写一个简单的登陆验证 代码主要功能: 利用Python实现简单的登陆验证,代码主要有两个部分组成: 第一部分:登陆页面,作用是实现用户名和密码的输入 利用两个输入函数input()来 ...
- 【Java EE 学习 70 上】【数据采集系统第二天】【数据加密处理】【登陆验证】【登陆拦截器】【新建调查】【查询调查】
一.数据加密处理 这里使用MD5加密处理,使用java中自带加密工具类MessageDigest. 该类有一个方法digest,该方法输入参数是一个字符串返回值是一个长度为16的字节数组.最关键的是需 ...
- ASP.NET MVC 自己实现登陆验证过滤器
1.首先添加一个过滤器类,并实现接口中对应的方法 public class YLFAuthorizeAttribute : FilterAttribute, IAuthorizationFilter ...
- tornado web高级开发项目之抽屉官网的页面登陆验证、form验证、点赞、评论、文章分页处理、发送邮箱验证码、登陆验证码、注册、发布文章、上传图片
本博文将一步步带领你实现抽屉官网的各种功能:包括登陆.注册.发送邮箱验证码.登陆验证码.页面登陆验证.发布文章.上传图片.form验证.点赞.评论.文章分页处理以及基于tornado的后端和ajax的 ...
- 【Java EE 学习 20】【使用过滤器实现登陆验证、权限认证】【观察者模式和监听器(使用监听器实现统计在线IP、登录IP 、踢人功能)】
一.使用过滤器实现登录验证.权限认证 1.创建5张表 /*使用过滤器实现权限过滤功能*/ /**创建数据库*/ DROP DATABASE day20; CREATE DATABASE day20; ...
- 基于python+Testlink+Jenkins实现的接口自动化测试框架V3.0
基于python+Testlink+Jenkins实现的接口自动化测试框架V3.0 目录 1. 开发环境2. 主要功能逻辑介绍3. 框架功能简介 4. 数据库的创建 5. 框架模块详细介绍6. Tes ...
- Python——Requests库的开发者接口
本文介绍 Python Requests 库的开发者接口,主要内容包括: 目录 一.主要接口 1. requests.request() 2. requests.head().get().post() ...
- 1_python小程序之实现用户的注册登陆验证功能
python小程序之实现用户的注册登陆验证功能 程序扼要简述: 一.程序流程:1.程序开始2.判断本地文件/数据库是否已存在用户信息,存在则跳转到登陆,否则跳转到注册,注册成功后后跳转到登陆3.判断 ...
随机推荐
- 关于st表
#include<cstdio> #include<iostream> #include<cmath> #include<cctype> #includ ...
- JavaScript进行UTF-8编码与解码
JavaScript本身可通过charCodeAt方法得到一个字符的Unicode编码,并通过fromCharCode方法将Unicode编码转换成对应字符. 但charCodeAt方法得到的应该是一 ...
- Different Subsets For All Tuples CodeForces - 660E (组合计数)
大意: 定义$f(a)$表示序列$a$本质不同子序列个数. 给定$n,m$, 求所有长$n$元素范围$[1,m]$的序列的$f$值之和. 显然长度相同的子序列贡献是相同的. 不考虑空串, 假设长$x$ ...
- 记一次git merge 事故
最近发生在自己身上的一件矬事儿,一不小心把matser上别人的代码给冲掉了,事后追溯了下原因. 1.准备三个分支,分别从master拉取 realease/v1.0分支 和 realease/bugf ...
- WebApi接收接收日期格式参数时,日期类型(2019-10-08T16:00:00.000Z)后台接收时间少8小时问题
前端使用的是elementui的日期控件,将日期格式的数据提交到webapi后台时,接收到的日期格式少了8小时,这个原因是由于时区引起的,应该在WebApiConfig进行配置转成本地时间,解决少8小 ...
- Java知识回顾 (11) 异常处理
距离最近的 Java知识回顾系列(10),2019.4.24日,到现在,已经近半年过去了. 感觉,做一件事情,如果有头无尾,实在不好,心里会一直悬着.所以,现在继续上面的内容. 再次声明,正如(1)中 ...
- angular解决跨域问题
通过angular自身的代理转发功能 配置package.json 启动项目通过npm start启动,会自动启动代理服务npm start
- JAVA基础之Servlet
个人理解: servlet是用Java编写的服务器端程序,具有独立于平台和协议的特性,主要功能在于交互式地浏览和生成数据,生成动态Web内容.需要注意的在创建的服务器端的目录和实际上存在差别的,并且访 ...
- PHP写的简单数字验证码
用PHP写的随机生成的5位数字验证码 $yzm = ""; for($i=0;$i<5;$i++) { $a = rand(0,9); $yzm.= $a; } echo $ ...
- Qt 添加程序图标和系统托盘图标
添加程序图标 第一种方法: 1.创建程序的时候,选择添加默认图标 2.替换程序目录下的ico文件,编译生成即可. 第二种方法: 比较适合一开始没有添加程序图标的情况 1.项目右键-->添加--& ...