基于servlet的四位数的验证码

验证码（CAPTCHA）是“Completely Automated Public Turing test to tell Computers and Humans Apart”（全自动区分计算机和人类的图灵测试）的缩写，是一种区分用户是计算机还是人的公共全自动程序。可以防止：恶意破解密码、刷票、论坛灌水，有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试，实际上用验证码是现在很多网站通行的方式（比如招商银行的网上个人银行，百度社区），下面是各种各样的验证码形式。

今天 我用servlet来实现了这个功能。4个字母是： 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J',
            'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W',
            'X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' 每一个随机出现

第一步：在html中加入 需要显示验证码的地方

<script src="../js/login.js" type="text/javascript"></script><div class="input-prepend mt20" title="Password" data-rel="tooltip">      <input id="yzm" type="text" class="textCss05"  name="" style="width:80px;"/>      <img src="../gernerateCodeServlet" id="imgvercode"            style="vertical-align: middle;cursor: pointer;"             onclick="login.changeNewImg();" title="换一张"/> </div>

第二步：通过jQuery获取id并发送servlet请求

chgUrl : function(url){        var timestamp = (new Date()).valueOf();            if((url.indexOf("?")>=0)){            url = url.substring(0,url.indexOf("?"));            }        if((url.indexOf("&")>=0)){                url = url + "×tamp=" + timestamp;            }else{                url = url + "?timestamp=" + timestamp;            }            return url;        },changeNewImg : function() {var imgSrc = $("#imgvercode");        var src = imgSrc.attr("src");        imgSrc.attr("src",login.chgUrl(src));},

第三步：将servlet请求的url进行处理

package com.skyform.admin.controller;import java.awt.Color;import java.awt.Font;import java.awt.Graphics2D;import java.awt.image.BufferedImage;import java.util.Random;import javax.imageio.ImageIO;import javax.servlet.ServletException;import javax.servlet.ServletOutputStream;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.http.HttpSession;public class GernerateCodeServlet extends HttpServlet {// 验证码图片的宽度。private int width = 60;// 验证码图片的高度。private int height = 20;// 验证码字符个数private int codeCount = 4;private int x = 0;// 字体高度private int fontHeight;private int codeY;char[] codeSequence = { 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J','K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W','X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' };/** * 初始化验证图片属性 */public void init() throws ServletException {// 从web.xml中获取初始信息// 宽度String strWidth = this.getInitParameter("width");// 高度String strHeight = this.getInitParameter("height");// 字符个数String strCodeCount = this.getInitParameter("codeCount");// 将配置的信息转换成数值try {if (strWidth != null && strWidth.length() != 0) {width = Integer.parseInt(strWidth);}if (strHeight != null && strHeight.length() != 0) {height = Integer.parseInt(strHeight);}if (strCodeCount != null && strCodeCount.length() != 0) {codeCount = Integer.parseInt(strCodeCount);}} catch (NumberFormatException e) {}x = width / (codeCount + 1);fontHeight = height - 2;codeY = height - 4;}   /*       * 给定范围获得随机颜色       */      private 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);      }       protected void service(HttpServletRequest req, HttpServletResponse resp)throws ServletException, java.io.IOException {// 定义图像bufferBufferedImage buffImg = new BufferedImage(width, height,BufferedImage.TYPE_INT_RGB);Graphics2D g = buffImg.createGraphics();// 创建一个随机数生成器类Random random = new Random();// 将图像填充为白色g.setColor(getRandColor(200,250));           g.fillRect(0, 0, width, height);  // 创建字体，字体的大小应该根据图片的高度来定。// 设置字体。        g.setFont(new Font("Times New Roman",Font.PLAIN,20)); // 画边框。g.drawRect(0, 0, width - 1, height - 1);        g.setColor(getRandColor(160,200));   // 随机产生N条干扰线，使图象中的认证码不易被其它程序探测到。        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);           } // randomCode用于保存随机产生的验证码，以便用户登录后进行验证。StringBuffer randomCode = new StringBuffer();// 随机产生codeCount数字的验证码。for (int i = 0; i < codeCount; i++) {// 得到随机产生的验证码数字。String strRand = String.valueOf(codeSequence[random.nextInt(36)]);// 用随机产生的颜色将验证码绘制到图像中。g.setColor(new Color(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt(110)));   //      调用函数出来的颜色相同，可能是因为种子太接近，所以只能直接生成               g.drawString(strRand,13*i+14,18);    // 将产生的四个随机数组合在一起。randomCode.append(strRand);}// 将四位数字的验证码保存到Session中。HttpSession session = req.getSession();session.setAttribute("validateCode", randomCode.toString());// 禁止图像缓存。resp.setHeader("Pragma", "no-cache");resp.setHeader("Cache-Control", "no-cache");resp.setDateHeader("Expires", 0);resp.setContentType("image/jpeg");// 将图像输出到Servlet输出流中。ServletOutputStream sos = resp.getOutputStream();ImageIO.write(buffImg, "jpeg", sos);sos.close();}}

第四步：发送ajax请求验证填写的验证码是否正确

js代码：

verifyCode : function(username,passwd,code){// 验证验证码$.ajax({url : "../pr/verifyCode",type : 'POST',data : {code : code },async : false,success : function(state) {if(state == "true"){} else if (state == "false") {layer.close(loading);$("#logMsg").addClass("onError").html("*"+"验证码错误");login.changeNewImg();$("#yzm").val("");$("#yzm").focus();return false;} else if (state == "timeout") {// 验证码session超时$("#logMsg").addClass("onError").html("*"+"连接超时");login.changeNewImg();return false;}}});

java代码：

@RequestMapping(value="/verifyCode")@ResponseBodypublic String verifyCode(@RequestParam("code")String code) throws Exception{String  state = null;try {String validateC = (String)request.getSession().getAttribute("validateCode");String veryCode = code;//没有输入验证码的情况if (veryCode == null || "".equals(veryCode)) {state = "false";}// session超时的情况if (validateC == null) {state = "timeout";}//正常验证对错if (validateC.equalsIgnoreCase(veryCode)) {state = "true";} else {state = "false";}} catch (Exception e) {state = "false";}return state;}

第五步：在web.xml里面配置servlet的访问路径和图片的长和宽还有字母个数

<!-- security code  --><servlet><servlet-name>gernerateCodeServlet</servlet-name><servlet-class>com.skyform.admin.controller.GernerateCodeServlet</servlet-class><init-param><param-name>width</param-name><param-value>80</param-value></init-param><init-param><param-name>height</param-name><param-value>22</param-value></init-param><init-param><param-name>codeCount</param-name><param-value>4</param-value></init-param><load-on-startup>2</load-on-startup></servlet>  <servlet>    <servlet-name>verifyCodeServlet</servlet-name>    <servlet-class>com.skyform.admin.controller.verifyCodeServlet</servlet-class>  </servlet><servlet-mapping><servlet-name>gernerateCodeServlet</servlet-name><url-pattern>/gernerateCodeServlet</url-pattern></servlet-mapping>  <servlet-mapping>    <servlet-name>verifyCodeServlet</servlet-name>    <url-pattern>/verifyCodeServlet</url-pattern>  </servlet-mapping>

最后一步：通过点击“换一张”，验证码会重新发送新的url给控制器controller，然后更新验证码操作，点击登陆按钮，会验证 用户所填写的验证码是否正确，返回true或false