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