冰河的博客

关于如何在Struts下使用jsp图片验证码，请参考另外一篇文章《jsp图片验证码》。其原理就是随机生成4位验证码，将其写入Session，同时生成图片显示出来。这样就出问题了。如果同时打开多个带验证码页面，那么只有最后的页面验证码会通过验证，其他的均提示验证码错误。

其实这个问题当初添加验证码功能的时候就知道会有，但是一直没改，因为很少有人打开多个登录页面，就算是出错了刷新一次就能解决。最近负责项目的师兄盯住这个问题了，所以不得不改改。

这个错误的关键代码在于：

request.getSession().setAttribute(“checkcode”,sRand);

也就是说每次生成验证码都存在Session的checkcode变量里。这样每次生成的验证码都会覆盖上次的值。

网上有许多解决方案，其中一种是给验证码加时间戳。

在将验证码存入Session时使用以下代码：

String timestamp=(String) request.getQueryString();//我这里就一个参数
request.getSession().setAttribute(“checkcode”+timestamp,sRand);

其实原理很简单，就是加入时间戳，把存入Session的变量区别开来。

使用的时候在表单里加入：

<input id=”timestamp” type=”hidden” name=”timestamp” value=”">

同时写一个图片的刷新脚本

function loadimage(){
var timestamp=(new Date()).valueOf(); //timestamp.
document.getElementById(“randImage”).src = “<%=request.getContextPath()%>/image.jsp?”+timestamp;
document.getElementById(“timestamp”).value = timestamp;
}

服务器端直接在form的validate()里使用如下代码取出checkcode即可。

String checkcode= (String) request.getSession().getAttribute(“checkcode”+timestamp);

用完记得顺手清理session：

request.getSession().removeAttribute(“checkcode”+timestamp);

参考链接：http://blog.kongxz.com/2010/01/solution-to-verifying-code-in-multiple-instances/

代码如下：

image.jsp

<%@ page contentType="image/jpeg" import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*" %>
<%!
// 给定范围获得随机颜色
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");
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();

//生成随机类
Random random = new Random();

// 设定背景色
g.setColor(getRandColor(200,250));
g.fillRect(0, 0, width, height);

//设定字体
g.setFont(new Font("Times New Roman", Font.PLAIN, 18));

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

// 随机产生155条干扰线，使图象中的认证码不易被其它程序探测到
g.setColor(getRandColor(160, 200));
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);
}

// 取随机产生的认证码(4位数字)
String sRand = "";
for (int i = 0;i < 4; i++) {
    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.drawString(rand, 13 * i + 6, 16);
}

// 将认证码存入SESSION
session.setAttribute("captcha", sRand);

// 图象生效
g.dispose();

// 输出图象到页面
ImageIO.write(image, "JPEG", response.getOutputStream());

out.clear();
out = pageContext.pushBody();

%>
一定不要漏掉红色部分，否则会报出错误：
getOutputStream() has already been called for this response

在需要使用验证码的地方加入：
<img src="include/image.jsp">