VUE前端实现天爱滑块验证码--具体教程
第一步：Git地址：tianai-captcha-demo: 滑块验证码demo
找到目录 src/main/resources/static,拷贝 static 并改名为 tac 即可。
第二步：
将改为 tac 的文件，放进项目根目录中，如下图：
https://i-blog.csdnimg.cn/direct/7ffb933ea630420989db41b3a8417db6.png
第三步：
点击链接：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
乐成如下图：
https://i-blog.csdnimg.cn/direct/b98262dca52749e5b4b86f5c3ce27e30.png
2、在 vite.config.ts 文件中，在build中参加以下配置：
import copyPlugin from 'rollup-plugin-copy';
export default defineConfig(({ mode }) =>{
return {
build: {
rollupOptions: {
plugins: [
copyPlugin({
targets: [{ src: 'tac/*', dest: 'dist/tac' }],
hook: 'writeBundle' //防止打包后,tac文件丢失
}),
],
},
// outDir: 'dist',
// assetsDir: 'assets',
},
}
})
第五步：
在使用到验证码的 vue 文件中，后端须要给俩个接口：天生验证码接口 和 校验验证码接口
const checkVerificationCode = () => {
const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;
// config 对象为TAC验证码的一些配置和验证的回调
const config = {
//生成接口
requestCaptchaDataUrl: `${apiBaseUrl}/getReCaptchaImageV2.json`,
// 验证接口
validCaptchaUrl: `${apiBaseUrl}/getReCaptchaImageV3.json`,
bindEl: '#captcha-box',
// 验证成功回调函数(必选项,必须配置)
validSuccess: (res, c, tac) => {
// 销毁验证码服务
tac.destroyWindow();
// console.log("验证成功，后端返回的数据为", res);
},
// 验证失败的回调函数(可忽略，如果不自定义 validFail 方法时，会使用默认的)
validFail: (res, c, tac) => {
console.log('验证码验证失败回调...', res, c, tac);
// 验证失败后重新拉取验证码
tac.reloadCaptcha();
},
// 刷新按钮回调事件
btnRefreshFun: (el, tac) => {
console.log('刷新按钮触发事件...');
tac.reloadCaptcha();
},
// 关闭按钮回调事件
btnCloseFun: (el, tac) => {
console.log('关闭按钮触发事件...');
tac.destroyWindow();
}
};
// 一些样式配置， 可不传
const style = {
// 按钮样式
btnUrl: "https://minio.tianai.cloud/public/captcha-btn/btn3.png",
// 背景样式
bgUrl: "https://minio.tianai.cloud/public/captcha-btn/btn3-bg.jpg",
// logo地址
logoUrl: "@/assets/logo.png",
// 滑动边框样式
moveTrackMaskBgColor: "#f7b645",
moveTrackMaskBorderColor: "#ef9c0d"
}
// 参数1 为 tac文件是目录地址， 目录里包含 tac的js和css等文件
// 参数2 为 tac验证码相关配置
// 参数3 为 tac窗口一些样式配置
window.initTAC('./tac', config, style).then((tac) => {
tac.init(); // 调用init则显示验证码
}).catch((e) => {
console.log('初始化tac失败', e);
});
}; 注意点：
1、更改图标大概配景地址
图片须要放在 tac/images 文件中，否则生产环境会渲染不出的情况出现。
https://i-blog.csdnimg.cn/direct/783da68b1ba74cf4b42aab84feaa94e4.png
2、接口是拼接本地配置好的后端地址
https://i-blog.csdnimg.cn/direct/d7372b82fdfb48e89c067b3dd498e262.png
到这里根本上就实现了滑块验证功能，然后在各个回调中做处理。
后端天生接口返回的数据及格式
https://i-blog.csdnimg.cn/direct/e7f41f8f81e94b29bbdbd975734d463d.png
重点：
在 tac.min.js 源码文件 中 requestCaptchaData 这个方法是调用后端天生验证码的接口
参数要本身更改下，如下：
https://i-blog.csdnimg.cn/direct/6b995e9ce1484e6a935524c13f08826f.png
额外：
回调参数不须要的也可以本身在源码内里修改
https://i-blog.csdnimg.cn/direct/66e92e53753641c1be934121a29d2d12.png
效果如下：
https://i-blog.csdnimg.cn/direct/7bbdc9a091544008acb9d7df1ef0a266.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]