给JSP页面添加验证码

妖狐艹你老母 2022-09-30 13:50 239阅读 0赞

前段时间学习Struts2做了个验证码的小例子，今天在火狐下查看遇到点问题，在这里记录一下。

制作图形验证码关键在于编写生成图形的Servlet

**\[java\]**  [view plain][]   [copy][view plain]

1.  **package** com.petrochina.servlet;  
2.    
3.  **import** <a href="http://lib.csdn.net/base/javase" **class**='replace\_word' title="Java SE知识库" target='\_blank' style='color:\#df3434; font-weight:bold;'>Java</a>.awt.Color;  
4.  **import** java.awt.Font;  
5.  **import** java.awt.Graphics;  
6.  **import** java.awt.image.BufferedImage;  
7.  **import** java.io.IOException;  
8.  **import** java.util.Random;  
9.    
10. **import** javax.imageio.ImageIO;  
11. **import** javax.servlet.ServletException;  
12. **import** javax.servlet.http.HttpServlet;  
13. **import** javax.servlet.http.HttpServletRequest;  
14. **import** javax.servlet.http.HttpServletResponse;  
15. **import** javax.servlet.http.HttpSession;  
16.   
17. **public** **class** AuthImg **extends** HttpServlet \{  
18.   
19.     // 设置图形验证码中字符串的字体和大小  
20.     **private** Font myFont = **new** Font("Arial Black", Font.PLAIN, 16);  
21.   
22.     @Override  
23.     **public** **void** init() **throws** ServletException \{  
24.         **super**.init();  
25.     \}  
26.   
27.     // 生成随机颜色  
28.     Color getRandColor(**int** fc, **int** bc) \{  
29.         Random random = **new** Random();  
30.         **if** (fc > 255)  
31.             fc = 255;  
32.         **if** (bc > 255)  
33.             bc = 255;  
34.         **int** r = fc + random.nextInt(bc - fc);  
35.         **int** g = fc + random.nextInt(bc - fc);  
36.         **int** b = fc + random.nextInt(bc - fc);  
37.         **return** **new** Color(r, g, b);  
38.     \}  
39.   
40.     @Override  
41.     **public** **void** service(HttpServletRequest request, HttpServletResponse response) **throws** ServletException, IOException \{  
42.   
43.         // 阻止生成的页面内容被缓存，保证每次重新生成随机验证码  
44.         response.setHeader("Pragma", "No-cache");  
45.         response.setHeader("Cache-Control", "no-cache");  
46.         response.setDateHeader("Expires", 0);  
47.         response.setContentType("image/jpeg");  
48.         // 指定图形验证码图片的大小  
49.         **int** width = 100, height = 20;  
50.         // 生成一张新图片  
51.         BufferedImage image = **new** BufferedImage(width, height, BufferedImage.TYPE\_INT\_RGB);  
52.         // 在图片中绘制内容  
53.         Graphics g = image.getGraphics();  
54.         Random random = **new** Random();  
55.         g.setColor(getRandColor(200, 250));  
56.         g.fillRect(1, 1, width - 1, height - 1);  
57.         g.setColor(**new** Color(102, 102, 102));  
58.         g.drawRect(0, 0, width - 1, height - 1);  
59.         g.setFont(myFont);  
60.         // 随机生成线条，让图片看起来更加杂乱  
61.         g.setColor(getRandColor(160, 200));  
62.         **for** (**int** i = 0; i < 155; i++) \{  
63.             **int** x = random.nextInt(width - 1);// 起点的x坐标  
64.             **int** y = random.nextInt(height - 1);// 起点的y坐标  
65.             **int** x1 = random.nextInt(6) + 1;// x轴偏移量  
66.             **int** y1 = random.nextInt(12) + 1;// y轴偏移量  
67.             g.drawLine(x, y, x + x1, y + y1);  
68.         \}  
69.         // 随机生成线条，让图片看起来更加杂乱  
70.         **for** (**int** i = 0; i < 70; i++) \{  
71.             **int** x = random.nextInt(width - 1);  
72.             **int** y = random.nextInt(height - 1);  
73.             **int** x1 = random.nextInt(12) + 1;  
74.             **int** y1 = random.nextInt(6) + 1;  
75.             g.drawLine(x, y, x - x1, y - y1);  
76.         \}  
77.   
78.         // 该变量用来保存系统生成的随机字符串  
79.         String sRand = "";  
80.         **for** (**int** i = 0; i < 6; i++) \{  
81.             // 取得一个随机字符  
82.             String tmp = getRandomChar();  
83.             sRand += tmp;  
84.             // 将系统生成的随机字符添加到图形验证码图片上  
85.             g.setColor(**new** Color(20 + random.nextInt(110), 20 + random.nextInt(110), 20 + random.nextInt(110)));  
86.             g.drawString(tmp, 15 \* i + 10, 15);  
87.         \}  
88.   
89.         // 取得用户Session  
90.         HttpSession session = request.getSession(**true**);  
91.         // 将系统生成的图形验证码添加  
92.         session.setAttribute("rand", sRand);  
93.         g.dispose();  
94.         // 输出图形验证码图片  
95.         ImageIO.write(image, "JPEG", response.getOutputStream());  
96.   
97.     \}  
98.   
99.     // 随机生成一个字符  
100.     **private** String getRandomChar() \{  
101.         **int** rand = (**int**) Math.round(Math.random() \* 2);// 将0～2的小数四舍五入生成整数  
102.         **long** itmp = 0;  
103.         **char** ctmp = '/u0000';  
104.         // 根据rand的值来决定是生成一个大写字母、小写字母和数字  
105.         **switch** (rand) \{  
106.         // 生成大写字母的情形  
107.         **case** 1:  
108.             itmp = Math.round(Math.random() \* 25 + 65);  
109.             ctmp = (**char**) itmp;  
110.             **return** String.valueOf(ctmp);  
111.             // 生成小写字母  
112.         **case** 2:  
113.             itmp = Math.round(Math.random() \* 25 + 97);  
114.             ctmp = (**char**) itmp;  
115.             **return** String.valueOf(ctmp);  
116.             // 生成数字  
117.         **default**:  
118.             itmp = Math.round(Math.random() \* 9);  
119.             **return** String.valueOf(itmp);  
120.         \}  
121.     \}  
122. \}

