Vue3项目对接阿里云滑动验证功能

前提准备

已开通阿里云验证码2.0服务。
已新建接入方式为Web/H5的验证场景。

在开通的阿里云的验证码的界面，可以看到身份标识prefix，后面会用到。

在场景管理目录里面，新增一个场景，可以看到场景IDSceneId，后面会用到。

验证码V2.0接入

不同的客户端架构使用不同的方式：

Web和H5客户端V2架构接入
Web和H5客户端V3架构接入，我现在使用的这一种方式接入的。

打开上面的链接，在文章的最下面会有示例demo参考，把这个demo下载下来。

本站备份下载：客户端V2架构Demo示例下载——Vue集成Demo示例

本站备份下载，我用的是这个：客户端V3架构Demo示例下载——Vue3集成Demo示例

运行Demo

demo下载下来安装之后，需要修改两个地方的配置就可以跑起来了，不需要域名配置，不需要端口配置，安装包之后运行，就可以打开网站正常加载，如果你打不开那就是配置错了。

装包

如果使用npm install没有安装成功的话，删除掉package-lock.json文件，使用pnpm install方式安装。

修改配置

修改prefix

修改为前面获取到的prefix。

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
  <meta charset="UTF-8">
5
  <link rel="shortcut icon" href="//www.aliyun.com/favicon.ico" type="image/x-icon" />
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
  <title>AliyunCaptcha Vue</title>
8
  <script>
9
    window.AliyunCaptchaConfig = {
10
      region: 'cn',
11
      prefix: '1o4klf',
12
    };
13
  </script>
14
  <script type="text/javascript" src="https://o.alicdn.com/captcha-frontend/aliyunCaptcha/AliyunCaptcha.js"></script>
15
</head>
5 collapsed lines
16
<body>
17
<div id="app"></div>
18
<script type="module" src="/src/main.js"></script>
19
</body>
20
</html>

修改SceneId

修改为前面获取到的SceneId。

1
function initCaptcha() {
2
  window.initAliyunCaptcha({
3
    SceneId: 'xxxxxxx', // 场景ID。根据步骤二新建验证场景后，您可以在验证码场景列表，获取该场景的场景ID
4
    mode: 'popup', // 验证码模式。popup表示要集成的验证码模式为弹出式。无需修改
5
    element: '#captcha-element', // 页面上预留的渲染验证码的元素，与原代码中预留的页面元素保持一致。
6
    button: '#captcha-button', // 触发验证码弹窗的元素。
7
    success: success,
8
    fail: fail,
9
    getInstance: getInstance, // 绑定验证码实例函数，无需修改
10
    slideStyle: {
11
      width: 360,
12
      height: 40,
13
    }, // 滑块验证码样式，支持自定义宽度和高度，单位为px。其中，width最小值为320 px
14
    language: 'cn', // 验证码语言类型，支持简体中文（cn）、繁体中文（tw）、英文（en）
15
  })
1 collapsed line
16
}

运行项目

1
> vue-captcha-demo@0.0.0 dev
2
> vite
3

4
  VITE v4.5.14  ready in 302 ms
5

6
  ➜  Local:   http://localhost:5173/
7
  ➜  Network: use --host to expose
8
  ➜  press h to show help

浏览器中打开http://localhost:5173/，可以正常看到页面显示如下。

点击按钮，能够正常打开验证码弹框就可以了。

后面的代码需要结合业务进行调整，比如在function initCaptcha()中我们可能需要用自己的方式来打开这个验证码弹框，可以删除掉配置中的button: '#captcha-button',等等。