Day14-Servlet后端验证码的实现

图片验证码的生成采用的是Kaptcha；

Kaptcha是一个高度可配置的验证码生成工具，由Google开源。它通过一系列配置文件和插件，实现了将验证码字符串自动转换成图片流，并可以与session进行关联，从而在验证过程中使用；

具体实现步骤如下：

第一步：添加依赖

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

 第二步：配置验证码工具类

@WebServlet("/KaptchaCode")
public class Kaptcha extends HttpServlet {
    private Producer producer;

    @Override
    public void init() {
        Properties properties = new Properties();
        //设置图片边框
        properties.setProperty("kaptcha.border", "yes");
        //设置图片边框为蓝色
        properties.setProperty("kaptcha.border.color", "blue");
        //背景颜色渐变开始
        properties.put("kaptcha.background.clear.from", "127,255,212");
        //背景颜色渐变结束
        properties.put("kaptcha.background.clear.to", "240,255,255");
        // 字体颜色
        properties.put("kaptcha.textproducer.font.color", "black");
        // 文字间隔
        properties.put("kaptcha.textproducer.char.space", "10");
        //如果需要去掉干扰线
        properties.put("kaptcha.noise.impl", "com.google.code.kaptcha.impl.NoNoise");
        // 字体
        properties.put("kaptcha.textproducer.font.names", "Arial,Courier,cmr10,宋体,楷体,微软雅黑");
        // 图片宽度
        properties.setProperty("kaptcha.image.width", "200");
        // 图片高度
        properties.setProperty("kaptcha.image.height", "50");
        // 从哪些字符中产生
        properties.setProperty("kaptcha.textproducer.char.string", "0123456789abcdefghijklmnopqrsduvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ");
        // 字符个数
        properties.setProperty("kaptcha.textproducer.char.length", "4");
        Config config = new Config(properties);
        producer = config.getProducerImpl();
    }
//这里要注意了这个验证码生成只支持get方法
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 生成一个文本验证码
        String code = producer.createText();
        // 根据验证码文本生成一张图片
        BufferedImage image = producer.createImage(code);
        // 设置响应的内容类型为图片格式
        resp.setContentType("image/jpeg");
        // 将图片写入到响应的输出流中，以jpg格式保存
        ImageIO.write(image, "jpg", resp.getOutputStream());
        //session是给登录验证的逻辑代码传参的
        HttpSession session = req.getSession();
        session.setAttribute("code", code);
    }
}

第三步：前端/后端渲染代码引入 

<%--
  Created by IntelliJ IDEA.
  User: 21222
  Date: 2024/7/29
  Time: 上午10:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生信息管理系统登录页</title>
<%--   这里的样式代码放在文章末尾了太占位置了--%>
</head>
<body>
<div class="box">
    <h1>学生信息管理系统登录页</h1>
    <form action="/javaweb/Login" method="post">
        <div class="form-group">
            <label for="user">账号</label>
            <input type="text" id="user" name="user" placeholder="请输入账号">
        </div>

        <div class="form-group">
            <label for="pw">密码</label>
            <input type="text" id="pw" name="pw" placeholder="请输入密码">
        </div>

        <div class="captcha-container">
            <div class="form-group">
                <label for="yzm">验证码</label>
                <input type="text" id="yzm" name="yzm" placeholder="请输入验证码">
            </div>
<%--            验证码的引入--%>
            <img src="/javaweb/KaptchaCode" alt="验证码" width="120" onclick="this.src=this.src+'?'+Math.random()">
        </div>

        <button type="submit">登录</button>
    </form>
</div>
</body>
</html>

css样式代码 

<style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f7f7f7;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .box {
            width: 360px;
            background-color: #fff;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        h1 {
            font-size: 26px;
            margin-bottom: 20px;
            color: #333;
            text-align: center;
        }

        form {
            width: 100%;
        }

        .form-group {
            margin-bottom: 20px;
            display: flex;
            flex-direction: column;
        }

        .form-group label {
            margin-bottom: 5px;
            font-size: 14px;
            color: #555;
        }

        .form-group input[type="text"] {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            box-sizing: border-box;
            width: 100%;
        }

        .form-group input[type="text"]:focus {
            border-color: #4CAF50;
            outline: none;
        }

        .captcha-container {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .captcha-container img {
            margin-left: 10px;
            cursor: pointer;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        button {
            background-color: #4CAF50;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s ease;
            width: 100%;
        }

        button:hover {
            background-color: #45a049;
        }
    </style>