spring boot验证码的实现

关注

原创最新推荐文章于 2026-03-02 00:13:01 发布 1.1k 阅读 AI 写同款· GEO 优化 ›

SpringBoot 验证码 框架：Spring Boot 2.3.12.RELEASE环境：JDK 1.8 + MySQL 8.0.79 + Redis 6.2.6自定义验证码生成器，需要继承默认的验证码生成器以数字运算验证码为例定义一个字符串数组，元素是进行运算的数字重写 getText() 方法大致思路运算结果result、运算拼接suC、两个随机数变量因为运算有四种，再定义一个随机数 [0,3] 变量 randomoperands 来判断进行哪种运算将随机数作为数组下标，获取运算的两个数字。阅读详情

获取验证码的接口

@GetMapping("/captcha")
    public Result captcha(){
        //1.借助UUID或者其他工具 生成一个符合要求的验证码
        //生产验证码的工具类，指定宽和高，以及生产的数量4
        //生成的图片 验证码图片对象
        SpecCaptcha specCaptcha = new SpecCaptcha(30,48,4);
        //将工具类生成的验证码图片转意生成小写字符串
        String code = specCaptcha.text().toLowerCase();
        //通过工具产生一个UUID值 为了存储redis定位当前验证码使用的
        String uuid = IdUtil.simpleUUID();
        //2.获取该图片的验证码变成字符串（目的：将验证码存入redis为登录功能实现时做验证准备）
        //存入redis并设置过期时间为2分钟
        this.redisTemplate.opsForValue().set(uuid,code,120,TimeUnit.SECONDS);
        //3.返回给前端信息（验证码的图片base64 uuid redis中的key 验证码字符串）
        //构建map集合进行返回前端json类型
        Map<String,String> map = new HashMap<String,String>(3);
        //uuid返回前端的目的是  为了登录能够拿着uuid值去redis查询获取y
        map.put("uuid",uuid);
        //验证码 cctf kjhu 4位的验证码
        map.put("code",code);
        //验证码的实际图片 base64的图片  前端可以解析base64的图片进行显示
        map.put("captcha",specCaptcha.toBase64());
        //响应200 该请求到达了控制器那就是200
        return Result.ok().put("data",map);
    }

<!-- 验证码 -->
<dependency>
    <groupId>com.github.whvcse</groupId>
    <artifactId>easy-captcha</artifactId>
    <version>${captcha.version}</version>
</dependency>
<!--工具包-->
<dependency>
    <groupId>cn.hutool</groupId>
    <artifactId>hutool-all</artifactId>
    <version>${hutool.version}</version>
</dependency>
<!--redis -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-redis</artifactId>
</dependency>

生产验证码的工具类

    //定义图形验证码的长和宽
    LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(100, 50,5,50);

    //生成的图片 验证码图片对象
    SpecCaptcha specCaptcha = new SpecCaptcha(30,48,4);

springboot验证码

（一）

<!-- 验证码-->
<dependency>
    <groupId>cn.hutool</groupId>
    <artifactId>hutool-all</artifactId>
    <version>5.8.16</version>
</dependency>

@RequestMapping("/getCode")
public void getCode(HttpSession session,HttpServletResponse response) {
    // 随机生成 4 位验证码
    RandomGenerator randomGenerator = new RandomGenerator("0123456789", 4);
    // 定义图片的显示大小
    LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(100, 30);
    lineCaptcha.setGenerator(randomGenerator);
    lineCaptcha.createCode();
    // 将验证码文本存入 session
    session.setAttribute("captcha", lineCaptcha.getCode());
    try(OutputStream outputStream = response.getOutputStream()) {
        // 输出到页面
        lineCaptcha.write(outputStream);
        outputStream.flush();
    } catch (IOException e) {
        throw new RuntimeException(e);
    }
}

要让后端生成的验证码在前端固定地方显示，只需要在<img src="/getCode">中src路径调用接口就行
<div class="item_t">
    <input type="text" class="confirm" placeholder="验证码">
    <img id="cap" src="/getCode" class="captcha">
</div>

（二）

<!-- 先在util层创建一个工具类  VerifyCode-->
package com.bim.bimbookshop.util;

import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Random;

import javax.imageio.ImageIO;

/**
 *  生成验证码的工具类
 * @author 王
 *
 */
