一,准备工作:服务端部署
下载文件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