### JSP生成页面验证码的方法详解
#### 一、引言
在Web开发中，验证码是一种常用的用户交互方式，用于防止机器人的自动攻击或恶意操作。本文将详细介绍如何使用JSP技术来生成一个简单的随机验证码图片，并展示其在实际场景中的应用。
#### 二、生成随机验证码图片的JSP页面
##### 1. image.jsp - 生成随机验证码图片的JSP页面
```jsp
<%@ page contentType="image/jpeg" import="java.awt.*, java.awt.image.*, java.util.*, javax.imageio.*" %>
<%!
Color getRandColor(int fc, int bc) {
Random random = new Random();
if (fc > 255) fc = 255;
if (bc > 255) bc = 255;
int r = fc + random.nextInt(bc - fc);
int g = fc + random.nextInt(bc - fc);
int b = fc + random.nextInt(bc - fc);
return new Color(r, g, b);
}
%>
<%
out.clear(); // 这句针对Resin服务器，如果是Tomcat可以不要这句
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
int width = 60, height = 20;
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
Graphics g = image.getGraphics();
Random random = new Random();
g.setColor(getRandColor(200, 250));
g.fillRect(0, 0, width, height);
g.setFont(new Font("Times New Roman", Font.PLAIN, 18));
g.setColor(getRandColor(160, 200));
for (int i = 0; i < 155; i++) {
int x = random.nextInt(width);
int y = random.nextInt(height);
int xl = random.nextInt(12);
int yl = random.nextInt(12);
g.drawLine(x, y, x + xl, y + yl);
}
String sRand = "";
for (int i = 0; i < 4; i++) {
String rand = String.valueOf(random.nextInt(10));
sRand += rand;
g.setColor(new Color(20 + random.nextInt(110), 20 + random.nextInt(110), 20 + random.nextInt(110)));
g.drawString(rand, 13 * i + 6, 16);
}
// 将认证码存入SESSION
session.setAttribute("rand", sRand);
g.dispose();
ImageIO.write(image, "JPEG", response.getOutputStream());
%>
```
##### 2. 代码解析
- **导入必要的包**：为了生成图片，我们需要导入`java.awt.*`等包。
- **设置响应头**：确保浏览器不会缓存生成的图片。
- **创建图片对象**：定义了图片的宽度和高度，并创建了一个`BufferedImage`对象。
- **绘制背景**：使用`getRandColor`方法随机生成背景颜色，并填充整个图片。
- **添加噪点**：通过在图片上随机绘制直线来增加噪音，使图片更加难以被机器识别。
- **生成验证码字符**：随机生成四个数字作为验证码，并将其绘制到图片上。
- **保存验证码到Session**：将生成的验证码字符串保存到Session中，以便后续进行验证。
- **输出图片**：使用`ImageIO`类将图片输出到客户端。
#### 三、逻辑页面 - 验证码输入与验证
##### 1. logic.jsp - 登陆页面
```jsp
<%@ page contentType="text/html; charset=gbk" %>
<%@ page language="java" import="java.sql.*" errorPage="" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>用户登录</title>
<script language="javascript">
function loadimage() {
document.getElementById("randImage").src = "image.jsp?" + Math.random();
}
</script>
</head>
<body>
<table width="256" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<form action="validate.jsp" method="post" name="loginForm">
<tr>
<td width="118" height="28">用户名:</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td height="28">密码:</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td height="28">验证码:</td>
<td>
<input type="text" name="checkcode" style="width: 50px;">
<img src="image.jsp" id="randImage" onclick="loadimage()" />
</td>
</tr>
<tr>
<td height="28"></td>
<td><input type="submit" value="登录"></td>
</tr>
</form>
</table>
</body>
</html>
```
##### 2. 代码解析
- **HTML表单**：包含了用户名、密码和验证码输入框。
- **JavaScript函数**：`loadimage()`函数用于重新加载验证码图片，当用户点击图片时会触发该事件，确保每次点击都能获取新的验证码。
- **表单提交**：表单提交到`validate.jsp`页面进行验证。
#### 四、验证码验证逻辑 - validate.jsp
在`validate.jsp`页面中，通常会从Session中取出之前保存的验证码，与用户输入的验证码进行比较，判断是否一致。如果一致，则允许登录；如果不一致，则提示错误信息。
```jsp
<%@ page contentType="text/html; charset=gbk" %>
<%@ page language="java" import="java.sql.*" errorPage="" %>
<%
String checkCode = request.getParameter("checkcode");
String sessionCheckCode = (String) session.getAttribute("rand");
if (checkCode != null && sessionCheckCode != null && checkCode.equalsIgnoreCase(sessionCheckCode)) {
out.println("登录成功！");
} else {
out.println("验证码错误，请重新输入！");
response.sendRedirect("logic.jsp");
}
%>
```
#### 五、总结
本文详细介绍了如何使用JSP技术实现一个简单的验证码系统，包括生成随机验证码图片、用户界面以及验证逻辑。通过这种方式，我们可以有效地增强Web应用程序的安全性，防止恶意用户或机器人程序的攻击。此外，还可以根据实际需求对验证码的样式、复杂度进行调整，以适应不同的应用场景。
