前端Vue项目——登录页面实现

一、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初始化函数初始化：

<script>
  export default {
    name: 'Login',
    data(){
      return {
        username: "",
        password: ""
      }
    },
    methods:{
      getGeetest(){
        this.$http.geetest()
          .then(res=>{
            console.log(res);
            let data = res.data;
            //请检测data的数据结构， 保证data.gt, data.challenge, data.success有值
            initGeetest({
              // 以下配置参数来自服务端 SDK
              gt: data.gt,                 // 验证id,极验后台申请得到
              challenge: data.challenge,   // 验证流水号，后服务端SDK向极验服务器申请得到
              offline: !data.success,      // 极验API服务器是否宕机（即处于fallback状态）
              new_captcha: true,           // 宕机情况下使用，表示验证是3.0还是2.0,3.0的sdk该字段为true
              product: popup,              // 弹出式展现
              with: '100%'                 // 默认宽度300px
            }, function (captchaObj) {
              // 这里可以调用验证实例 captchaObj 的实例方法
              captchaObj.appendTo("#geetest"); //将验证按钮插入到宿主页面中captchaObj元素内
              captchaObj.onReady(function(){
                //your code
              }).onSuccess(function(){
                //your code
              }).onError(function(){
                //your code
              })
            })
          })
          .catch(err=>{
            console.log(err);
          })
      }
    },
    created() {
      this.getGeetest();
    }
  };
</script>

　　显示效果如下所示：