1 前言
验证码一般都通过Servlet可直接实现,网上也有很多开源的验证码项目,如果开发框架是SpringMvc,那么就需要做相应的修改,具体实现如下。
2 login.jsp
login.jsp页面需要增加提供验证码输入和产生验证码的地方,大致如下
<div class="lg-username input-item clearfix">
<i class="iconfont"></i>
<input type="text" placeholder="输入四位验证码" name="captcha" id="captcha" onkeypress="onInputKeyup();" style="width:105px;" />
<img src="checkCaptchaCode.do" id="createCheckCode" onclick="changeCaptcha();" align="middle" style="width:150px;"/>
</div>
其中,id=”captcha”为验证码输入框,id=”createCheckCode”为产生验证码的图片。如上是通过”checkCaptchaCode.do”获取验证码的,checkCaptchaCode.do详细在controller中
3 Controller
Controller的具体代码如下:
//生成验证码图片
@ResponseBody
@RequestMapping(value = "/checkCaptchaCode.do", method = RequestMethod.GET)
public void validateCode(HttpServletRequest request, HttpServletResponse response) throws Exception{
//第一个参数是生成的验证码,第二个参数是生成的图片
Object[] objs = ImageUtil.createImage();
//将验证码存入Session
request.getSession(true).setAttribute("validateCode",objs[0]);
//将图片输出给浏览器
BufferedImage image = (BufferedImage) objs[1];
// 禁止图像缓存。
response.setHeader("Pragma", "no-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
response.setContentType("image/jpeg");
OutputStream os = response.getOutputStream();
ImageIO.write(image, "jpeg", os);
os.flush();
}
其中ImageUtil为生成验证码的具体java类,其内容如下
public class ImageUtil {
public static Object[] createImage() {
Object[] obj = new Object[2];
int width = 60;
// 验证码图片的高度。
int height = 18;
// 验证码字符个数
int codeCount = 4;
int x = 0;
// 字体高度
int fontHeight;
int codeY;
x = width / (codeCount + 1);
fontHeight = height - 2;
codeY = height - 4;
char[] codeSequence = { 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J',
'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W',
'X', 'Y','3', '4', '5', '6', '7', '8', '9','a','b','c','d','e','f','g','h',
'j','k','m','n','r','s','t','u','v','w','x','y'};
//定义图像buffer
BufferedImage buffImg = new BufferedImage(
width, height,BufferedImage.TYPE_INT_RGB);
Graphics2D g = buffImg.createGraphics();
//创建一个随机数生成器类
Random random = new Random();
//将图像填充为白色
g.setColor(Color.WHITE);
g.fillRect(0, 0, width, height);
//创建字体,字体的大小应该根据图片的高度来定。
Font font = new Font("Fixedsys", Font.PLAIN, fontHeight-5);
//设置字体。
g.setFont(font);
//画边框
g.setColor(Color.WHITE);
g.drawRect(0, 0, width - 2, height - 2);
//随机产生干扰线,使图象中的认证码不易被其它程序探测到。
/*g.setColor(Color.BLACK);
for(int i = 0; i < 5; 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();
int red = 0, green = 0, blue = 0;
//随机产生codeCount数字的验证码。
for (int i = 0; i < codeCount; i++) {
//得到随机产生的验证码数字。
String strRand = String.valueOf(codeSequence[random.nextInt(codeSequence.length)]);
//产生随机的颜色分量来构造颜色值,这样输出的每位数字的颜色值都将不同。
/*red = random.nextInt(255);
green = random.nextInt(255);
blue = random.nextInt(255);*/
//用随机产生的颜色将验证码绘制到图像中。
g.setColor(new Color(red, green, blue));
g.drawString(strRand, (i + 1) * x, codeY-2);
//将产生的四个随机数组合在一起。
randomCode.append(strRand);
}
obj[0] = randomCode.toString();
obj[1] = buffImg;
return obj;
}
}
如上操作,页面就会出现验证码