tianai-captcha

简单介绍

• tianai-captcha 目前支持的行为验证码类型
  • 滑块验证码
  • 旋转验证码
  • 滑动还原验证码
  • 文字点选验证码
  • 后面会陆续支持市面上更多好玩的验证码玩法... 敬请期待

快速上手(后端)

springboot项目

1. 导入依赖

   
       cloud.tianai.captcha
       tianai-captcha-springboot-starter
       1.5.5
   

2. 使用ImageCaptchaApplication生成和校验验证码

…

1. springboot配置文件说明

…

非spring项目

1. 导入xml

    cloud.tianai.captcha
    tianai-captcha
    1.5.4

1. 构建 ImageCaptchaApplication负责生成和校验验证码

…

快速上手(前端)

安装

1. 将打包好的tac目录放到自己项目中,如果是vue、react等框架，将tac目录放到public目录中、或者放到某个可以访问到地方，比如oss之类的可以被浏览器访问到的地方 （tac下载地址 https://gitee.com/dromara/tianai-captcha/releases/tag/tianai-captcha-1.5.4）

2. 引入初始化函数 (load.js下载地址 https://minio.tianai.cloud/public/static/captcha/js/load.min.js) 可自己将load.js下载到本地

   注: 如果是web框架，将该引入代码放到 public/index.html

使用方法

1. 创建一个div块用于渲染验证码， 该div用于装载验证码

2. 在需要调用验证码的时候执行加载验证码方法

…

对滑块的按钮和背景设置为自定义的一些样式

// 这里分享一些作者自己调的样式供参考
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: "https://minio.tianai.cloud/public/static/captcha/images/logo.png",
 		// 滑动边框样式
    	moveTrackMaskBgColor: "#f7b645",
        moveTrackMaskBorderColor: "#ef9c0d"
    }
 window.initTAC("./tac", config, style).then(tac => {
     tac.init(); // 调用init则显示验证码
 }).catch(e => {
     console.log("初始化tac失败", e);
 })

详细文档请点击 在线文档

qq群: 197340494

微信群:

微信群加不上的话 加微信好友 微信号: youseeseeyou-1ttd 拉你入群