在web.xml中添加Servlet配置

**\[xhtml\]**  [view plain][]   [copy][view plain]

1.    
2.  **<****servlet****>**  
3.      **<****servlet-name****>**authImg**</****servlet-name****>**  
4.      **<****servlet-class****>**com.petrochina.servlet.AuthImg**</****servlet-class****>**  
5.  **</****servlet****>**  
6.  **<****servlet-mapping****>**  
7.      **<****servlet-name****>**authImg**</****servlet-name****>**  
8.      **<****url-pattern****>**/authImg**</****url-pattern****>**  
9.  **</****servlet-mapping****>**

注册页面regist.jsp

**\[xhtml\]**  [view plain][]   [copy][view plain]

1.  **<**%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%**>**  
2.  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"**>**  
3.  **<****html****>**  
4.  **<****head****>**  
5.  **<****meta** http-equiv="Content-Type" content="text/html; charset=UTF-8"**>**  
6.  **<****title****>**注册页面**</****title****>**  
7.  **<****mce:script** type="text/**<****a** href="http://lib.csdn.net/base/javascript" class='replace\_word' title="JavaScript知识库" target='\_blank' style='color:\#df3434; font-weight:bold;'**>**JavaScript**</****a****>**" src="js/**<****a** href="http://lib.csdn.net/base/jquery" class='replace\_word' title="jQuery知识库" target='\_blank' style='color:\#df3434; font-weight:bold;'**>**jQuery**</****a****>**.1.4.2.js" mce\_src="js/jquery.1.4.2.js"**>****</****mce:script****>**  
8.  **<****mce:script** type="text/javascript"**>**<!--  
9.  //刷新验证码  
10. function refresh()  
11. \{  
12. document.getElementById("authImg").src="authImg?now="\+new Date();//使用时间作为参数避免浏览器从缓存取图片  
13. \}  
14. // --**>****</****mce:script****>**  
15. **</****head****>**  
16. **<****body****>**  
17. **<****form** action="registe.action" method="post" id="registe"**>**  
18. **<****table****>**  
19.     **<****caption****>****<****h2****>**用户注册**</****h2****>****</****caption****>**  
20.     **<****tr****>**  
21.         **<****td****>**用 户 名：**</****td****>****<****td****>****<****input** type="text" name="username" id="username"**/>****</****td****>**  
22.     **</****tr****>**  
23.     **<****tr****>**  
24.         **<****td****>**密  码：**</****td****>****<****td****>****<****input** type="text" name="password" id="password"**/>** **</****td****>**  
25.     **</****tr****>**  
26.     **<****tr****>**  
27.         **<****td****>**确认密码：**</****td****>****<****td****>****<****input** type="text" name="chkpassword"**/>** **</****td****>**  
28.     **</****tr****>**  
29.     **<****tr****>**  
30.         **<****td****>**Email：**</****td****>****<****td****>****<****input** type="text" name="email"**/>** **</****td****>**  
31.     **</****tr****>**  
32.     **<****tr****>**  
33.         **<****td****>**验证码：**</****td****>****<****td** valign="bottom"**>****<****input** type="text" name="vercode" size="10"**/>** **<****img** alt="" src="authImg" mce\_src="authImg" id="authImg" align="absmiddle"**>****<****a** href="\#" mce\_href="\#" onclick="refresh()"**>****<****span** style="font-size:12px" mce\_style="font-size:12px"**>**刷新验证码**</****span****>****</****a****>****</****td****>**  
34.     **</****tr****>**  
35.     **<****tr****>**  
36.         **<****td** colspan="2"**>****<****input** type="submit" value="提交"**/>****<****input** type="reset" value="重填"**/>****</****td****>**  
37.     **</****tr****>**  
38. **</****table****>**  
39. **</****form****>**  
40. **</****body****>**  
41. **</****html****>**

后台RegistAction

**\[java\]**  [view plain][]   [copy][view plain]

1.  @Override  
2.      **public** String execute() **throws** Exception \{  
3.          Map session = ActionContext.getContext().getSession();  
4.          String ver2 = (String) session.get("rand");  
5.          session.put("rand", **null**);  
6.          // 判断验证码是否正确  
7.          **if** (vercode.equals(ver2)) \{  
8.              **if** (userManager.validName(username)) \{  
9.                  **if** (userManager.addUser(username, password, email) > 0)  
10.                     **return** SUCCESS;  
11.                 **else**  
12.                     addActionError("注册失败，请重试！");  
13.             \} **else** \{  
14.                 addActionError("该用户名已存在，请重新输入！");  
15.             \}  
16.         \} **else** \{  
17.             addActionError("验证码不匹配，请重新输入");  
18.         \}  
19.         **return** INPUT;  
20.   
21.     \}

结果如下：

![0_1306134069Y106.gif][]

到这里就完成了。但是今天在FireFox3.6下使用firedebug调试时发现会再请求一次验证码，这样导致session中的验证码刷新之后和页面上的不一致，问题截图如下：

![0_1306134410MNmd.gif][]

在关闭firedebug的情况下只请求一次验证码，在IE下也正常，寻思可能是firedebug的问题，但是在网上查找不到相关内容。折腾了半天发现鼠标展开GET authImg的URL时才会第二次请求验证码，所以明白是因为验证码图片没有缓存造成在firedebug调试窗口查看时需要再次请求的缘故。

[view plain]: http://blog.csdn.net/cuihaiyang/article/details/6439780#
[0_1306134069Y106.gif]: /images/20220705/1997839460bb4e74b2d25482f5fbdb6d.png
[0_1306134410MNmd.gif]: /images/20220705/9d3df2c70a384fd2bed5d345bc3bc3c7.png