第三方行为验证极验，在我们的日常开发中，很多时间都会用到。但是极验官网的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
极验官网： https://www.geetest.com/
文档地址： https://docs.geetest.com/install/apirefer/api/web/
--END--
