java web验证码实现

验证码实现

网上大都是通过servlet实现的验证码，入下图逻辑：

步骤：

1、请求登录页面时随机生成验证码字符串；

2、将生成对验证码字符串存到session中；

3、根据验证码字符串生成验证码图片，然后将验证码图片输出到客户展示；

4、提交登录请求时用户输入的验证码字符串与session中的字符串做比对。

现在很多人都采用Spring mvc，为了更加灵活，解耦servlet，可以写一个验证码制作器：

import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Calendar;
import java.util.Random;
public class ValidateCodeMaker {
    private int imgWidth = 80; ／／验证码图片宽度
    private int imgHeight = 30; ／／验证码图片高度     
    private int charCount = 4;  ／／验证码字符个数
    public ValidateCodeMaker() {
    }
    public ValidateCodeMaker(int imgWidth, int imgHeight, int charCount) {
        this.imgWidth = imgWidth;
        this.imgHeight = imgHeight;
        this.charCount = charCount;
    }
    ／／客户端生成验证码图片，并且验证码字符串存session
    public void generateValidateCode(HttpSession session,HttpServletResponse response) throws IOException {
        String validateCode = randomCode(charCount);
        session.setAttribute(Constants.VALIDATE_CODE,validateCode);
        session.setAttribute(Constants.VALIDATE_CODE_TIEM, Calendar.getInstance());
       // request.getSession().setAttribute("validateCode",validateCode);
        BufferedImage image = getCodeImage(validateCode);
        response.setContentType("image/jpeg");
        OutputStream out = response.getOutputStream();
        ImageIO.write(image,"jpeg",out);
    }
    ／／用户输入的验证码与session中的验证码字符串对比校验
    public static boolean verifyValidateCode(HttpSession session,String checkCode){
        String validateCode = (String) session.getAttribute(Constants.VALIDATE_CODE);
        Calendar validateCodeTime = (Calendar) session.getAttribute(Constants.VALIDATE_CODE_TIEM);
        validateCodeTime.add(Calendar.MINUTE,5);         //验证码5分钟有效期
        Calendar now = Calendar.getInstance();
        if(now.before(validateCodeTime) && validateCode.equals(checkCode.trim().toUpperCase()) ){
            session.removeAttribute(Constants.VALIDATE_CODE);
            session.removeAttribute(Constants.VALIDATE_CODE_TIEM);
            return true;
        }
        return false;
    }
    ／／生成验证码图片
    public BufferedImage getCodeImage(String validateCode){
        BufferedImage image = 
             new BufferedImage(imgWidth,imgHeight,BufferedImage.TYPE_INT_RGB);  ／／画布
        Graphics g = image.getGraphics();     ／／画笔
        Random r = new Random();
        ／／设置画笔颜色，grb值偏大一些可使背景色偏淡
        g.setColor(new Color(r.nextInt(155)+100,r.nextInt(155)+100,r.nextInt(155)+100)); 
        g.fillRect(0, 0, imgWidth, imgHeight);    ／／设置验证码图片背景色
        g.setColor(new Color(0, 0, 0));
    ／／Font：参数1－>字体类别  参数2->字体样式 参数3->字体size
        g.setFont(new Font(null,Font.ITALIC+Font.BOLD,20)); 
        g.drawString(validateCode,10,20);         ／／将字符串画到图片上
        //加上一些干扰线
        for(int i=0;i<8;i++){
            g.drawLine(r.nextInt(80),
                    r.nextInt(30),
                    r.nextInt(80),
                    r.nextInt(30));
        }
        g.dispose();
        return image;
    }
   //生成随机字符串
    public String randomCode(int size){
        String chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
        String code = "";
        Random r = new Random();
        for(int i=0;i<size;i++){
            code +=chars.charAt(r.nextInt(chars.length()));
        }
        return code;
    }
}

页面中验证码区域：

<label>验证码：</label>
<input name="checkCode">
<img id="img1" src="${request.contextPath}/requestCheckCode" 
    οnclick="this.src='${request.contextPath}/requestCheckCode?' + Math.random();"/>
<a href="javascript:;"
   οnclick="document.getElementById('img1').src='${request.contextPath}/requestCheckCode?' + Math.random();">看不清，换一个</a>

客户端请求时，因为IO开销较大，验证码显示会迟与页面的加载，可采用一点小技巧处理这种情况：

比如：客户端请求时，因为验证码图片是异步加载的，可以先隐藏页面的验证码区域，当某一个输入框失去焦点时在将验证码区域显示出来。