【vue】對接第三方行為驗證極驗，拿來即用的vue極驗元件

第三方行為驗證極驗，在我們的日常開發中，很多時間都會用到。但是極驗官網的demo是依賴jquery，如果我們的項目中不想引入jquery，那麼接入會是一件令人頭疼的事情，是以抽空将以前的接入經驗總結了一下，希望對以後有用。底部有源碼，拿來即用，啟動指令 npm run serve

極驗

極驗的主要功能是進行行為驗證，保證我們的接口被惡意刷。其中應用最多的場景是，短信驗證碼，郵箱驗證碼，注冊，登入。等比較敏感的接口。

極驗互動流程

官方網址

極驗官網：

https://www.geetest.com/

文檔位址：

https://docs.geetest.com/install/apirefer/api/web/

極驗demo

極驗的demo都是jquery實作的，依賴jquery檔案，我們在vue項目如果不希望引入jquery的話，接入會不太友善。

公司項目需要用到極驗，是以對極驗進行了元件封裝，在頁面中所有需要用到的地方都可以直接引用。

依賴

1，極驗js，gt.js,可在官網下載下傳，或者在我的demo中擷取。

2，axios，發起請求。

"dependencies": {
    "axios": "^0.19.0",
    "vue": "^2.5.17",
    "vue-router": "^3.0.1"
  },           

1，引入極驗js檔案

我的js是在src檔案下的assets檔案中存放的gt.js

assets檔案與main.js是并列的。

在main.js中引入，并在vue原型中挂載極驗初始化函數。

// 導入極驗
require('@/assets/gt.js');
// 綁定到原型
Vue.prototype.$initGeet=initGeetest;
           

全部main.js内容

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from "axios";
Vue.prototype.axios = axios;
// 導入極驗
require('@/assets/gt.js');
// 綁定到原型
Vue.prototype.$initGeet=initGeetest;

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')           

2,極驗元件Geet.vue

<template>
  <div>
    <i ref="btn"></i>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  //   接受父元件傳遞的值，用來控制圖形驗證的加載
  props: ["isGeet"],
  methods: {
    GtCaptcha() {
      let _this = this;
      //   此url是極驗官網的測試請求位址，加随機數防止緩存
      _this.axios
        .get(
          "http://www.geetest.com/demo/gt/register-slide?t=" +
            new Date().getTime()
        )
        .then(res => {
          console.log("1,頁面初始化，調用極驗接口1，進行圖形驗證碼的加載");
          // 極驗第一次，請求回來的參數
          console.log(res);
          let data = res.data;
          var handlerEmbed = function(captchaObj) {
            //   圖形驗證成功
            captchaObj
              .onSuccess(function() {
                var result = captchaObj.getValidate();
                let param = {
                  geetest_challenge: result.geetest_challenge,
                  geetest_validate: result.geetest_validate,
                  geetest_seccode: result.geetest_seccode,
                  status: data.success
                };
                // 極驗校驗的參數，将其傳給服務端，進行校驗。
                console.log(
                  "3，圖形驗證通過，将資料傳遞給父元件，進行服務端驗證"
                );
                _this.$emit("geetPath", param);
              })
              .onError(function() {
                //   圖形驗證失敗
              });
            //   為此頁面的虛拟按鈕添加點選事件
            _this.$refs.btn.addEventListener("click", function demo() {
              // 極驗圖檔觸發之後，修改控制變量額布爾值，實作再次觸發
              _this.$emit("clickChange", false);
              if (_this.isGeet) {
                captchaObj.verify();
              }
            });
          };
          //   初始化極驗
          _this.$initGeet(
            {
              gt: data.gt,
              challenge: data.challenge,
              product: "bind",
              offline: !data.success,
              https: true
            },
            handlerEmbed
          );
        });
    }
  },

  computed: {},

  created() {
    // 頁面建立，調用函數
    this.GtCaptcha();
  },

  mounted() {},
  watch: {
    // 監聽參數的變化，調用極驗
    isGeet: function() {
      //   這裡通過按鈕事件調用極驗
      this.$refs.btn.click();
    }
  }
};
</script>
<style scoped></style>

           

3,極驗頁面GtPage.vue

<template>
  <div>
    <button @click="btnClick()">極驗</button>
    <!-- isgt是一個布爾值，目前頁面點選按鈕，修改它，子元件監聽資料變化，加載滑動子產品 -->
    <Geet :isGeet="isgt" @geetPath="GeetPath" @clickChange="GeetChange"></Geet>
  </div>
</template>
<script>
import Geet from "./Geet.vue";
export default {
  data() {
    return {
      isgt: false
    };
  },
  components: {
    Geet
  },

  methods: {
    btnClick() {
      console.log("2,按鈕被點選，進行圖形驗證");
      this.isgt = !this.isgt;
    },
    // 極驗圖檔加載之後，通過更改控制變量實作可以再次加載
    GeetChange(val) {
      this.isgt = val;
    },
    GeetPath(val) {
      console.log("4,接受到圖形驗證參數，将參數發往服務端進行驗證");
      console.log(val);
      this.isgt = false;
    }
  },

  computed: {},

  created() {},

  mounted() {}
};
</script>
<style scoped>
</style>

           

4,說明

頁面代碼中都添加了備注，隻要引入axios子產品（npm install --save axios），并在main.js中挂載（

import axios from "axios";
Vue.prototype.axios = axios;           

）。将上邊兩個檔案copy就可以正常看到運作效果

位址

demo連結：

https://pan.baidu.com/s/1WC1ROdIh9YJdgwtITl0xPg

提取碼：l7le

--END--