欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-04 21:07:52
...

极验

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()方法,请注意)

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

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

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

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都变为箭头函数