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