小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前言

前段时间一直忙于新项目的开发，近乎996的模式，完全没有时间摸鱼。 在短信发送接触到了智能验证这一块，防止恶刷，经过调研后在极验和阿里云的智能验证中选择，然后选择了极验，后续又换成了阿里云的智能验证，下篇文章也会记录在使用阿里云智能验证的心得。

准备工作

1.下载gt.js到本地项目

<script src="gt.js"></script>

2.在入口页面index.html中进行引入，在gt.js文件283行和315行增加vm对象，便于后面组件中使用;

window.initGeetest = function (userConfig, callback, vm)`
callback(new window.Geetest(config), vm)

组件封装

<template>
  <div id="Geetest">
    <div id="geetest"></div>
  </div>
</template>

<script>
import api from '@api/index'
export default {
  name: 'Geetest',
  created () {
    this.innitGT()
  },
  methods: {
    innitGT () {
      const handler = function (captchaObj, vm) {
        captchaObj.appendTo('#geetest')
        captchaObj
          .onSuccess(() => {
            // 通过captcha_obj.getValidate()获取验证参数
            vm.captcha_obj = captchaObj
            vm.validityState()
          })
          .onError(() => {
            captchaObj.reset()
          })
      }
      api.registerGeetes().then(data => {
        window.initGeetest(
          {
            // 以下配置参数来自服务端 SDK，这是第一次验证，也就是获取到了后端的这个三个数据
            gt: data.gt,
            challenge: data.challenge,
            offline: !data.success, // 表示用户后台检测极验服务器是否宕机
            width: '100%',
            new_captcha: data.new_captcha, // 用于宕机时表示是新验证码的宕机
            product: 'float'
          },
          handler,
          this
        )
      })
    },
    validityState () {
      const data = this.captcha_obj.getValidate()
      if (!data) {
        // 调起极验进行验证
        this.captcha_obj.verify()
      } else {
        // 滑动验证通过获取相关参数，进行二次验证
        api.geetesValidate(data).then(res => {
          if (res?.res.result === 'success') {
            this.sendCode()
          } else {
            // 重置极验
            this.captcha_obj.reset()
          }
        })
      }
    },
    sendCode () {
      api.sendSms().then(res => {
        console.log('成功')
        // 此时已经通过极验验证，进行短信发送或者登录操作
      })
    }
  }
}
</script>

最后