在JSP页面中动态生成图片验证码的方法实例

下面是详细讲解在JSP页面中动态生成图片验证码的方法实例的完整攻略，包含两条示例。

1. 准备工作

首先，我们需要在项目中引入kaptcha依赖，以便使用该工具生成验证码图片和文字。在Maven项目中，可以在pom.xml文件中添加以下依赖：

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

在引入依赖之后，我们需要在WEB-INF目录下创建一个名为kaptcha的子目录，并在该目录下创建一个名为kaptcha.properties的文件，用于配置kaptcha生成验证码的相关参数。以下为示例的kaptcha.properties文件内容：

kaptcha.border = yes
kaptcha.border.color = black
kaptcha.border.thickness = 1
kaptcha.textproducer.font.color=black
kaptcha.textproducer.char.space=5
kaptcha.textproducer.font.names=Arial, Verdana, Times New Roman
kaptcha.image.width = 135
kaptcha.image.height = 50
kaptcha.textproducer.char.length = 4
kaptcha.textproducer.char.string=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789

2. 示例一

在 JSP 页面中设置验证码功能，具体做法如下：

1. 在 JSP 页面中添加以下代码：

<%@ page language="java" contentType="text/html; charset=UTF-8">
<%@ page import="com.google.code.kaptcha.Constants" %>
<%@ page import="com.google.code.kaptcha.Producer" %>
<%@ page import="com.google.code.kaptcha.util.Config" %>
<%@ page import="java.awt.image.BufferedImage" %>
<%@ page import="javax.imageio.ImageIO" %>
<%
// 读取 kaptcha.properties 配置文件
Config config = new Config(getServletContext().getInitParameter("kaptchaConfig"));
// 创建 kaptcha 验证码生成器
Producer kaptchaProducer = config.getProducerImpl();
// 生成验证码
String captchaText = kaptchaProducer.createText();
request.getSession().setAttribute(Constants.KAPTCHA_SESSION_KEY, captchaText);
BufferedImage captchaImage = kaptchaProducer.createImage(captchaText);
// 输出验证码图片
ImageIO.write(captchaImage, "jpg", response.getOutputStream());
%>

1. 在需要使用验证码的表单中添加以下代码：

<form action="login" method="post">
    <!-- 增加输入验证码的 input 框 -->
    <p>
        <label>验证码：</label>
        <input type="text" name="captcha" />
    </p>
    <p>
        <label>用户名：</label>
        <input type="text" name="username" />
    </p>
    <p>
        <label>密码：</label>
        <input type="password" name="password" />
    </p>
    <p>
        <input type="submit" value="登录" />
    </p>
</form>

1. 在后端处理登录请求时，验证用户输入的验证码是否正确：

String captcha = request.getParameter("captcha");
String expectedCaptcha = (String) request.getSession().getAttribute(Constants.KAPTCHA_SESSION_KEY);
if (captcha == null || !captcha.equalsIgnoreCase(expectedCaptcha)) {
    // 验证码错误，处理逻辑
} else {
    // 验证码正确，继续登录处理
}

这样，一个简单的 JSP 页面动态生成图片验证码的示例就做好了。

3. 示例二

除了使用 JSP 页面动态生成图片验证码外，我们还可以使用 Spring MVC 的方式实现验证码功能。具体做法如下：

1. 引入 kaptcha 的 Maven 依赖和配置文件，与示例一中相同，这里不再重复。

2. 配置 Spring MVC，添加以下代码：

@Configuration
@EnableWebMvc
public class MvcConfig implements WebMvcConfigurer {

    @Autowired
    private ServletContext servletContext;

    @Bean
    public ServletRegistrationBean<KaptchaServlet> kaptchaServlet() {
        ServletRegistrationBean<KaptchaServlet> registrationBean = new ServletRegistrationBean<KaptchaServlet>();
        registrationBean.setServlet(new KaptchaServlet());
        registrationBean.addUrlMappings("/captcha.jpg");
        registrationBean.setInitParameters(Collections.singletonMap("kaptchaConfig", "classpath:kaptcha.properties"));
        registrationBean.setLoadOnStartup(1);
        return registrationBean;
    }
}

这里我们注册了一个名为 kaptchaServlet 的 KaptchaServlet，并将它映射到了 /captcha.jpg 路径上，表示访问 /captcha.jpg 时会自动调用 KaptchaServlet 来生成验证码图片。

1. 在需要使用验证码的页面中添加以下代码：

<form action="login" method="post">
    <!-- 增加输入验证码的 input 框 -->
    <p>
        <label>验证码：</label>
        <input type="text" name="captcha" />
        <!-- 在 img 标签中嵌入验证码 -->
        <img src="/captcha.jpg" onclick="this.src='/captcha.jpg?' + Math.round(Math.random() * 10000)" />
    </p>
    <p>
        <label>用户名：</label>
        <input type="text" name="username" />
    </p>
    <p>
        <label>密码：</label>
        <input type="password" name="password" />
    </p>
    <p>
        <input type="submit" value="登录" />
    </p>
</form>

在这个示例中，我们将验证码图片作为 <img> 标签的 src 属性值插入到页面中，并在每次点击验证码图片时通过 Math.random() 函数添加一个随机参数（以避免浏览器缓存），实现了动态生成验证码图片的效果。

1. 在后端处理登录请求时，验证用户输入的验证码是否正确，在示例一的代码中已经给出，这里就不再赘述。

至此，我们就完成了使用 Spring MVC 实现动态生成图片验证码的示例。