bootstrap验证码、spring boot验证码

解决方案简述

在现代Web应用程序中，验证码是保护系统免受自动化攻击（如暴力破解、机器人注册等）的重要手段。通过结合Bootstrap和Spring Boot，我们可以创建一个美观且功能强大的验证码模块。介绍如何使用Bootstrap设计前端界面，并通过Spring Boot生成和验证验证码。

一、基于Spring Boot的验证码生成

1. 引入依赖

在pom.xml文件中添加必要的依赖：

xml

    <!-- Spring Boot Web -->
    
        org.springframework.boot
        spring-boot-starter-web
    </p>

<pre><code><!-- 图片验证码生成器 -->
<dependency>
    <groupId>com.github.cage</groupId>
    <artifactId>cage</artifactId>
    <version>1.0</version>
</dependency>

2. 创建验证码服务类

接下来，我们创建一个名为CaptchaService的服务类来处理验证码的生成与验证：

java
@Service
public class CaptchaService {
    @Autowired
    private ServletContext context;</p>

<pre><code>public String generateCaptcha() {
    // 使用Cage库生成验证码图片
    Cage cage = new DefaultCage();
    BufferedImage image = cage.drawImage();

    // 将验证码文本存储到session中
    HttpSession session = ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes()).getRequest().getSession();
    session.setAttribute("captcha", cage.getToken());

    try {
        // 将图片转换为Base64编码
        ByteArrayOutputStream os = new ByteArrayOutputStream();
        ImageIO.write(image, "png", os);
        byte[] bytes = os.toByteArray();
        Base64.Encoder encoder = Base64.getEncoder();
        return encoder.encodeToString(bytes);
    } catch (IOException e) {
        throw new RuntimeException(e);
    }
}

public boolean validateCaptcha(String userInput) {
    // 从session中获取正确答案
    HttpSession session = ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes()).getRequest().getSession();
    String correctAnswer = (String) session.getAttribute("captcha");

    // 验证用户输入是否正确
    return userInput != null && userInput.equalsIgnoreCase(correctAnswer);
}

}

二、Bootstrap前端展示

1. 创建HTML页面

在src/main/resources/templates/目录下创建一个名为captcha.html的Thymeleaf模板文件：

html
</p>



    <title>验证码示例</title>
    


<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-6">
            
                <div class="mb-3">
                    <label for="captchaInput" class="form-label">请输入验证码：</label>
                    
                </div>
                <div class="mb-3">
                    <img alt="验证码" class="w-100" />
                </div>
                <button type="submit" class="btn btn-primary">提交</button>
            
        </div>
    </div>
</div>



<p>

2. 控制器代码

我们需要编写控制器来处理请求：

java
@Controller
public class CaptchaController {</p>

<pre><code>@Autowired
private CaptchaService captchaService;

@GetMapping("/")
public String showCaptcha(Model model) {
    // 生成新的验证码并传递给视图
    String captchaImage = captchaService.generateCaptcha();
    model.addAttribute("captchaImage", captchaImage);
    return "captcha";
}

@PostMapping("/validate")
public String validate(@RequestParam("captcha") String userInput, Model model) {
    if (captchaService.validateCaptcha(userInput)) {
        model.addAttribute("message", "验证码正确！");
    } else {
        model.addAttribute("message", "验证码错误，请重试。");
        // 重新生成验证码
        model.addAttribute("captchaImage", captchaService.generateCaptcha());
    }
    return "captcha";
}

}