Vue项目使用阿里验证

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

前言 上一篇文章提道了极验行为验证的使用，但是后面经过综合考虑后，还是选择了性价比高的阿里云智能验证，毕竟在价格方面极验的贵了三到四倍。

资源引入

<script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script>

创建公共组件Captcha，并完成初始化

<template>
  <div id="sc"></div>
</template>

<script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script>
<script>
import api from '@api/index'
export default {
  name: 'Captcha',
  mounted() {
    this.initCaptcha()
  },
  methods: {
    initCaptcha() {
      let that = this
      // 实例化ic对象
      AWSC.use('ic', function(state, module) {
        // 初始化
        window.ic = module.init({
          // 应用类型标识。它和使用场景标识（scene字段）一起决定了智能验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
          appkey: '',
          // 使用场景标识。它和应用类型标识（appkey字段）一起决定了智能验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的scene值，请务必正确填写。
          scene: 'ic_message',
          // 声明智能验证需要渲染的目标元素ID。
          renderTo: 'sc',
          width: 372,
          height: 42,
          // 智能验证组件初始状态文案。
          default_txt: '点击按钮开始智能验证',
          // 智能验证组件验证通过状态文案。
          success_txt: '验证成功',
          // 智能验证组件验证失败（拦截）状态文案。
          fail_txt: '验证失败，请在此点击按钮刷新',
          // 智能验证组件验证中状态文案。
          scaning_txt: '智能检测中',
          // 验证通过时会触发该回调参数。您可以在该回调参数中将会话ID（sessionId）、签名串（sig）、请求唯一标识（token）字段记录下来，随业务请求一同发送至您的服务端调用验签。
          success: function(data) {
            const params = {
              scene: 'ic_message',
              sessionId: data.sessionId,
              sig: data.sig,
              token: data.token
            }
            api.aliyunValidate(params).then(res => {
              if (res.code === '0000') {
                // 业务代码
              }
            })
          },
          // 验证失败时触发该回调参数
          fail: function(failCode) {
            console.log(failCode)
          },
          // 验证码加载异常时触发该回调参数
          error: function(errorCode) {
            console.log(errorCode)
          }
        })
      })
    }
  }
}
</script>

如果想自定义样式可以查看文档 或者自行右键检查元素获取类名 使用v-deep穿透修改样式即可

最后，在业务需要的模块引入改组件即可