mirror of
https://github.com/dromara/tianai-captcha.git
synced 2026-05-07 06:04:34 +08:00
重构系统项目结构， 将 tianai-captcha
tianai-captcha-springboot-starter tianai-captcha-web-sdk tianai-captcha-solon-plugin 整合到一块
This commit is contained in:
天爱有情
@@ -1,7 +1,7 @@
|
||||
<div align="center">
|
||||
|
||||
![][image-logo]
|
||||
|
||||
|
||||
|
||||
|
||||
### tianaiCAPTCHA - 天爱验证码(TAC)
|
||||
@@ -22,22 +22,85 @@
|
||||
- 文字点选验证码
|
||||
- 后面会陆续支持市面上更多好玩的验证码玩法... 敬请期待
|
||||
|
||||
## 快速上手
|
||||
## 快速上手(后端)
|
||||
|
||||
> 注意: 如果你项目是使用的**Springboot**，
|
||||
>
|
||||
>
|
||||
请使用SpringBoot脚手架工具
|
||||
- [tianai-captcha-springboot-starter(gitee)](https://gitee.com/tianai/tianai-captcha-springboot-starter);
|
||||
- [tianai-captcha-springboot-starter(gitcode)](https://gitcode.com/tiana/tianai-captcha-springboot-starter);
|
||||
- [tianai-captcha-springboot-starter(github)](https://github.com/tianaiyouqing/tianai-captcha-springboot-starter);
|
||||
>
|
||||
> 该工具对tianai-captcha验证码进行了封装，使其使用更加方便快捷
|
||||
### springboot项目
|
||||
|
||||
1. 导入依赖
|
||||
|
||||
```xml
|
||||
<dependency>
|
||||
<groupId>cloud.tianai.captcha</groupId>
|
||||
<artifactId>tianai-captcha-springboot-starter</artifactId>
|
||||
<version>1.5.2</version>
|
||||
</dependency>
|
||||
```
|
||||
|
||||
2. 使用`ImageCaptchaApplication`生成和校验验证码
|
||||
|
||||
```java
|
||||
public class Test2 {
|
||||
@Autowired
|
||||
private ImageCaptchaApplication application;
|
||||
|
||||
// 生成验证码
|
||||
public void gen() {
|
||||
ApiResponse<ImageCaptchaVO> res1 = application.generateCaptcha(CaptchaTypeConstant.SLIDER);
|
||||
|
||||
// 匹配验证码是否正确
|
||||
// 该参数包含了滑动轨迹滑动时间等数据，用于校验滑块验证码。 由前端传入
|
||||
ImageCaptchaTrack sliderCaptchaTrack = new ImageCaptchaTrack();
|
||||
ApiResponse<?> match = application.matching(res1.getId(), sliderCaptchaTrack);
|
||||
}
|
||||
|
||||
// 校验验证码
|
||||
public boolean valid(@RequestBody ImageCaptchaTrack captchaTrack) {
|
||||
ApiResponse<?> matching = captchaApplication.matching(data.getId(), sliderCaptchaTrack);
|
||||
return matching.isSuccess();
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
3. springboot配置文件说明
|
||||
|
||||
```yaml
|
||||
# 滑块验证码配置， 详细请看 cloud.tianai.captcha.autoconfiguration.ImageCaptchaProperties 类
|
||||
captcha:
|
||||
# 如果项目中使用到了redis，滑块验证码会自动把验证码数据存到redis中， 这里配置redis的key的前缀,默认是captcha:slider
|
||||
prefix: captcha
|
||||
# 验证码过期时间，默认是2分钟,单位毫秒， 可以根据自身业务进行调整
|
||||
expire:
|
||||
# 默认缓存时间 2分钟
|
||||
default: 10000
|
||||
# 针对 点选验证码 过期时间设置为 2分钟， 因为点选验证码验证比较慢，把过期时间调整大一些
|
||||
WORD_IMAGE_CLICK: 20000
|
||||
# 使用加载系统自带的资源， 默认是 false
|
||||
init-default-resource: false
|
||||
# 缓存控制， 默认为false不开启
|
||||
local-cache-enabled: true
|
||||
# 验证码会提前缓存一些生成好的验证数据， 默认是20
|
||||
local-cache-size: 20
|
||||
# 缓存拉取失败后等待时间 默认是 5秒钟
|
||||
local-cache-wait-time: 5000
|
||||
# 缓存检查间隔 默认是2秒钟
|
||||
local-cache-period: 2000
|
||||
# 配置字体库，文字点选验证码的字体库，可以配置多个
|
||||
font-path:
|
||||
- classpath:font/simhei.ttf
|
||||
secondary:
|
||||
# 二次验证， 默认false 不开启
|
||||
enabled: false
|
||||
# 二次验证过期时间， 默认 2分钟
|
||||
expire: 120000
|
||||
# 二次验证缓存key前缀，默认是 captcha:secondary
|
||||
keyPrefix: "captcha:secondary"
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
> **写好的验证码demo移步
|
||||
> - [tianai-captcha-demo(gitee)](https://gitee.com/tianai/tianai-captcha-demo)
|
||||
> - [tianai-captcha-demo(gitcode)](https://gitcode.com/tiana/tianai-captcha-demo)
|
||||
### 非spring项目
|
||||
|
||||
### 1. 导入xml
|
||||
|
||||
@@ -90,7 +153,117 @@ public class ApplicationTest {
|
||||
}
|
||||
|
||||
```
|
||||
### 3.详细文档请点击 [在线文档](http://doc.captcha.tianai.cloud)
|
||||
|
||||
|
||||
## 快速上手(前端)
|
||||
|
||||
|
||||
| 条目 | |
|
||||
| -------- | ------------------------------------------------------------ |
|
||||
| 兼容性 | Chrome、Firefox、Safari、Opera、主流手机浏览器、iOS 及 Android上的内嵌Webview |
|
||||
| 框架支持 | H5、Angular、React、Vue2、Vue3 |
|
||||
|
||||
|
||||
|
||||
### 安装
|
||||
|
||||
1. 将打包好的`tac`目录放到自己项目中,如果是vue、react等框架，将tac目录放到public目录中、或者放到某个可以访问到地方，比如oss之类的可以被浏览器访问到的地方 （tac下载地址 [https://gitee.com/tianai/tianai-captcha-web-sdk/releases/tag/1.2](https://gitee.com/tianai/tianai-captcha-web-sdk/releases/tag/1.2)）
|
||||
|
||||
2. 引入初始化函数 (load.js下载地址 [https://minio.tianai.cloud/public/static/captcha/js/load.min.js](https://minio.tianai.cloud/public/static/captcha/js/load.min.js)) 可自己将load.js下载到本地
|
||||
|
||||
```html
|
||||
<script src="load.min.js"></script>
|
||||
```
|
||||
|
||||
**注: 如果是web框架，将该引入代码放到 `public/index.html`**
|
||||
|
||||
### 使用方法
|
||||
|
||||
2. 创建一个div块用于渲染验证码， 该div用于装载验证码
|
||||
|
||||
```html
|
||||
<div id="captcha-box"></div>
|
||||
```
|
||||
|
||||
3. 在需要调用验证码的时候执行加载验证码方法
|
||||
|
||||
```js
|
||||
function login() {
|
||||
// config 对象为TAC验证码的一些配置和验证的回调
|
||||
const config = {
|
||||
// 生成接口 (必选项,必须配置, 要符合tianai-captcha默认验证码生成接口规范)
|
||||
requestCaptchaDataUrl: "/gen",
|
||||
// 验证接口 (必选项,必须配置, 要符合tianai-captcha默认验证码校验接口规范)
|
||||
validCaptchaUrl: "/check",
|
||||
// 验证码绑定的div块 (必选项,必须配置)
|
||||
bindEl: "#captcha-box",
|
||||
// 验证成功回调函数(必选项,必须配置)
|
||||
validSuccess: (res, c, tac) => {
|
||||
// 销毁验证码服务
|
||||
tac.destroyWindow();
|
||||
console.log("验证成功，后端返回的数据为", res);
|
||||
// 调用具体的login方法
|
||||
login(res.data.token)
|
||||
},
|
||||
// 验证失败的回调函数(可忽略，如果不自定义 validFail 方法时，会使用默认的)
|
||||
validFail: (res, c, tac) => {
|
||||
console.log("验证码验证失败回调...")
|
||||
// 验证失败后重新拉取验证码
|
||||
tac.reloadCaptcha();
|
||||
},
|
||||
// 刷新按钮回调事件
|
||||
btnRefreshFun: (el, tac) => {
|
||||
console.log("刷新按钮触发事件...")
|
||||
tac.reloadCaptcha();
|
||||
},
|
||||
// 关闭按钮回调事件
|
||||
btnCloseFun: (el, tac) => {
|
||||
console.log("关闭按钮触发事件...")
|
||||
tac.destroyWindow();
|
||||
}
|
||||
}
|
||||
// 一些样式配置， 可不传
|
||||
let style = {
|
||||
logoUrl: null;// 去除logo
|
||||
// logoUrl: "/xx/xx/xxx.png" // 替换成自定义的logo
|
||||
}
|
||||
// 参数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);
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### 对滑块的按钮和背景设置为自定义的一些样式
|
||||
|
||||
```js
|
||||
// 这里分享一些作者自己调的样式供参考
|
||||
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);
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 详细文档请点击 [在线文档](http://doc.captcha.tianai.cloud)
|
||||
|
||||
# qq群: 197340494
|
||||
|
||||
# 微信群:
|
||||
|
||||
Reference in New Issue
Block a user