vue3接阿里验证码2.0封装 【自用】

需求：

vue3项目接入 阿里验证码2.0 （附官网链接），第一次无感验证，失败后跳出滑块验证。因为验证是项目已经写了很多的情况下才提出加入的，所以后端是配合单开了一个接口专门处理。

整体流程概览

滑块效果：

跟着官方给的Demo能清晰地接入项目，但目前官方的Demo下载下来只给了vue2的

1.需要先在项目根目录里找到 public 目录 下有 index.html 文件，在 head 标签里插入

 <script type="text/javascript" src="https://o.alicdn.com/captcha-frontend/aliyunCaptcha/AliyunCaptcha.js"></script>

2.创建 VerifyBtn.vue 子组件。下贴子组件，即验证功能本体

<!-- 阿里图形验证 -->
<template>
  <div class="verify-btn">
    <div id="captcha-button">
      <p>
        <!-- 插槽文字 -->
        <slot></slot>
      </p>
    </div>
    <div id="captcha-element"></div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";
import myaxios from "@/http/Myaxios";

/**
 * 阿里云图形验证码
 * @param {Function} verifiedBy 验证通过后回调
 * @event verifiedBy
 * @slot 插槽文字
 * @example
 * <VerifyBtn  @verifiedBy="submitForm(ruleFormRef)" class="btn">立即提交</VerifyBtn>
 */

let captcha;
let captchaButton;

const initAliyunCaptchaOptions = {
  SceneId: '自己的场景ID', // 场景ID。通过步骤一添加验证场景后，您可以在验证码场景列表，获取该场景的场景ID
  prefix: '自己的身份标', // 身份标。开通阿里云验证码2.0后，您可以在控制台概览页面的实例基本信息卡片区域，获取身份标
  mode: "popup", // 验证码模式。embed表示要集成的验证码模式为嵌入式。无需修改
  element: "#captcha-element", // 页面上预留的渲染验证码的元素，与原代码中预留的页面元素保持一致。
  button: "#captcha-button", // 触发业务请求的元素。button表示单击登录按钮后，触发captchaVerifyCallback函数。您可以根据实际使用的元素修改element的值
  captchaVerifyCallback: captchaVerifyCallback, // 业务请求(带验证码校验)回调函数，无需修改
  onBizResultCallback: onBizResultCallback, // 业务请求结果回调函数，无需修改
  getInstance: getInstance, // 绑定验证码实例函数，无需修改
  slideStyle: {
    width: 360,
    height: 40,
  }, // 滑块验证码样式，支持自定义宽度和高度，单位为px。其中，width最小值为320 px
  language: "cn", // 验证码语言类型，支持简体中文（cn）、繁体中文（tw）、英文（en）
  // immediate: false, // 完成验证后，是否立即发送验证请求（调用captchaVerifyCallback函数）
  region: "cn", //验证码示例所属地区，支持中国内地（cn）、新加坡（sgp）
  // immediate: true,
};

// 绑定验证码实例函数。该函数为固定写法，无需修改
function getInstance(instance) {
  captcha = instance;
}

// 业务请求(带验证码校验)回调函数
/**
 * @name verifyCaptchaCallback
 * @function
 * 请求参数：由验证码脚本回调的验证参数，不需要做任何处理，直接传给服务端即可
 * @params {string} captchaVerifyParam
 * 返回参数：字段名固定，captchaResult为必选；如无业务验证场景时，bizResult为可选
 * @returns {{captchaResult: boolean, bizResult?: boolean|undefined}}
 */
async function captchaVerifyCallback(captchaVerifyParam) {
  // 1.向后端发起业务请求，获取验证码验证结果和业务结果
  let url = "向后端发送查验的网络请求";
  const res = await myaxios.post(url, { captchaVerifyParam });

  return {
    captchaResult: Boolean(res.data.data),
  };
}

const emit = defineEmits(["verifiedBy"]);
// 验证通过后续业务(人话：原来该干嘛干嘛)
function onBizResultCallback(bizResult) {
  // console.log("onBizResultCallback");
  if (bizResult) {
    emit("verifiedBy");
  }
}

onMounted(() => {
  captchaButton = document.getElementById("captcha-button");
  // 嵌入式;
  window.initAliyunCaptcha(initAliyunCaptchaOptions);
});

onUnmounted(() => {
  captchaButton = null;
  // 必须删除相关元素，否则再次mount多次调用 initAliyunCaptcha 会导致多次回调 captchaVerifyCallback
  document.getElementById("aliyunCaptcha-mask")?.remove();
  document.getElementById("aliyunCaptcha-window-popup")?.remove();
});
</script>

<style lang="scss" scoped>
#captcha-button {
  width: 100%;
  height: 100%;
  @include flex-center;
}
</style>

3.父组件使用：

<VerifyBtn v-else @verifiedBy="submitForm(ruleFormRef)" class="btn"
          >立即提交</VerifyBtn
        >

import VerifyBtn from "@/components/VerifyBtn";