VUE中使用geetest滑动验证码

柔情痞子 提交于 2020-11-22 01:18:15

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

  下载文件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

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!