人机交互验证——极验的介绍和使用

极验

1. 人机交互验证介绍

什么是人机交互验证：

极验是一款人机交互页面效果系统，用户的行为没有满足要求，不给与下一步执行的机会，大致效果如下，用户如果没有把目标滑到指定区域就禁止下一步操作。

之前的传统网站，用户输入 用户名、密码、验证码 就可以登录系统了，这样的网站不安全，有网络爬虫技术，可以通过“后端程序代码” 模拟账号登录，进而获得网站的信息。

现在比较先进的网站，都使用“人机交互验证”功能，对登录者提出高要求，不让模拟登录得逞，只允许“实在的人”来登录系统并应用。

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

• 好处：防止账号暴力破解，不给模拟登录机会，增强系统的安全性。

2. 极验的使用

2.1. 获取并导入gt.js脚本

步骤：

1. 获取好的gt.js文件放到 views/login/ 目录下

2. 对不遵守eslint规范的代码稍加改动

说明：

eslint标准规范中有如下要求：

1. 函数传递参数，不能直接传递boolean值，相反可以声明变量传递(gt.js文件中一共有4处，注意调整)

2. 要通过 “===”恒等于 方式 判断两个字是否相等(上例为了使得数据类型是严格的字符串，额外调用了toString()方法，请注意)

3. 不要设置空的回调函数实参，没有意义

2.2. 流程分析

人机交互验证执行流程:

人机交互验证步骤：

1. 前端通过axios向后端服务器发起请求，后端服务器会返回极验请求的秘钥信息。
2. 前端将极验秘钥信息 + 用户行为 一并提交给极验服务器做判断，查验行为是否正确。

2.3. 获取极验秘钥信息

步骤：

1. 把账号真实校验 和 登录系统 逻辑代码封装为独立的loginAct方法，方便开发。
2. axios根据接口发送请求，获得极验请求的秘钥信息 (4样)

login/index.vue相关代码结构：

// 登录系统
login () {
    // 表单要做校验
    this.$refs.loginFormRef.validate(valid => {
        if (!valid) { return false }
        // 1. 人机交互验证
        // axios获得极验的秘钥信息
        let pro = this.$http({
            url: '/mp/v1_0/captchas/' + this.loginForm.mobile,
            method: 'get'
        })
        pro
            .then(result => {
            console.log(result) // 极验的秘钥信息
        })
            .catch(err => {
            return this.$message.error('获取极验秘钥失败：' + err)
        })
        // 2. 验证账号，登录系统
        this.loginAct()
    })
}

// 账号真实性校验，并登录系统
loginAct () {
    // 服务器端账号真实校验
    let pro = this.$http({
        url: '/mp/v1_0/authorizations',
        method: 'POST',
        data: this.loginForm
    })
    pro
        .then(result => {
        // 客户端浏览器把服务器端返回的秘钥等相关信息通过 sessionStorage 做记录，表明是登录状态
        window.sessionStorage.setItem('userinfo', JSON.stringify(result.data.data))
        // 进入后台系统
        this.$router.push({ name: 'home' })
    })
        .catch(err => {
        this.$message.error('手机号码或验证码错误:' + err)
    })
}

2.4. 创建校验窗口并应用

绘制极验人机交互窗口，用户输入完毕账号等信息，单击登录按钮后要显示极验窗口并完成验证和登录系统。

步骤：

1. 在login/index.vue中向引入gt.js文件
2. 对返回的极验请求秘钥信息做接收处理(对象解构赋值)
3. 调用initGeetest() 函数，生成极验窗口
   1. 添加product:‘bind’ // 设置窗口样式
   2. verify()等方法调用 // 生成校验窗口

具体代码(login/index.vue)：

// 对gt.js文件进行导入
// gt.js文件本身没有做导出动作，所以就直接导入即可，此时系统增加一个全局变量，名称为 initGeeTest
import './gt.js'
……
login () {
  // 表单要做校验
  this.$refs.loginFormRef.validate(valid => {
    if (!valid) { return false }
    // 1. 人机交互验证
    // axios获得极验的秘钥信息
    let pro = this.$http({
      url: '/mp/v1_0/captchas/' + this.loginForm.mobile,
      method: 'get'
    })
    pro
      .then(result => {
      // console.log(result) // 极验的秘钥信息
      // 从result里边解构下述的data对象出来(对象结构赋值)
      let { data } = result.data
      // 请检测data的数据结构， 保证data.gt, data.challenge, data.success有值
      window.initGeetest({
        // 以下配置参数来自服务端 SDK
        gt: data.gt,
        challenge: data.challenge,
        offline: !data.success,
        new_captcha: true,
        product: 'bind' // 设置验证窗口样式
      }, captchaObj => {
        // 这里可以调用验证实例 captchaObj 的实例方法
        captchaObj.onReady(() => {
          // 验证码ready之后才能调用verify方法显示验证码(可以显示窗口了)
          captchaObj.verify() // 显示验证码窗口
        }).onSuccess(() => {
          // 行为校验正确的处理
          // B. 验证账号，登录系统
          this.loginAct()
        }).onError(() => {
          // 行为校验错误的处理
        })
      })
    })
      .catch(err => {
      return this.$message.error('获取极验秘钥失败：' + err)
    })
  })
},

效果：

注意：

​ 在login方法内部为了使得this仍然指引VueComponent组件实例对象，要把相关的function都变为箭头函数。