一,准备工作:服务端部署

  下载文件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滑动验证码相关推荐

  1. Python爬虫解决极验(geetest)滑动验证码

    csdn_okcheng 滑动验证码的识别介绍 实现步骤: ① 初始化 ② 模拟登录填写,点开滑块验证 ③ 获取并储存有无缺口的两张图片 ④ 获取缺口位置 ⑤ 获取移动轨迹 ⑥ 按照轨迹拖动,完全验证 ...

  2. Django中使用极验Geetest滑动验证码

    一,环境部署 1.创建一个django测试项目 此处省略... 二,文档部署 1.下载安装python对应的SDK 使用命令从Github导入完整项目:git clone https://github ...

  3. Django中使用极验Geetest滑动验证码过程解析

    **一,环境部署 ** 1.创建一个django测试项目 二,文档部署 1.下载安装python对应的SDK 使用命令从Github导入完整项目:git clone https://github.co ...

  4. 给html5添加极验,Django中使用极验Geetest滑动验证码过程解析

    一,环境部署 1.创建一个django测试项目 二,文档部署 1.下载安装python对应的SDK 使用命令从Github导入完整项目:git clone https://github.com/Gee ...

  5. vue中获取短信验证码IOS手机问题

    vue使用中发现了一个问题,由于ios手机获取短信验证码后,验证码会直接显示在键盘上,点击键盘上的验证码即可给对应的input赋值,但是在项目开发中发现输入框的取值为空 经过排查是因为通过v-mode ...

  6. vue中获取短信验证码功能IOS手机问题

    vue使用中发现了一个问题,由于ios手机获取短信验证码后,验证码会直接显示在键盘上,点击键盘上的验证码即可给对应的input赋值,但是在项目开发中发现输入框的取值为空 经过排查是因为通过v-mode ...

  7. 【日常】Geetest滑动验证码(三代canvas版)处理小结(以B站登录验证为例)

    问题描述 这个问题确实让我困扰了太长时间,今天花了半天时间,并没有找到非常完满的解决方案,只是在解决问题的过程中学会了一些其他知识,我最后还是要通过人工来判断大致的移动距离,然后根据误差做微调.大致做 ...

  8. 爬虫—GEETEST滑动验证码识别

    一.准备工作 本次使用Selenium,浏览器为Chrome,并配置好ChromDriver 二.分析 1.模拟点击验证按钮:可以直接使用Selenium完成.    2.识别滑块的缺口位置:先观察图 ...

  9. 对极验geetest滑块验证码图片还原算法的研究

    免责声明 本文章所提到的技术仅用于学习用途,禁止使用本文章的任何技术进行发起网络攻击.非法利用等网络犯罪行为,一切信息禁止用于任何非法用途.若读者利用文章所提到的技术实施违法犯罪行为,其责任一概由读者 ...

最新文章

  1. 车牌识别算法_PC端车牌识别SDK融入好算法
  2. “cvSnakeImage”: 找不到标识符
  3. winRAR 没有右键选项
  4. 网上整理的jQuery插件开发教程
  5. 2009计算机网络考研大题,2009年计算机考研统考真题网络部分分析
  6. java防止undo空间撑爆_秒杀系统设计补坑篇(seata回顾)
  7. php中常用的全局变量有,在PHP中如何使用全局变量的方法详解
  8. 疫情攻坚战“分秒必争” 宜搭免费开放疫情相关应用
  9. SEAndroid语法介绍
  10. 阶段1 语言基础+高级_1-3-Java语言高级_05-异常与多线程_第3节 线程同步机制_4_解决线程安全问题_同步代码块...
  11. everything用于移动硬盘资料管理(一):离线搜索
  12. 笔记本重装win7旗舰版原版操作系统
  13. Android招聘心得分享
  14. 埃拉托色尼筛选法巧解质数问题(埃氏筛法求解素数问题)
  15. python安装失败了_python安装库安装失败怎么解决
  16. .browser的解释
  17. 函数节流(Throttle)和防抖(Debounce)解析及其OC实现
  18. 中南民族大学 计算机组成原理实验报告,计算机系统结构实验报告(中南民族大学)...
  19. yuan sir generator desk appliacation
  20. html 里面的 role 属性是什么意思

热门文章

  1. Android 手机各大厂商的指纹设置界面
  2. Linux知识点回顾之shell编程
  3. 一键添加和去除图片/视频水印
  4. 磁盘爆盘问题-常见处理方法
  5. 【Wordle】Day5:换个开始单词全灰可还行,四次成功
  6. 新手菜鸟招聘网站数据爬取
  7. 软件测试技术之全链路压测经验(上)
  8. iPhone开发——加入程序图标
  9. java中super的用途
  10. Java中super关键字调用构造方法小结