验证码生成--kaptcha

验证码生成与点击重新获取验证码

如图所示，本文档仅展示了验证码的生成和刷新显示。

1. 概述

系统通过生成随机验证码图像和文本。

2. 代码分析

2.1. Maven依赖

<dependency>
	<groupId>com.github.penggle</groupId>
	<artifactId>kaptcha</artifactId>
	<version>2.3.2</version>
</dependency>

• 作用：引入kaptcha库，用于生成验证码图像。

2.2. CaptchaController

@Controller
public class CaptchaController {

    // 处理首页请求，生成验证码图像并返回页面
    @GetMapping("/")
    public String index(HttpSession session, Model model) throws IOException {
        // 生成验证码图像
        byte[] captchaImageBytes = CaptchaUtil.generateCaptchaImage(session);
        // 将验证码图像转换为Base64编码字符串
        String captchaImageBase64String = Base64.getEncoder().encodeToString(captchaImageBytes);
        // 从会话中获取验证码文本
        String captchaText = session.getAttribute("captchaText").toString();
        // 将验证码图像和文本添加到模型中
        model.addAttribute("captchaImage", captchaImageBase64String);
        model.addAttribute("captchaText", captchaText);
        // 返回首页模板
        return "index";
    }

    // 处理获取验证码请求，返回验证码图像和文本
    @GetMapping("/getCaptcha")
    @ResponseBody
    public R getCaptcha(HttpSession session) throws IOException {
        // 生成验证码图像
        byte[] captchaImageBytes = CaptchaUtil.generateCaptchaImage(session);
        // 从会话中获取验证码文本
        String captchaText = session.getAttribute("captchaText").toString();
        // 返回JSON格式数据，包含验证码图像和文本
        return R.ok().put("captchaImageBytes", captchaImageBytes).put("captchaText", captchaText);
    }
}

• 作用：CaptchaController处理与验证码相关的HTTP请求。
• index方法 ：
  • GET请求"/"：生成验证码图像，并将图像的Base64编码字符串和验证码文本添加到模型中，最后返回到前端页面。
• getCaptcha方法 ：
  • GET请求"/getCaptcha"：与index方法类似，生成验证码图像并返回其Base64编码字符串和验证码文本，但以JSON格式返回给前端页面。

2.3. 前端页面

<body>
  <!-- 显示验证码图像 -->
  <img id="captchaImg" th:src="'data:image/jpeg;base64,' + ${captchaImage}" alt="Mountains" style="width:100px;height:50px;">
  <!-- 显示验证码文本 -->
  <h2 id="captchaText" th:text="${captchaText}"></h2>
</body>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  var captchaImg = document.getElementById("captchaImg");
  var captchaText = document.getElementById("captchaText");
  captchaImg.addEventListener("click", function () {
    // 点击验证码图像时，发送GET请求获取新的验证码
    $.ajax({
      url: "/getCaptcha",
      type: "GET",
      success: function (data) {
        // 更新验证码图像和文本
        captchaImg.src = "data:image/png;base64," + data.captchaImageBytes;
        captchaText.innerHTML = data.captchaText;
      }
    });
  })
</script>

• 作用：前端页面通过Thymeleaf模板引擎渲染验证码图像和文本，使用jQuery监听验证码图像的点击事件。
• 点击事件：当验证码图像被点击时，通过AJAX请求"/getCaptcha"获取新的验证码图像和文本，并更新到页面上。

3. 总结

验证码生成与验证系统通过后端生成验证码图像和文本，并通过前端页面呈现给用户。本文档展示了验证码的生成和刷新显示。

4.源码 源码git