spring boot验证码的实现

获取验证码的接口

@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>

<!-- 在controller层写入获取验证码的方法 getCode-->

@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-->

<!-- 先在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-->

<!-- 再在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>