JavaWeb验证码的使用

在Java Web开发中，我们经常需要使用到验证码功能，一般情况下，我们可以将产生的验证码保存到服务器端中的session中，这种方式中，是使用服务器来保证验证码的功能。另外，我们也可以采用js产生验证码。

一、服务器产生验证码

后台服务器产生一个验证码的二进制数据流，直接代码如下：

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.GraphicsEnvironment;
import java.awt.Image;
import java.awt.geom.AffineTransform;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Random;

import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.usitao.common.constants.Constant;
import net.usitao.common.constants.ParameterConstants;
import net.usitao.common.constants.ResponseCode;
import net.usitao.common.util.barcode.Code128Barcode;
import net.usitao.model.ResponseObject;

import org.apache.log4j.Logger;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class CodeController extends BasicController {

    private static final long serialVersionUID = 9095917149775028196L;
    private static final Logger log = Logger.getLogger(CodeController.class);
    private final static char[] BASIC_CHARACTERS = "qwertyuioplkjhgfdsazxxcvbnm1234567890".toCharArray();
    private final static int[] DEFAULT_WORD_COLOR = { 0x000000, 0x292421, 0x708069, 0x4169E1, 0x6A5ACD, 0xFF6100, 0x082E54, 0x385E0F, 0xFF0000, 0x802A2A, 0x8A360F, 0x873324, 0x5E2612, 0x8B4513, 0x0000FF, 0xB0171F, 0xB22222, 0xE3170D, 0x228B22, 0x8A2BE2, 0x0B1746, 0x191970, 0x483D8B, 0x191970 };
    private static int WORD_COLOR_SIZE = DEFAULT_WORD_COLOR.length;

    public int codeLength = 4;
    public int width = 110;
    public int height = 30;

    @RequestMapping(value = "/code/generate", method = { RequestMethod.GET })
    public void generateCode(HttpServletRequest request, HttpServletResponse response) {
        // 定义图像buffer
        BufferedImage buffImg = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
        Graphics2D g = buffImg.createGraphics();

        // 创建一个随机数生成器类
        Random random = new Random(System.currentTimeMillis());

        // 将图像填充为白色
        g.setColor(Color.WHITE);
        g.fillRect(0, 0, width, height);

        // 画边框。
        g.setColor(Color.BLACK);
        g.drawRect(0, 0, width - 1, height - 1);

        // 随机产生160条干扰线，使图象中的认证码不易被其它程序探测到。
        for (int i = 0; i < 20; i++) {
            int x = random.nextInt(width) - 5;
            int y = random.nextInt(height) - 5;
            int xl = random.nextInt(width);
            int yl = random.nextInt(height);
            g.setColor(new Color(random.nextInt(255), random.nextInt(255), random.nextInt(255)));
            g.drawLine(x, y, x + xl, y + yl);
        }

        // randomCode用于保存随机产生的验证码，以便用户登录后进行验证。
        StringBuffer randomCode = new StringBuffer();
        int x = 10;
        int y = height - 5;

        g.setColor(Color.BLACK);
        g.setFont(g.getFont().deriveFont(Font.BOLD, 30f));

        // 随机产生codeCount数字的验证码。
        for (int i = 0; i < codeLength; i++) {
            // 得到随机产生的验证码数字。
            String strRand = String.valueOf(BASIC_CHARACTERS[random.nextInt(36)]);

            // 用随机产生的颜色将验证码绘制到图像中。
            g.setColor(new Color(DEFAULT_WORD_COLOR[random.nextInt(WORD_COLOR_SIZE + 1) - 1]));

            /**** 随机缩放文字并将文字旋转指定角度 **/
            // 将文字旋转指定角度
            Graphics2D g2d_word = (Graphics2D) g;
            AffineTransform trans = new AffineTransform();
            //trans.rotate(random.nextInt(30) * 3.14 / 180);
            // 缩放文字
            float scaleSize = random.nextFloat() + 0.8f;
            if (scaleSize > 1.1f) {
                scaleSize = 1f;
            }
            trans.scale(scaleSize, scaleSize);
            g2d_word.setTransform(trans);
            /************************/

            g.drawString(strRand, x, y);
            x += random.nextInt(10) + 20;

            // 将产生的四个随机数组合在一起。
            randomCode.append(strRand);
        }

        // 将四位数字的验证码保存到Session中。
        request.getSession().setAttribute(Constant.SECURITY_CODE_KEY, randomCode.toString());
        g.dispose();

        try {
            // 禁止缓存
            response.setHeader("Pragma", "No-cache");
            response.setHeader("Cache-Control", "No-cache");
            response.setDateHeader("Expires", 0);
            // 指定生成的响应是图片
            response.setContentType("image/jpeg");
            ImageIO.write(buffImg, "JPEG", response.getOutputStream());
        } catch (IOException e) {
            log.error("创建验证码失败", e);
        }
    }

    @RequestMapping(value = "/code/check", method = { RequestMethod.GET })
    @ResponseBody
    public ResponseObject<Object> checkCode(@RequestParam(value = ParameterConstants.COMMON_VALIDATE_CODE) String vcode, HttpServletRequest request) {
        if (checkVerifyCode(request, vcode)) {
            request.getSession().removeAttribute(Constant.SECURITY_CODE_KEY);
            return new ResponseObject<Object>(ResponseCode.SUCCESS_CODE);
        } else {
            return new ResponseObject<Object>(ResponseCode.VALIDATE_CODE_ERROR, "验证码输入错误，请重新输入");
        }
    }
}

然后在前台的jsp或者html页面中，像下面这样写就可以了，

<img src="code/generate" id="code1" style="cursor: hand;" alt="看不清，换一张" />

$("#code1").attr('src','code/generate?timestamp=' + new Date().getTime());

效果是：

二、js端产生验证码

在这里只是简单的写一种实现方式，网上有很多的产生验证码的js库，可以自行下载到项目中使用。

var code ; //在全局定义验证码 
//产生验证码
window.onload = function createCode(){
     code = ""; 
     var codeLength = 4;//验证码的长度
     var checkCode = document.getElementById("code"); 
     var random = new Array(0,1,2,3,4,5,6,7,8,9,'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');//随机数
     for(var i = 0; i < codeLength; i++) {//循环操作
        var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35）
        code += random[index];//根据索引取得随机数加到code上
    }
    checkCode.value = code;//把code值赋给验证码
}
//校验验证码
function validate(){
    var inputCode = document.getElementById("input").value.toUpperCase(); //取得输入的验证码并转化为大写      
    if(inputCode.length <= 0) { //若输入的验证码长度为0
        alert("请输入验证码！"); //则弹出请输入验证码
    }       
    else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时
        alert("验证码输入错误！@_@"); //则弹出验证码输入错误
        createCode();//刷新验证码
        document.getElementById("input").value = "";//清空文本框
    }       
    else { //输入正确时
        alert("^-^"); //弹出^-^
    }           
}

调用js的html写法是：

<html>
    <head>
        <title>验证码</title>
        <style type="text/css">
            #code
            {
                font-family:Arial;
                font-style:italic;
                font-weight:bold;
                border:0;
                letter-spacing:2px;
                color:blue;
            }
        </style>
        <script type = "text/javascript" src = "checkCode.js">
        </script>
    </head>
    <body>
        <div>
            <input type = "text" id = "input"/>
            <input type = "button" id="code" onclick="createCode()"/>
            <input type = "button" value = "验证" onclick = "validate()"/>
        </div>
    </body>
</html>