VUE前端实现天爱滑块验证码--具体教程

第一步：

Git地址：tianai-captcha-demo: 滑块验证码demo
找到目录 src/main/resources/static,拷贝 static 并改名为 tac 即可。
第二步：

将改为 tac 的文件，放进项目根目录中，如下图：

第三步：

点击链接：https://minio.tianai.cloud/public/static/captcha/js/load.min.js
将内里的内容拷贝下来，创建 load.min.js 文件 在 tac/js/load.min.js。
第四步：

会报初始化的错误：初始化tac失败 referenceerror: tac is not defined 
解决方法：
1、下载 rollup-plugin-copy 依赖：yarn add rollup-plugin-copy --save-dev  
我这边用的是yarn，npm的话是：npm install rollup-plugin-copy --save-dev  
乐成如下图：

2、在 vite.config.ts 文件中，在build中参加以下配置：

1. import copyPlugin from 'rollup-plugin-copy';
2. export default defineConfig(({ mode }) =>{
3.   return {
4.     build: {
5.       rollupOptions: {
6.         plugins: [
7.           copyPlugin({
8.             targets: [{ src: 'tac/*', dest: 'dist/tac' }],
9.             hook: 'writeBundle' //防止打包后,tac文件丢失
10.           }),
11.         ],
12.       },
13.       // outDir: 'dist',
14.       // assetsDir: 'assets',
15.     },
16.   }
17. })

复制代码

第五步：

在使用到验证码的 vue 文件中，后端须要给俩个接口：天生验证码接口 和 校验验证码接口

1. const checkVerificationCode = () => {
2.     const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;
4.     // config 对象为TAC验证码的一些配置和验证的回调
5.     const config = {
6.          //生成接口
7.         requestCaptchaDataUrl: `${apiBaseUrl}/getReCaptchaImageV2.json`,
8.         // 验证接口
9.         validCaptchaUrl: `${apiBaseUrl}/getReCaptchaImageV3.json`,
10.         bindEl: '#captcha-box',
11.         // 验证成功回调函数(必选项,必须配置)
12.         validSuccess: (res, c, tac) => {
13.             // 销毁验证码服务
14.             tac.destroyWindow();
15.             // console.log("验证成功，后端返回的数据为", res);
16.         },
17.         // 验证失败的回调函数(可忽略，如果不自定义 validFail 方法时，会使用默认的)
18.         validFail: (res, c, tac) => {
19.             console.log('验证码验证失败回调...', res, c, tac);
20.             // 验证失败后重新拉取验证码
21.             tac.reloadCaptcha();
22.         },
23.         // 刷新按钮回调事件
24.         btnRefreshFun: (el, tac) => {
25.             console.log('刷新按钮触发事件...');
26.             tac.reloadCaptcha();
27.         },
28.         // 关闭按钮回调事件
29.         btnCloseFun: (el, tac) => {
30.             console.log('关闭按钮触发事件...');
31.             tac.destroyWindow();
32.         }
33.     };
35.     // 一些样式配置， 可不传
36.     const style = {
37.         // 按钮样式
38.         btnUrl: "https://minio.tianai.cloud/public/captcha-btn/btn3.png",
39.         // 背景样式
40.         bgUrl: "https://minio.tianai.cloud/public/captcha-btn/btn3-bg.jpg",
41.         // logo地址
42.         logoUrl: "@/assets/logo.png",
43.         // 滑动边框样式
44.         moveTrackMaskBgColor: "#f7b645",
45.         moveTrackMaskBorderColor: "#ef9c0d"
46.     }
47.     // 参数1 为 tac文件是目录地址， 目录里包含 tac的js和css等文件
48.     // 参数2 为 tac验证码相关配置
49.     // 参数3 为 tac窗口一些样式配置
50.     window.initTAC('./tac', config, style).then((tac) => {
51.         tac.init(); // 调用init则显示验证码
52.     }).catch((e) => {
53.         console.log('初始化tac失败', e);
54.     });
55. };

复制代码

注意点：

1、更改图标大概配景地址

图片须要放在 tac/images 文件中，否则生产环境会渲染不出的情况出现。

2、接口是拼接本地配置好的后端地址

到这里根本上就实现了滑块验证功能，然后在各个回调中做处理。
后端天生接口返回的数据及格式

重点：

在 tac.min.js 源码文件 中 requestCaptchaData 这个方法是调用后端天生验证码的接口
参数要本身更改下，如下：

额外：

回调参数不须要的也可以本身在源码内里修改

 
效果如下：

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。