SpringBoot整合验证码
1.简介
Java图形验证码，支持gif、中文、算术等类型，可用于Java Web、JavaSE等项目。
2.效果展示
3.导入依赖
<dependency>
<groupId>com.github.whvcse</groupId>
<artifactId>easy-captcha</artifactId>
<version>1.6.2</version>
</dependency>
4.代码实现
4.1 gif验证码实现（动态验证码实现）
4.1.1 在SpringBoot项目的Controller中进行编写
这里的R是返回实体类
package com.sky.api.sys.controller;
import com.sky.utils.R;
import com.wf.captcha.GifCaptcha;
import com.wf.captcha.base.Captcha;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.awt.*;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;
import java.util.concurrent.TimeUnit;
/**
* @author 尹稳健~
* @version 1.0
* @time 2022/9/21
*/
@RestController
@Api(tags = "系统管理-验证码")
public class CaptchaController {
/**
* 图形验证码接口
* @return
*/
@ApiOperation("图形验证码接口")
@GetMapping("/captchaImage")
public R<Map<String,Object>> captcha(){
// 三个参数分别为宽、高、位数
Captcha captcha = new GifCaptcha(130, 48, 4);
// 设置字体，有默认字体，可以不用设置
captcha.setFont(new Font("Verdana", Font.PLAIN, 32));
// 设置类型，纯数字、纯字母、字母数字混合
captcha.setCharType(Captcha.TYPE_DEFAULT);
// 验证码存入redis
// 将uuid作为redis的key
String key = UUID.randomUUID().toString();
String code = captcha.text().toLowerCase();
Map<String, Object> map = new HashMap<>();
map.put("key",key);
map.put("code",captcha.toBase64());
return R.ok(map);
}
}
4.1.2 前端编写核心代码
因为前端使用的是vue索引只是截取部分代码。
<div class="login-code">
<img :src="codeUrl" @click="getCode" class="login-code-img"/>
</div>
<script>
// 获取验证码图片
getCode(){
fetch.getCodeImg().then(res => {
this.codeUrl = res.data.data.code;
this.loginForm.uuid = res.data.data.key;
})
},
</script>
4.1.3 结果显示
因为他是gif所以会动
4.2 其他验证码实现
4.2.1 Java代码
/**
* @author 尹稳健~
* @version 1.0
* @time 2022/9/21
*/
@RestController
@Api(tags = "系统管理-验证码")
public class CaptchaController {
/**
* 图形验证码接口
* @return
*/
@ApiOperation("图形验证码接口")
@GetMapping("/captchaImage")
public R<Map<String,Object>> captcha(){
// png类型
SpecCaptcha captcha = new SpecCaptcha(130, 48);
captcha.text(); // 获取验证码的字符
captcha.textChar(); // 获取验证码的字符数组
// gif类型
GifCaptcha captcha = new GifCaptcha(130, 48);
// 中文类型
ChineseCaptcha captcha = new ChineseCaptcha(130, 48);
// 中文gif类型
ChineseGifCaptcha captcha = new ChineseGifCaptcha(130, 48);
// 算术类型
ArithmeticCaptcha captcha = new ArithmeticCaptcha(130, 48);
captcha.setLen(3); // 几位数运算，默认是两位
captcha.getArithmeticString(); // 获取运算的公式：3+2=?
captcha.text(); // 获取运算的结果：5
captcha.supportAlgorithmSign(2); // 可设置支持的算法：2 表示只生成带加减法的公式
captcha.setDifficulty(50); // 设置计算难度，参与计算的每一个整数的最大值
captcha.out(outputStream); // 输出验证码
//简单算术类型 SimpleArithmeticCaptcha,用法同ArithmeticCaptcha,只支持加减，计算结果为正整数
}
}
注意：
算术验证码的len表示是几位数运算，而其他验证码的len表示验证码的位数，算术验证码的text()表示的是公式的结果， 对于算术验证码，你应该把公式的结果存储session，而不是公式。
5.验证码格式设置
5.1 验证码六种组成类型
| 类型 | 描述 |
|---|---|
| TYPE_DEFAULT | 数字和字母混合 |
| TYPE_ONLY_CHAR | 纯字母 |
| TYPE_NUM_AND_UPPER | 数字和大写字母混合 |
| TYPE_ONLY_LOWER | 纯小写字母 |
| TYPE_ONLY_NUMBER | 纯数字 |
| TYPE_ONLY_UPPER | 纯大写字母 |
5.2 如何使用
// 三个参数分别为宽、高、位数
Captcha captcha = new GifCaptcha(130, 48, 4);
// 设置类型，纯数字、纯字母、字母数字混合
captcha.setCharType(Captcha.TYPE_DEFAULT);
5.3 字体设置
使用默认字体两种方式
方式一：
Captcha captcha = new GifCaptcha(130, 48, 5);
// 设置内置字体
captcha.setFont(Captcha.FONT_1);
// 设置系统字体
captcha.setFont(new Font("楷体", Font.PLAIN, 28));
方式二：
// 三个参数分别为宽、高、位数
Captcha captcha = new GifCaptcha(130, 48, 4);
// 设置字体，有默认字体，可以不用设置
captcha.setFont(new Font("Verdana", Font.PLAIN, 32));
6.实战中如何使用
验证码我们可以通过后端传给前端，那么我们传过去的时候又应该如何传？
如果传入一个验证码，那我们应该传哪些参数？
验证码该如何验证？
验证码该存在哪？
这些都是需要思考的问题
这里我使用一种简单的方法，如果有更好的方法欢迎大家推荐！！！
思路
-
我们将验证码的code，也就是他的结果放入redis中，并且他的key是一个uuid，在我们后端传给前端的时候，我们传的是一个map集合，里面有uuid和图片的内容
-
这个时候有人可能会发现我们后端传过去是一个什么玩意？
-
data 表示取得数据的协定名称；
-
image/png 是数据类型名称；
-
base64 是数据的编码方法，逗号后面就是这个image/png文件base64编码后的数据。
-
这么长的东西就是那个验证码图片，不用怀疑的
-
前端拿到这些数据后，会把uuid绑定到用户输入的表单数据中
-
然后用户提交表单，里面会携带uuid，我们先通过uuid获取redis中的验证码的值
- 这个时候还有2种情况，第一种就是验证码过期了，那么通过uuid从redis中查找，那么是找不到的，我们需要做异常处理
- 第二种情况，就是用户输入的验证码和我们存入redis的值不匹配，我们需要提示他输入错误
package com.sky.api.sys.controller;
import com.sky.utils.R;
import com.sky.utils.RedisCache;
import com.wf.captcha.GifCaptcha;
import com.wf.captcha.base.Captcha;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.awt.*;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;
import java.util.concurrent.TimeUnit;
/**
* @author 尹稳健~
* @version 1.0
* @time 2022/9/21
*/
@RestController
@Api(tags = "系统管理-验证码")
public class CaptchaController {
@Autowired
private RedisCache redisCache;
/**
* 图形验证码接口
* @return
*/
@ApiOperation("图形验证码接口")
@GetMapping("/captchaImage")
public R<Map<String,Object>> captcha(){
// 三个参数分别为宽、高、位数
Captcha captcha = new GifCaptcha(130, 48, 4);
// 设置字体，有默认字体，可以不用设置
captcha.setFont(new Font("Verdana", Font.PLAIN, 32));
// 设置类型，纯数字、纯字母、字母数字混合
captcha.setCharType(Captcha.TYPE_DEFAULT);
// 验证码存入redis
// 将uuid作为redis的key
String key = UUID.randomUUID().toString();
String code = captcha.text().toLowerCase();
redisCache.setCacheObject(key,code,1, TimeUnit.MINUTES);
Map<String, Object> map = new HashMap<>();
map.put("key",key);
map.put("code",captcha.toBase64());
return R.ok(map);
}
}
截取部分代码：
