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

极验

1. 人机交互验证介绍

什么是人机交互验证

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

人机交互验证——极验的介绍和使用_第1张图片

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

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

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

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

2. 极验的使用

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

步骤

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

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

人机交互验证——极验的介绍和使用_第2张图片

说明

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

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

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

在这里插入图片描述

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

人机交互验证——极验的介绍和使用_第3张图片

2.2. 流程分析

人机交互验证执行流程:

人机交互验证——极验的介绍和使用_第4张图片

人机交互验证步骤

  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)
    })
}

人机交互验证——极验的介绍和使用_第5张图片

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)
    })
  })
},

效果

人机交互验证——极验的介绍和使用_第6张图片

注意

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

你可能感兴趣的:(前端,html,JS,前端,html,javascript)