一、geetest滑动验证
geetest官方文档地址:https://docs.geetest.com/
产品——极速验证:基于深度学习的人机识别应用。极验「行为验证」是一项可以帮助你的网站与APP识别与拦截机器程序批量自动化操作的SaaS应用。它是由极验开发的新一代人机验证产品,它不基于传统“问题-答案”的检测模式,而是通过利用深度学习对验证过程中产生的行为数据进行高维分析,发现人机行为模式与行为特征的差异,更加精准地区分人机行为。
1、web部署介绍
客户端官方文档:https://docs.geetest.com/install/deploy/client/web/
(1)引入初始化函数
通过引入 gt.js 文件,引入 initGeetest 初始化函数。
<script src="gt.js">script>
注意:行为验证要求初始化在业务页面加载时同时初始化,否则验证无法读取用户在业务页面操作的行为数据,导致验证策略失效。
这里的 gt.js 文件,它用于加载对应的验证JS库。在每个后端语言的sdk中都存有一份,开发者部署到实际环境需要将该文件复制到相应的项目中使用。
之前该文件地址是 https://static.geetest.com/static/tools/gt.js ,改为存放在用户的项目中,防止静态服务器出问题无法加载该文件。
(2)调用初始化函数初始化
ajax({ url: "API1接口(详见服务端部署)", type: "get", dataType: "json", success: function (data) { //请检测data的数据结构, 保证data.gt, data.challenge, data.success有值 initGeetest({ // 以下配置参数来自服务端 SDK gt: data.gt, challenge: data.challenge, offline: !data.success, new_captcha: true }, function (captchaObj) { // 这里可以调用验证实例 captchaObj 的实例方法 }) } })
注: 对于同一个页面存在多个验证码场景的初始化,需要每个验证码场景调用 initGeetest 方法单独进行初始化;如果一个场景下有多个验证入口,需要进行多次初始化。
(3)product参数设置二级验证
在行为验证中,绝大多数真实用户仅需点击一下即可通过验证。但是考虑到实际风险情况,被行为验证判定为有风险的请求,会进入下个阶段的验证。此时,行为验证提供了弹出二级验证的交互样式,方便用户兼容自己本身的界面。这里以float浮动式验证为例:
initGeetest({ // 省略必须的配置参数 product: 'float' }, function (captchaObj) { captchaObj.appendTo("#captchaBox"); //将验证按钮插入到宿主页面中captchaBox元素内 captchaObj.onReady(function(){ //your code }).onSuccess(function(){ //your code }).onError(function(){ //your code }) });
2、vue项目Login页面geetest实现
观察各大网站使用了geetest的login页面接口信息,可以发现请求发回的数据中包含gt、challenge、success的值。在单页面应用Login.vue中实现geetest验证。
(1)在项目中全局引入geetest
在前端项目中创建/src/global/gt.js文件,写入文件地址 https://static.geetest.com/static/tools/gt.js 的内容。
在/src/main.js中全局引入gt.js文件:
import '../static/global/gt.js'
(2)添加geetest接口
在 /src/restful/api.js 中添加geetest接口如下所示:
// geetest接口 export const geetest = ()=>{ return Axios.get('captcha_check/').then(res=>res.data); }
(3)配置getGeetest方法
在getGeetest方法中调用geetest初始化函数初始化:
显示效果如下所示:
二、二次验证数据处理和登录实现