VUE中使用geetest滑动验证码

一，准备工作：服务端部署

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

 

来源：oschina

链接：https://my.oschina.net/u/4341235/blog/3585723