前置条件
本文衔接上文，请从上文开始spring boot3x登录开发-上(整合jwt) 
内容简介
上文我们已经整合好了jwt,本文我们开始实现图形验证码接口的实现。
- 通过糊涂工具包的图形验证码工具完成获取验证码接口
- 通过redis缓存key(验证码id)-value(验证码内容)
图形验证码接口实现
导入糊涂工具依赖
pom.xml:
<dependency> <groupId>cn.hutool</groupId> <artifactId>hutool-all</artifactId> <version>5.8.25</version> </dependency>
接口分析
前端的登录表单有个验证码id字段，第一次打开登录页面默认会请求验证码接口，那么后端验证码接口将返回验证码图片的base64编码和验证码id，前端需要将验证码id保存到表单对象的验证码id字段，同时把验证码图片显示。用户填写账密、验证码点击登录，表单对象将携带账密和验证码id和用户键入的验证码内容提交到后端，后端需要根据此验证码id去查redis跟用户提交的比对。
分析完我们就可以知道怎样设计这个接口了。
接口接收一个验证码id参数，判断这个参数如果是null则生成一个验证码id，不为null则直接拿它去生成redis缓存验证码内容的key,接着将验证码图片同id返回给前端。
首先定义验证码接口数据对象
import lombok.Builder; import lombok.Data; /** * @author mijiupro */ @Data @Builder public class CaptchaVO { //验证码id private String captchaId; //验证码图片base64编码 private String captchaImage; }
编写验证码接口
这里用到了redis,需要整合好：Spring Boot3整合Redis- 
import cn.hutool.captcha.CaptchaUtil; import cn.hutool.captcha.CircleCaptcha; import com.mijiu.commom.model.vo.CaptchaVO; import io.swagger.v3.oas.annotations.Operation; import io.swagger.v3.oas.annotations.tags.Tag; import org.springframework.data.redis.core.StringRedisTemplate; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import java.util.Optional; import java.util.UUID; import java.util.concurrent.TimeUnit; /** * @author mijiupro */ @RestController @RequestMapping("/Captcha") @Tag(name = "验证码接口", description = "验证码接口相关操作") public class CaptchaController { private final StringRedisTemplate stringRedisTemplate; public CaptchaController(StringRedisTemplate stringRedisTemplate) { this.stringRedisTemplate = stringRedisTemplate; } @GetMapping("/graph-captcha") @Operation(summary = "获取验证码") public CaptchaVO getCaptcha(String captchaId) { // 创建一个图像验证码宽度为130，高度为48，包含4个字符，干扰线10个 CircleCaptcha circleCaptcha = CaptchaUtil.createCircleCaptcha(130, 48, 4, 10); // 获取验证码的文本 String captchaText = circleCaptcha.getCode(); // 获取验证码图片的Base64编码 String captchaImageBase64Data = circleCaptcha.getImageBase64Data(); // 如果没有传入captchaId，则生成一个随机字符串作为captchaId captchaId = Optional.ofNullable(captchaId).orElseGet(() -> UUID.randomUUID().toString()); // 保存验证码文本到Redis中，有效期30秒 stringRedisTemplate.opsForValue().set("captcha:" + captchaId, captchaText, 30, TimeUnit.SECONDS); return CaptchaVO.builder() .captchaId(captchaId) .captchaImage(captchaImageBase64Data) .build(); } }
测试验证码接口
这里使用Knife4jConfig(swigger3)测试，也可以用浏览器地址栏、Postman等测试
