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 installrollup-plugin-copy --save-dev

成功如下图:

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 文件中,不然生产环境会渲染不出的情况出现。

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

到这里基本上就实现了滑块验证功能,然后在各个回调中做处理。

后端生成接口返回的数据及格式

重点:

在 tac.min.js 源码文件 中requestCaptchaData 这个方法是调用后端生成验证码的接口

参数要自己更改下,如下:

额外:

回调参数不需要的也可以自己在源码里面修改

效果如下:

相关推荐
@解忧杂货铺1 小时前
前端vue如何实现数字框中通过鼠标滚轮上下滚动增减数字
前端·javascript·vue.js
F-2H2 小时前
C语言:指针4(常量指针和指针常量及动态内存分配)
java·linux·c语言·开发语言·前端·c++
苹果酱05672 小时前
「Mysql优化大师一」mysql服务性能剖析工具
java·vue.js·spring boot·mysql·课程设计
gqkmiss3 小时前
Chrome 浏览器插件获取网页 iframe 中的 window 对象
前端·chrome·iframe·postmessage·chrome 插件
m0_748247555 小时前
Web 应用项目开发全流程解析与实战经验分享
开发语言·前端·php
m0_748255026 小时前
前端常用算法集合
前端·算法
真的很上进6 小时前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境?
java·前端·javascript·css·react.js·vue·html
web130933203986 小时前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
NiNg_1_2346 小时前
Echarts连接数据库,实时绘制图表详解
前端·数据库·echarts
如若1237 小时前
对文件内的文件名生成目录,方便查阅
java·前端·python