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

  下载文件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滑动验证码的更多相关文章

  1. vue中使用极验验证码(附demo)

    前言: vue中使用极验验证码,最好是在页面渲染的时候(mounted)进行验证码的初始化,然后在初始化回调中绑定触发弹出验证码的事件.这样在点击按钮或者进行特定操作时能够快速的弹出验证码. 关键代码 ...

  2. day 86 Vue学习之八geetest滑动验证

    Vue学习之八geetest滑动验证   本节目录 一 geetest前端web中使用 二 xxx 三 xxx 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 geetest前端web ...

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

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

  4. day 88 Vue学习之八geetest滑动验证

      本节目录 一 geetest前端web中使用 二 xxx 三 xxx 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 geetest前端web中使用 下载gt文件,官网地址,下面我 ...

  5. vue中使用mui滑动条无法正常滑动

    需要引入 `mui.min.js`  引入之后浏览器会报错,mui.min.js中的'caller', 'callee', and 'arguments'是不严格模式的js,而webpack中是严格模 ...

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

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

  7. vue 中判断页面滑动方向

  8. Vue中swiper手动滑动后不能自动播放的解决方法

    用户操作swiper之后,是否禁止autoplay.默认为true:停止.如果设置为false,用户操作swiper之后自动切换不会停止,每次都会重新启动autoplay.操作包括触碰,拖动,点击pa ...

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

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

随机推荐

  1. vue.js window.removeEventListener 移除

    vue项目中的小坑记录下,想要移除window的addEventListener,需要把后面的function挂在到this上,removeEventListener 和 addEventListen ...

  2. Redis常用数据类型和事物以及并发

    Redis数据类型 基本类型(String int): 如 set key value .get key 等 所有命令都是按照 key value keys * 可以将全部数据列出,其中后面的 &qu ...

  3. java安装和配置(3.18)

    大家好,我是一名笨笨的程序小白,刚刚学习完C#的基本开发,现在要开始学习java了!我希望在博客园里记录下我的学习日记,我也不敢保证自己会讲的东西多么全面,但是都是比较基础的东西,如果对你也有点点的小 ...

  4. Notepad++ 安装连接服务器的NppFTP插件

    用Notepad++连接服务器,可以随时编辑一些文件不用特意下载.有时重做系统经常忘记一些插件备份到了哪.再此做个记录,方便重新安装. 下载完NppFTP插件,解压后将bin文件夹下的NppFTP.d ...

  5. 虎牙直播张波:掘金Nginx日志

    大家好!我是来自虎牙直播技术保障部的张波.今天主要会从数据挖掘层面跟大家探讨一下 Nginx 的价值.OpenResty 在虎牙的应用场景主要 WAF 和流控等方面,我今天主要分享的是“ Nginx ...

  6. 死磕 java集合之TreeSet源码分析

    问题 (1)TreeSet真的是使用TreeMap来存储元素的吗? (2)TreeSet是有序的吗? (3)TreeSet和LinkedHashSet有何不同? 简介 TreeSet底层是采用Tree ...

  7. 如何利用HTTP缓存来加快你的网站应用

    缓存在web环境各个环节都有实现,有CPU缓存.文件缓存.程序的Opcode缓存(APC,eAccelerator).内存缓存(Memcached,Redis).代理服务器(Nginx,Squid). ...

  8. 基于vue-cli快速构建

    基于vue-cli快速构建 https://www.jianshu.com/p/2769efeaa10a   Vue是近两年来比较火的一个前端框架(渐进式框架吧),与reactjs和angularjs ...

  9. 【转】使用MySQL处理百万级以上数据时,不得不知道的几个常识

    ---------------------------------------------------------------------------------------------------- ...

  10. 2016年第七届蓝桥杯javaB组 试题 答案 解析

    1.煤球数目 有一堆煤球,堆成三角棱锥形.具体: 第一层放1个, 第二层3个(排列成三角形), 第三层6个(排列成三角形), 第四层10个(排列成三角形), .... 如果一共有100层,共有多少个煤 ...