public class VerifyCode {
    private int w = 70;//设置缓冲区的宽
    private int h = 35;//设置缓冲区的宽
    private Random r = new Random();
    //// {"宋体", "华文楷体", "黑体", "华文新魏", "华文隶书", "微软雅黑", "楷体_GB2312"}
    private String[] fontNames  = {"宋体", "华文楷体", "黑体", "华文新魏", "华文隶书", "微软雅黑", "楷体_GB2312"};
    //源
    private String codes  = "123456789abcdefghjkmnpqrstuvwxyzABCDEFGHJKMNPQRSTUVWXYZ";
    // 背景颜色
    private Color bgColor  = new Color(255, 255, 255);
    // 保存随机生成的图片当中的内容。
    private String text ;

    // 随机生成颜色
    private Color randomColor () {
        int red = r.nextInt(150);
        int green = r.nextInt(150);
        int blue = r.nextInt(150);
        return new Color(red, green, blue);
    }

    // 随机生成字体
    private Font randomFont () {
        int index = r.nextInt(fontNames.length);
        String fontName = fontNames[index];//根据随机的索引，获取随机字体
        int style = r.nextInt(4);//0,1,2,3, 0：没有任何样式，1,加粗，2，斜体，3，加粗和斜体  PLAIN（0）、BOLD(1)、ITALIC(2) 或 BOLD+ITALIC(3)。
        int size = r.nextInt(5) + 24; //随机生成字号
        return new Font(fontName, style, size);
    }

    // 画干扰线
    private void drawLine (BufferedImage image) {
        int num  = 3;//花三条干扰线
        Graphics2D g2 = (Graphics2D)image.getGraphics();
        for(int i = 0; i < num; i++) {
            int x1 = r.nextInt(w);
            int y1 = r.nextInt(h);
            int x2 = r.nextInt(w);
            int y2 = r.nextInt(h);
            g2.setStroke(new BasicStroke(1.5F));
            g2.setColor(Color.BLUE); //给干扰线设置了颜色
            g2.drawLine(x1, y1, x2, y2);//划线
        }
    }

    //随机生成字符
    private char randomChar () {
        int index = r.nextInt(codes.length());
        return codes.charAt(index);
    }

    // 得到一个缓冲区
    private BufferedImage createImage () {
        // 获取一个缓冲区
        BufferedImage image = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB);
        // 得到一个画笔
        Graphics2D g2 = (Graphics2D)image.getGraphics();
        // 设置画笔的颜色 白颜色
        g2.setColor(this.bgColor);
        // 填充图片的缓冲区。
        g2.fillRect(0, 0, w, h);
        // 将缓冲区返回。
        return image;
    }

    // 调用该方法，可以得到验证码
    public BufferedImage getImage () {
        BufferedImage image = createImage();//创建图片的缓冲区
        Graphics2D g2 = (Graphics2D)image.getGraphics();//得到绘制环境(画笔)
        StringBuilder sb = new StringBuilder();//定义一个容器，用来装在生成的验证码
        //向图片当中画四个字符
        for(int i = 0; i < 4; i++)  {//循环四次，每次生成一个字符
            String s = randomChar() + "";//随机成成一个字符
            sb.append(s); //将生成的字符放在缓冲区
            float x = i * 1.0F * w / 4; //设置当前字符的x轴坐标
            g2.setFont(randomFont()); //设置随机生成的字体
            g2.setColor(randomColor()); //设置字符的随机颜色
            g2.drawString(s, x, h-5); //画图
        }
        this.text = sb.toString(); //随机生成的图片的内容复制给this.text
        drawLine(image); //画干扰线
        return image;
    }

    // 获取图片当中的内容
    public String getText() {
        return text;
    }

    // 保存图片到指定的输出流
    public static void output (BufferedImage image, OutputStream out)
            throws IOException {
        ImageIO.write(image, "JPEG", out);
    }
}

<!-- 再在controller层写一个获取验证码的方法  VerifyCode-->
    /**
     * 获取验证码
     * @param request
     * @param response
     * @throws Exception
     */
    @RequestMapping("/VerifyCode")
    public void VerifyCode(HttpServletRequest request, HttpServletResponse response) throws Exception {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");

        VerifyCode code = new VerifyCode();
        BufferedImage image = code.getImage();  //得到验证码图片
        String text = code.getText(); //得到验证码的文本

        //保存验证码的值
        HttpSession session = request.getSession(); //将验证码的值存放到session中
        session.setAttribute("verify", text);

        VerifyCode.output(image, response.getOutputStream()); //将验证码图片输出到页面
    }

要让后端生成的验证码在前端固定地方显示，只需要在<img src="/getCode">中src路径调用接口就行
<div class="item_t">
    <input type="text" class="confirm" placeholder="验证码">
    <img id="cap" src="/VerifyCode" class="captcha">
</div>