本文介绍一下web开发中常用的验证码的设计及使用。
image.jsp 用于生成验证码，login.jsp 使用验证码，validate.jsp 用于验证用户输入的验证码是否正确。
image.jsp如下：
<%@ page contentType="image/jpeg" import="java.awt.*, java.awt.image.*,java.util.*,javax.imageio.*" %> <%@ page language="java" pageEncoding="utf-8"%> <%! //生成随机颜色 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); } %> <% response.setHeader("Pragma","No-cache");//设置http消息头，禁用缓存 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(); //创建图像 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)); //设置图形上下文的当前颜色--用于画噪音线 Random random = new Random(); for (int i=0;i<155;i++) //画155条噪音线 { 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++){ //画0-10之间的4个随机数 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.setColor(getRandColor(20,130)); g.drawString(rand,13*i+6,16); //横坐标从6像素开始，字符间隔13像素 } g.dispose(); //释放此图形的上下文以及它使用的所有系统资源 session.removeAttribute("rand"); session.setAttribute("rand",sRand);//将4个随机数添加到当前会话中 ImageIO.write(image, "JPEG",response.getOutputStream() );//将image按jpeg格式写入到response流中 %>
login.jsp 如下：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>My JSP 'MyJsp.jsp' starting page</title> <mce:script language="JavaScript"><!-- function loadimage() { document.getElementById("randImage").src = "fjm/image.jsp?"+Math.random(); } // --></mce:script> </head> <body> <form action ="validate.jsp" method ="post"> <table> <tr> <td>验证码：</td> <td><input name="rand" class="formfieldyzm" id="rand" type="text" maxlength="4" tabindex="3"></td> <td> <img align="center" valign="middle" alt="验证码..." name="randImage" id="randImage" src="/cjfx/fjm/image.jsp" mce_src="cjfx/fjm/image.jsp" width="100" height="20" border="1"/> <a οnclick="loadimage()"> <font color="red"><u>换一个</u></font></a> </td> <td><button type ="submit" action="">提交</button></td> </tr> </table> </form> </body> </html>
validate.jsp 如下：
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>My JSP 'MyJsp1.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css" mce_href="styles.css"> --> </head> <body> <% String str = ""; String usrRand = request.getParameter("rand"); String sysRand = session.getAttribute("rand").toString(); if (usrRand.equals(sysRand)) str = "success!"; else str = "failure!"; %> 用户输入验证码：<%=request.getParameter("rand")%> 系统生成验证码：<%=sysRand %> <%=str%><br> </body> </html>
