前提准备
- 已开通阿里云验证码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',等等。