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("^-^"); //弹出^-^
     }
 }

checkCode.js

调用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>

Html