极验验证

发送验证码

1. 点击获取验证码，发送请求 获取人机验证码（极验 API1），获取用来初始化验证码的参数
2. 调用极验的 JavaScript SDK 提供的 API，通过上一步得到的数据初始化验证码
3. 用户通过人机交互验证之后，极验会给你返回一些验证的结果数据，然后调用你的 获取短信验证码 (极验 API2） 接口，如果正确，短信就可以发出去了
4. 按钮倒计时效果

下面是具体实现步骤：

1. 点击获取验证码按钮，发送请求，获取用来初始化验证码的参数

handleSendCode () {
  const { mobile } = this.form
  axios({
    method: 'GET',
    url: `http://ttapi.research.itcast.cn/mp/v1_0/captchas/${mobile}`
  }).then(res => {
    const { data } = res.data
  })
}

请求结果数据如下：

{
  "message": "xxx",
  "data": {
    "success": "xxx",
    "gt": "xxx",
    "challenge": "xxx",
    new_captcha: "xxx"
  }
}

 

2. 加载极验提供的 JavaScript SDK 到项目中

• 极验 JavaScript SDK 文件地址

将 gt.js 文件下载到项目的 src/vendor 目录中，然后在 src/views/login/index.vue 中加载该文件。

小提示：我们建议把没有提供 npm 包的第三方内容都放到项目的 src/vendor 目录中

...
# gt.js 会提供一个全局函数 initGeetest
import '@/vendor/gt.js'
...

 

一个小插曲：当你在项目中引入 gt.js 模块之后你会发现在终端中输出很多（400+）语法格式错误，这是因为 ESLint 也把 gt.js 当作我们自己写的 JavaScript 文件去进行代码格式检查了。

极验虽然是一个第三方文件，但是该文件是我们手动下载到项目中（非npm模块）去加载使用的，所以 ESLint 也会检查该文件的代码规则，在这里是没有必要的，代码格式检查应该主要针对我们的代码文件，解决方法就是在项目的根目录创建一个文件 .eslintignore并写入以下内容：

src/vendor/gt.js

 

.eslintignore 文件类似于 .gitignore，它的作用是手动配置 ESLint 不需要校验的代码文件。

配置好以后，重启服务就好了。

3. 查看极验文档，体验官方demo
4. 根据文档中的说明，调用 initGeetest 函数初始化极验验证码

handleSendCode () {
  const { mobile } = this.form
  axios({
    method: 'GET',
    url: `http://ttapi.research.itcast.cn/mp/v1_0/captchas/${mobile}`
  }).then(res => {
    const { data } = res.data
    window.initGeetest({
      // 以下配置参数来自服务端 SDK
      gt: data.gt,
      challenge: data.challenge,
      offline: !data.success,
      new_captcha: data.new_captcha,
      product: 'bind' // 隐藏，直接弹出式
    }, (captchaObj) => {
      this.captchaObj = captchaObj
      captchaObj.onReady(function () {
        // 验证码ready之后才能调用verify方法显示验证码
        captchaObj.verify()
      }).onSuccess(function () {
        // 人机交互验证通过
				console.log(captchaObj.getValidate())
      }).onError(function () {
        // your code
      })
    })
  })
}

 

5. 在极验的 onSuccess 回调函数中，将调用 captchaObj.getValidate() 获取到的结果参数作为发送短信验证码接口的请求参数发出获取短信验证码请求

handleSendCode () {
  const { mobile } = this.form
  axios({
    method: 'GET',
    url: `http://ttapi.research.itcast.cn/mp/v1_0/captchas/${mobile}`
  }).then(res => {
    const { data } = res.data
    window.initGeetest({
      // 以下配置参数来自服务端 SDK
      gt: data.gt,
      challenge: data.challenge,
      offline: !data.success,
      new_captcha: data.new_captcha,
      product: 'bind' // 隐藏，直接弹出式
    }, (captchaObj) => {
      captchaObj.onReady(function () {
        // 验证码ready之后才能调用verify方法显示验证码
        captchaObj.verify()
      }).onSuccess(function () {
        // 人机交互验证通过
        const {
          geetest_challenge: challenge,
          geetest_seccode: seccode,
          geetest_validate: validate } =
              captchaObj.getValidate()

        axios({
          method: 'GET',
          url: `http://ttapi.research.itcast.cn/mp/v1_0/sms/codes/${mobile}`,
          params: {
            challenge,
            validate,
            seccode
          }
        }).then(res => {
          console.log(res.data)
          // 开启倒计时效果
        })
      }).onError(function () {
        // your code
      })
    })
  })
}

6. 不出意外的话，你应该可以收到短信验证码了。