【vue】对接第三方行为验证极验,拿来即用的vue极验组件

  1. 云栖社区>
  2. 前端那些事儿>
  3. 博客>
  4. 正文

【vue】对接第三方行为验证极验,拿来即用的vue极验组件

景凌凯 2019-07-04 22:32:46 浏览913

第三方行为验证极验,在我们的日常开发中,很多时间都会用到。但是极验官网的demo是依赖jquery,如果我们的项目中不想引入jquery,那么接入会是一件令人头疼的事情,所以抽空将以前的接入经验总结了一下,希望对以后有用。底部有源码,拿来即用,启动命令 npm run serve

极验

极验的主要功能是进行行为验证,保证我们的接口被恶意刷。其中应用最多的场景是,短信验证码,邮箱验证码,注册,登录。等比较敏感的接口。

极验交互流程

image

官方网址

极验官网: 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

极验官网: https://www.geetest.com/

文档地址: https://docs.geetest.com/install/apirefer/api/web/

--END--