spring boot3登录开发-2(1图形验证码接口实现)-阿里云开发者社区

spring boot3登录开发-2(1图形验证码接口实现)

2024-03-06 188

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

本文涉及的产品

Redis 开源版，标准版 2GB

云数据库 Tair（兼容Redis），内存型 2GB

简介： spring boot3登录开发-2(1图形验证码接口实现)

前置条件

本文衔接上文，请从上文开始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();
    }
 
}