vue3 接入阿里云验证码

接入指引

开通验证码2.0后，您需要在客户端和服务端接入验证码后，才能使用验证码进行验证。

官方文档：help.aliyun.com/zh/captcha/…

第一步：开通验证码服务

1. 登录验证码2.0控制台。

2. 在开通页面，单击立即购买后，完成购买。（支持0元购买试用，根据后期收钱）

   开通验证码服务后，您需要在概览页面的实例基本信息卡片区域，获取身份标，用于客户端接入。具体操作，请参见客户端接入。

第二步：新建场景

第三步：接入验证码

如果采用Web和H5接入，新建验证场景时，客户端类型需选择为Web或H5。

1. 客户端接入：在使用验证功能的客户端页面（Web和H5）中，集成验证码初始化代码，实现客户端接入。关于集成验证码的初始化代码示例，请参见客户端接入。
2. 服务端接入：在客户端页面（Web和H5）对应的服务端中，集成SDK后，调用服务端接入初始化接口VerifyIntelligentCaptcha，发起验证码验证。具体操作，请参见服务端接入。

第四步：使用

在index.html中引入 
<script type="text/javascript" src="https://o.alicdn.com/captcha-frontend/aliyunCaptcha/AliyunCaptcha.js"></script>

创建组件 命名：captcha

<template>
  <div>
    <div id="captcha-element"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'

const captcha = ref(null)
const captchaButton = ref(null)

onMounted(() => {
  captchaButton.value = document.getElementById('captcha-button')

  window.initAliyunCaptcha({
    SceneId: 'xxx', // 场景ID。根据步骤二新建验证场景后，您可以在验证码场景列表，获取该场景的场景ID
    prefix: 'xxx', // 身份标。开通阿里云验证码2.0后，您可以在控制台概览页面的实例基本信息卡片区域，获取身份标
    mode: 'popup', // 验证码模式。popup表示要集成的验证码模式为弹出式。无需修改
    element: '#captcha-element', // 页面上预留的渲染验证码的元素，与原代码中预留的页面元素保持一致。
    button: '#login-btn', // 触发验证码弹窗的元素。button表示单击登录按钮后，触发captchaVerifyCallback函数。您可以根据实际使用的元素修改element的值
    captchaVerifyCallback: captchaVerifyCallback, // 业务请求(带验证码校验)回调函数，无需修改
    onBizResultCallback: onBizResultCallback, // 业务请求结果回调函数，无需修改
    getInstance: getInstance, // 绑定验证码实例函数，无需修改
    slideStyle: {
      width: 360,
      height: 40
    }, // 滑块验证码样式，支持自定义宽度和高度，单位为px。其中，width最小值为320 px
    language: 'cn' // 验证码语言类型，支持简体中文（cn）、繁体中文（tw）、英文（en）
  })
})

onBeforeUnmount(() => {
  captchaButton.value = null

  // 必须删除相关元素，否则再次mount多次调用 initAliyunCaptcha 会导致多次回调 captchaVerifyCallback
  document.getElementById('aliyunCaptcha-mask')?.remove()
  document.getElementById('aliyunCaptcha-window-popup')?.remove()
})

const getInstance = (instance) => {
  captcha.value = instance
}

const captchaVerifyCallback = async (captchaVerifyParam) => {
  // 1.向后端发起业务请求，获取验证码验证结果和业务结果
  // const result = await xxxx('http://您的业务请求地址', {
  //     captchaVerifyParam: captchaVerifyParam, // 验证码参数
  //     yourBizParam... // 业务参数
  // });
  // return {
  //  captchaResult: true, // 验证码验证是否通过，boolean类型，必选
  //  bizResult: true, // 业务验证是否通过，boolean类型，可选；若为无业务验证结果的场景，bizResult可以为空
  // }
  console.log(captchaVerifyParam)
  return {
    captchaResult: true,
    bizResult: true
  }
}

// 验证通过后调用
const onBizResultCallback = () => {
  console.log('onBizResultCallback')
}
</script>

第五步：导入组件

<template>
  <div class="login-container">
      <Captcha />
      <el-button type="primary" id="login-btn" class="login-btn">登录 / 注册</el-button>
  </div>
</template>

<script setup lang="ts">
import { ref, defineAsyncComponent } from 'vue'
const Captcha = defineAsyncComponent(() => import('@/components/captcha/index.vue'))
</script>

效果展示