后端返回驗證碼圖片與驗證機制實現

驗證碼是一種防止惡意請求的機制，常用于注冊、登錄等功能中。我們可以通過后端動態生成圖片驗證碼并在前端展示，用戶輸入后由后端校驗。

一、生成驗證碼圖片

使用 Java 中的 BufferedImage 繪圖：

public class CaptchaUtil {

    public static String generateCode(int length) {
        String chars = "ABCDEFGHJKLMNPQRSTUVWXYZ23456789";
        Random rand = new Random();
        StringBuilder sb = new StringBuilder();
        for (int i = 0; i < length; i++) {
            sb.append(chars.charAt(rand.nextInt(chars.length())));
        }
        return sb.toString();
    }

    public static BufferedImage createImage(String code) {
        int width = 120, height = 40;
        BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
        Graphics2D g = image.createGraphics();

        g.setColor(Color.WHITE);
        g.fillRect(0, 0, width, height);
        g.setColor(Color.BLACK);
        g.setFont(new Font("Arial", Font.BOLD, 28));
        g.drawString(code, 20, 30);
        g.dispose();

        return image;
    }
}

二、驗證碼接口返回圖片

@GetMapping("/captcha")
public void getCaptcha(HttpServletResponse response, HttpSession session) throws IOException {
    String code = CaptchaUtil.generateCode(5);
    session.setAttribute("captcha", code);
    BufferedImage image = CaptchaUtil.createImage(code);
    response.setContentType("image/png");
    ImageIO.write(image, "png", response.getOutputStream());
}

三、前端展示驗證碼

<img id="captchaImg" src="/captcha" onclick="this.src='/captcha?'+Math.random()">

四、提交校驗接口

@PostMapping("/verify")
public String verify(@RequestParam String input, HttpSession session) {
    String correct = (String) session.getAttribute("captcha");
    if (correct != null && correct.equalsIgnoreCase(input)) {
        return "驗證碼正確";
    } else {
        return "驗證碼錯誤";
    }
}

五、總結

驗證碼圖片是阻止機器人腳本攻擊的重要手段。配合 Session 或 Redis，可以實現有效校驗和安全防護。