登录生成随机验证码

点击创业 

登录+验证码。

验证码生成是单独的一个servlet，通过web.xml进行拦截。

先贴web.xml配置代码，很简单。

[html]  view plain  copy

1. <servlet>  
2.     <servlet-name>/CheckCode</servlet-name>  
3.     <servlet-class>com.wswhr.LoginServer.servlet.CheckCode</servlet-class>  
4. </servlet>  
5. <servlet-mapping>  
6.     <servlet-name>/CheckCode</servlet-name>  
7.     <url-pattern>/CheckCode</url-pattern>  
8. </servlet-mapping>  

然后，是这个checkCode的代码。

[java]  view plain  copy

1. package com.wswhr.LoginServer.servlet;  
2.   
3. import java.awt.Color;  
4. import java.awt.Font;  
5. import java.awt.Graphics;  
6. import java.awt.image.BufferedImage;  
7. import java.io.ByteArrayOutputStream;  
8. import java.io.IOException;  
9.   
10. import javax.imageio.ImageIO;  
11. import javax.servlet.ServletException;  
12. import javax.servlet.ServletOutputStream;  
13. import javax.servlet.http.HttpServlet;  
14. import javax.servlet.http.HttpServletRequest;  
15. import javax.servlet.http.HttpServletResponse;  
16. import javax.servlet.http.HttpSession;  
17.   
18. //import cn.com.daxtech.framework.security.UidPwdAuthenticationFilter;  
19.   
20. @SuppressWarnings("serial")  
21. public class CheckCode extends HttpServlet  
22.   
23. {  
24.     private static int WIDTH = 60;  
25.     private static int HEIGHT = 20;  
26.   
27.     public void doGet(HttpServletRequest request, HttpServletResponse response)  
28.             throws ServletException, IOException {  
29.         HttpSession session = request.getSession();  
30.         response.setContentType("image/jpeg");  
31.         ServletOutputStream sos = response.getOutputStream();  
32.         // 设置浏览器不要缓存此图片   
33.         response.setHeader("Pragma", "No-cache");  
34.         response.setHeader("Cache-Control", "no-cache");  
35.         response.setDateHeader("Expires", 0);  
36.   
37.         // 创建内存图象并获得其图形上下文   
38.         BufferedImage image = new BufferedImage(WIDTH, HEIGHT,  
39.                 BufferedImage.TYPE_INT_RGB);  
40.         Graphics g = image.getGraphics();  
41.   
42.         // 产生随机的认证码   
43.         char[] rands = generateCheckCode();  
44.         // 产生图像   
45.         drawBackground(g);  
46.         drawRands(g, rands);  
47.         // 结束图像 的绘制 过程， 完成图像   
48.         g.dispose();  
49.         // 将图像输出到客户端   
50.         ByteArrayOutputStream bos = new ByteArrayOutputStream();  
51.         ImageIO.write(image, "JPEG", bos);  
52.         byte[] buf = bos.toByteArray();  
53.         response.setContentLength(buf.length);  
54.         // 下面的语句也可写成： bos.writeTo(sos);   
55.         sos.write(buf);  
56.         bos.close();  
57.         sos.close();  
58.         // 将当前验证码存入到 Session 中   
59.         session.setAttribute("validateCode", new String(rands));  
60.         //session.setAttribute(UidPwdAuthenticationFilter.VALIDATE_CODE, new String(rands));  
61.         // 直接使用下面的代码将有问题， Session 对象必须在提交响应前获得   
62.         //request.getSession().setAttribute("check_code",new String(rands));   
63.     }  
64.   
65.     private char[] generateCheckCode() {  
66.         // 定义验证码的字符表   
67.         String chars = "2345678abcdefghjkmnprstuwxz";  
68.         char[] rands = new char[4];  
69.         for (int i = 0; i < 4; i++) {  
70.             int rand = (int) (Math.random() * chars.length());  
71.             rands[i] = chars.charAt(rand);  
72.         }  
73.         return rands;  
74.     }  
75.   
76.     private void drawRands(Graphics g, char[] rands) {  
77.         g.setColor(Color.BLACK);  
78.         g.setFont(new Font(null, Font.ITALIC | Font.BOLD, 18));  
79.         // 在不同的高度上输出验证码的每个字符            
80.         g.drawString("" + rands[0], 1, 17);  
81.         g.drawString("" + rands[1], 16, 15);  
82.         g.drawString("" + rands[2], 31, 18);  
83.         g.drawString("" + rands[3], 46, 16);  
84.         // System.out.println(rands);   
85.     }  
86.   
87.     private void drawBackground(Graphics g) {  
88.         // 画背景   
89.         g.setColor(new Color(0xDCDCDC));  
90.         g.fillRect(0, 0, WIDTH, HEIGHT);  
91.         // 随机产生 120 个干扰点   
92.         for (int i = 0; i < 120; i++) {  
93.             int x = (int) (Math.random() * WIDTH);  
94.             int y = (int) (Math.random() * HEIGHT);  
95.             int red = (int) (Math.random() * 255);  
96.             int green = (int) (Math.random() * 255);  
97.             int blue = (int) (Math.random() * 255);  
98.             g.setColor(new Color(red, green, blue));  
99.             g.drawOval(x, y, 1, 0);  
100.         }  
101.     }  
102. }  

最后，是使用验证码的jsp代码，以及JS代码

<label>
    <span>
        <span class="lbl input-icon input-icon-right">
            <input id="validateCode" name="validateCode" type="text" class="span12"
            maxlength="15" placeholder="验证码" />
            <i class="icon-retweet">
            </i>
        </span>
        <span class="lbl">
            <img src="${ctx}/CheckCode" id="yzmPic" οnclick="reloadCheckCode()" style="cursor:pointer;"
            title="点击刷新验证码" />
            <a href="#" οnclick="reloadCheckCode()" data-action="reload">
                <i class="icon-refresh">
                </i>
            </a>
        </span>
    </span>
</label>

js代码如下：

[html]  view plain  copy

1. function reloadCheckCode(){  
2.     document.getElementById("yzmPic").src = $("#ctx").val()+"/CheckCode?r=" + new Date().getTime();  
3. }  

最后的  r=  new Date().getTime();    相当于，生成一个随机数，避免缓存， 否则，在servlet中，会一直生成同一个验证码(并不是没有生成，而是一直生成同一个。)

[html]  view plain  copy

1. <input type="hidden" id="ctx" value="${pageContext.request.contextPath}"/>