标签：点击 account 官方 初始化 div check 说明 登陆 params
下载文件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%"
}, function (captchaObj) {
// 这里可以调用验证实例 captchaObj 的实例方法
captchaObj.appendTo("#geetest"); //将验证按钮插入到宿主页面中geetest元素内
captchaObj.onReady(function () {
//your code
}).onSuccess(function () {
//your code
}).onError(function () {
//your code
})
})
})
.catch(error=>{
console.log(
error
)
})
},
},
created(){
this.getGeetest()
},
部署完成后可以看到
点击进行验证
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%"
}, function (captchaObj) {
// 这里可以调用验证实例 captchaObj 的实例方法
captchaObj.appendTo("#geetest"); //将验证按钮插入到宿主页面中geetest元素内
captchaObj.onReady(function () {
//your code
}).onSuccess(function () {
//your code
this.validResult = captchaObj.getValidate();
}).onError(function () {
//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
标签：点击 account 官方 初始化 div check 说明 登陆 params
原文地址：https://www.cnblogs.com/zivli/p/10656329.html
