VUE中使用geetest滑动验证码

Posted 2021-02-15 zivli

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

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