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) };
// 登陆apiexport 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
转载于:https://www.cnblogs.com/zivli/p/10656329.html
VUE中使用geetest滑动验证码相关推荐
- Python爬虫解决极验(geetest)滑动验证码
csdn_okcheng 滑动验证码的识别介绍 实现步骤: ① 初始化 ② 模拟登录填写,点开滑块验证 ③ 获取并储存有无缺口的两张图片 ④ 获取缺口位置 ⑤ 获取移动轨迹 ⑥ 按照轨迹拖动,完全验证 ...
- Django中使用极验Geetest滑动验证码
一,环境部署 1.创建一个django测试项目 此处省略... 二,文档部署 1.下载安装python对应的SDK 使用命令从Github导入完整项目:git clone https://github ...
- Django中使用极验Geetest滑动验证码过程解析
**一,环境部署 ** 1.创建一个django测试项目 二,文档部署 1.下载安装python对应的SDK 使用命令从Github导入完整项目:git clone https://github.co ...
- 给html5添加极验,Django中使用极验Geetest滑动验证码过程解析
一,环境部署 1.创建一个django测试项目 二,文档部署 1.下载安装python对应的SDK 使用命令从Github导入完整项目:git clone https://github.com/Gee ...
- vue中获取短信验证码IOS手机问题
vue使用中发现了一个问题,由于ios手机获取短信验证码后,验证码会直接显示在键盘上,点击键盘上的验证码即可给对应的input赋值,但是在项目开发中发现输入框的取值为空 经过排查是因为通过v-mode ...
- vue中获取短信验证码功能IOS手机问题
vue使用中发现了一个问题,由于ios手机获取短信验证码后,验证码会直接显示在键盘上,点击键盘上的验证码即可给对应的input赋值,但是在项目开发中发现输入框的取值为空 经过排查是因为通过v-mode ...
- 【日常】Geetest滑动验证码(三代canvas版)处理小结(以B站登录验证为例)
问题描述 这个问题确实让我困扰了太长时间,今天花了半天时间,并没有找到非常完满的解决方案,只是在解决问题的过程中学会了一些其他知识,我最后还是要通过人工来判断大致的移动距离,然后根据误差做微调.大致做 ...
- 爬虫—GEETEST滑动验证码识别
一.准备工作 本次使用Selenium,浏览器为Chrome,并配置好ChromDriver 二.分析 1.模拟点击验证按钮:可以直接使用Selenium完成. 2.识别滑块的缺口位置:先观察图 ...
- 对极验geetest滑块验证码图片还原算法的研究
免责声明 本文章所提到的技术仅用于学习用途,禁止使用本文章的任何技术进行发起网络攻击.非法利用等网络犯罪行为,一切信息禁止用于任何非法用途.若读者利用文章所提到的技术实施违法犯罪行为,其责任一概由读者 ...
最新文章
- 车牌识别算法_PC端车牌识别SDK融入好算法
- “cvSnakeImage”: 找不到标识符
- winRAR 没有右键选项
- 网上整理的jQuery插件开发教程
- 2009计算机网络考研大题,2009年计算机考研统考真题网络部分分析
- java防止undo空间撑爆_秒杀系统设计补坑篇(seata回顾)
- php中常用的全局变量有,在PHP中如何使用全局变量的方法详解
- 疫情攻坚战“分秒必争” 宜搭免费开放疫情相关应用
- SEAndroid语法介绍
- 阶段1 语言基础+高级_1-3-Java语言高级_05-异常与多线程_第3节 线程同步机制_4_解决线程安全问题_同步代码块...
- everything用于移动硬盘资料管理(一):离线搜索
- 笔记本重装win7旗舰版原版操作系统
- Android招聘心得分享
- 埃拉托色尼筛选法巧解质数问题(埃氏筛法求解素数问题)
- python安装失败了_python安装库安装失败怎么解决
- .browser的解释
- 函数节流(Throttle)和防抖(Debounce)解析及其OC实现
- 中南民族大学 计算机组成原理实验报告,计算机系统结构实验报告(中南民族大学)...
- yuan sir generator desk appliacation
- html 里面的 role 属性是什么意思