VUE中使用geetest滑动验证码
一,准备工作:服务端部署
下载文件gt.gs: https://github.com/GeeTeam/gt3-python-sdk
需要说明的是这里的gt.js
文件,它用于加载对应的验证JS库。
1.引入初始化函数
main.js
import '../static/global/gt.js'
2.调用初始化函数进行初始化
api.js
// 滑动验证码api
export const getGeetest = ()=> {
return Axios.get('captcha_check/') // 后端相对应的API
.then(res=>res.data)
};
// 登陆api
export const userLogi = (params)=>{
// 这个参数至少包含用户名和密码,以及滑动验证的3个字段
return Axios.post("account/login/", params)
.then(res=>res.data)
};
初始化
getGeetest() {
this.$api.getGeetest()
.then(res => {
let data = res.data;
//请检测data的数据结构, 保证data.gt, data.challenge, data.success有值
initGeetest({
// 以下配置参数来自服务端 SDK
gt: data.gt,
challenge: data.challenge,
offline: !data.success,
new_captcha: true,
product: 'popup',
width: "100%"
},
(captchaObj) => {
// 这里可以调用验证实例 captchaObj 的实例方法 }).onSuccess(() => {
}).onError(() => {
})
})
})
.catch(error => {
console.log(
error
)
})
}
部署完成后可以看到
点击进行验证
二,发送登录用户名密码
getValidate()
获取用户进行成功验证(onSuccess)所得到的结果,该结果用于进行服务端 SDK 进行二次验证。getValidate 方法返回一个对象,该对象包含 geetest_challenge,geetest_validate,geetest_seccode 字段
geeGeetest
getGeetest() {
this.$api.getGeetest()
.then(res => {
let data = res.data;
//请检测data的数据结构, 保证data.gt, data.challenge, data.success有值
initGeetest({
// 以下配置参数来自服务端 SDK
gt: data.gt,
challenge: data.challenge,
offline: !data.success,
new_captcha: true,
product: 'popup',
width: "100%"
},
(captchaObj) => {
// 这里可以调用验证实例 captchaObj 的实例方法
captchaObj.appendTo("#geetest"); //将验证按钮插入到宿主页面中geetest元素内
captchaObj.onReady(() => {
//your code
}).onSuccess(() => {
//your code
this.validResult = captchaObj.getValidate();
// console.log(this)
}).onError(() => {
//your code
})
})
})
.catch(error => {
console.log(
error
)
})
}
,
loginHandler
loginHandler() {
let params = {
username: this.username,
password: this.password,
geetest_challenge: this.validResult.geetest_challenge,
geetest_validate: this.validResult.geetest_validate,
geetest_seccode: this.validResult.geetest_seccode
};
this.$api.userLogi(params)
.then(res => {
console.log(
res
)
}).catch(error => {
console.log(
error
)
}) }
参考官方文档:https://docs.geetest.com/install/deploy/client/web
VUE中使用geetest滑动验证码的更多相关文章
- vue中使用极验验证码(附demo)
前言: vue中使用极验验证码,最好是在页面渲染的时候(mounted)进行验证码的初始化,然后在初始化回调中绑定触发弹出验证码的事件.这样在点击按钮或者进行特定操作时能够快速的弹出验证码. 关键代码 ...
- day 86 Vue学习之八geetest滑动验证
Vue学习之八geetest滑动验证 本节目录 一 geetest前端web中使用 二 xxx 三 xxx 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 geetest前端web ...
- Django中使用极验Geetest滑动验证码
一,环境部署 1.创建一个django测试项目 此处省略... 二,文档部署 1.下载安装python对应的SDK 使用命令从Github导入完整项目:git clone https://github ...
- day 88 Vue学习之八geetest滑动验证
本节目录 一 geetest前端web中使用 二 xxx 三 xxx 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 geetest前端web中使用 下载gt文件,官网地址,下面我 ...
- vue中使用mui滑动条无法正常滑动
需要引入 `mui.min.js` 引入之后浏览器会报错,mui.min.js中的'caller', 'callee', and 'arguments'是不严格模式的js,而webpack中是严格模 ...
- 爬虫—GEETEST滑动验证码识别
一.准备工作 本次使用Selenium,浏览器为Chrome,并配置好ChromDriver 二.分析 1.模拟点击验证按钮:可以直接使用Selenium完成. 2.识别滑块的缺口位置:先观察图 ...
- vue 中判断页面滑动方向
- Vue中swiper手动滑动后不能自动播放的解决方法
用户操作swiper之后,是否禁止autoplay.默认为true:停止.如果设置为false,用户操作swiper之后自动切换不会停止,每次都会重新启动autoplay.操作包括触碰,拖动,点击pa ...
- 对极验geetest滑块验证码图片还原算法的研究
免责声明 本文章所提到的技术仅用于学习用途,禁止使用本文章的任何技术进行发起网络攻击.非法利用等网络犯罪行为,一切信息禁止用于任何非法用途.若读者利用文章所提到的技术实施违法犯罪行为,其责任一概由读者 ...
随机推荐
- vue.js window.removeEventListener 移除
vue项目中的小坑记录下,想要移除window的addEventListener,需要把后面的function挂在到this上,removeEventListener 和 addEventListen ...
- Redis常用数据类型和事物以及并发
Redis数据类型 基本类型(String int): 如 set key value .get key 等 所有命令都是按照 key value keys * 可以将全部数据列出,其中后面的 &qu ...
- java安装和配置(3.18)
大家好,我是一名笨笨的程序小白,刚刚学习完C#的基本开发,现在要开始学习java了!我希望在博客园里记录下我的学习日记,我也不敢保证自己会讲的东西多么全面,但是都是比较基础的东西,如果对你也有点点的小 ...
- Notepad++ 安装连接服务器的NppFTP插件
用Notepad++连接服务器,可以随时编辑一些文件不用特意下载.有时重做系统经常忘记一些插件备份到了哪.再此做个记录,方便重新安装. 下载完NppFTP插件,解压后将bin文件夹下的NppFTP.d ...
- 虎牙直播张波:掘金Nginx日志
大家好!我是来自虎牙直播技术保障部的张波.今天主要会从数据挖掘层面跟大家探讨一下 Nginx 的价值.OpenResty 在虎牙的应用场景主要 WAF 和流控等方面,我今天主要分享的是“ Nginx ...
- 死磕 java集合之TreeSet源码分析
问题 (1)TreeSet真的是使用TreeMap来存储元素的吗? (2)TreeSet是有序的吗? (3)TreeSet和LinkedHashSet有何不同? 简介 TreeSet底层是采用Tree ...
- 如何利用HTTP缓存来加快你的网站应用
缓存在web环境各个环节都有实现,有CPU缓存.文件缓存.程序的Opcode缓存(APC,eAccelerator).内存缓存(Memcached,Redis).代理服务器(Nginx,Squid). ...
- 基于vue-cli快速构建
基于vue-cli快速构建 https://www.jianshu.com/p/2769efeaa10a Vue是近两年来比较火的一个前端框架(渐进式框架吧),与reactjs和angularjs ...
- 【转】使用MySQL处理百万级以上数据时,不得不知道的几个常识
---------------------------------------------------------------------------------------------------- ...
- 2016年第七届蓝桥杯javaB组 试题 答案 解析
1.煤球数目 有一堆煤球,堆成三角棱锥形.具体: 第一层放1个, 第二层3个(排列成三角形), 第三层6个(排列成三角形), 第四层10个(排列成三角形), .... 如果一共有100层,共有多少个煤 ...