Spring MVC Captcha 验证码

本文专为不想一遍遍手写验证码代码的”懒猿“而生，只需要添加部分配置文件，拷贝一个控制层代码，就能在页面中方便使用。话不多说，进入主题：

一. Spring MVC 环境实现方式：

1.1 spring-mvc.xml

<bean id="captchaProducer" class="com.google.code.kaptcha.impl.DefaultKaptcha">
<property name="config">
<bean class="com.google.code.kaptcha.util.Config">
<constructor-arg>
<props>
<prop key="kaptcha.border">no</prop>
<prop key="kaptcha.border.color">105,179,90</prop>
<prop key="kaptcha.textproducer.font.color">red</prop>
<prop key="kaptcha.image.width">200</prop>
<prop key="kaptcha.textproducer.font.size">48</prop>
<prop key="kaptcha.image.height">48</prop>
<prop key="kaptcha.session.key">code</prop>
<prop key="kaptcha.textproducer.char.string">123456789</prop>
<prop key="kaptcha.textproducer.char.length">4</prop>
<prop key="kaptcha.textproducer.char.space">6</prop>
<prop key="kaptcha.textproducer.font.names">宋体,楷体,微软雅黑</prop>
<prop key="kaptcha.obscurificator.impl">com.google.code.kaptcha.impl.WaterRipple</prop>
</props>
</constructor-arg>
</bean>
</property>
</bean>

1.2 Controller 实现

package com.vopzoon.app.base.captcha;
import java.awt.image.BufferedImage;
import javax.imageio.ImageIO;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
import com.google.code.kaptcha.Constants;
import com.google.code.kaptcha.Producer;
/**
* 防止Captcha机器人登陆
* @author liuwang
*
*/
@Controller
@RequestMapping("/kaptcha/*")
public class CaptchaController {
@Autowired
private Producer captchaProducer = null;
@RequestMapping
public ModelAndView getKaptchaImage(HttpServletRequest request, HttpServletResponse response) throws Exception {
HttpSession session = request.getSession();
String code = (String)session.getAttribute(Constants.KAPTCHA_SESSION_KEY);
System.out.println("******************验证码是: " + code + "******************");
response.setDateHeader("Expires", 0);
// Set standard HTTP/1.1 no-cache headers.
response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");
// Set IE extended HTTP/1.1 no-cache headers (use addHeader).
response.addHeader("Cache-Control", "post-check=0, pre-check=0");
// Set standard HTTP/1.0 no-cache header.
response.setHeader("Pragma", "no-cache");
// return a jpeg
response.setContentType("image/jpeg");
// create the text for the image
String capText = captchaProducer.createText();
// store the text in the session
session.setAttribute(Constants.KAPTCHA_SESSION_KEY, capText);
// create the image with the text
BufferedImage bi = captchaProducer.createImage(capText);
ServletOutputStream out = response.getOutputStream();
// write the data out
ImageIO.write(bi, "jpg", out);
try {
out.flush();
} finally {
out.close();
}
return null;
}
}

3. JSP 代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
<title>测试页面</title>
<script type="text/javascript">
$(function(){
$('#kaptchaImage').click(function () {//生成验证码
$(this).hide().attr('src', './kaptcha/getKaptchaImage.do?' + Math.floor(Math.random()*100) ).fadeIn();
event.cancelBubble=true;
});
});
window.onbeforeunload = function(){
//关闭窗口时自动退出
if(event.clientX>360&&event.clientY<0||event.altKey){
alert(parent.document.location);
}
};
function changeCode() {
$('#kaptchaImage').hide().attr('src', './kaptcha/getKaptchaImage.do?' + Math.floor(Math.random()*100) ).fadeIn();
event.cancelBubble=true;
}
</script>
</head>
<body>
<div class="chknumber">
<label>验证码:
<input name="kaptcha" type="text" id="kaptcha" maxlength="4" class="chknumber_input" />
</label>
<br />
<img src="./kaptcha/getKaptchaImage.do" id="kaptchaImage" style="margin-bottom: -3px"/>
<a href="#" onclick="changeCode()">看不清?换一张</a>
</div>
</body>
</html>

PS：需要自行引入kaptcha.jar；

二：servlet实现方式

2.1 web.xml 配置：

<servlet>
<servlet-name>kaptcha</servlet-name>
<servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
<init-param>
<param-name>kaptcha.border</param-name>
<param-value>yes</param-value>
</init-param>
<init-param>
<param-name>kaptcha.border.color</param-name>
<param-value>105,179,90</param-value>
</init-param>
<init-param>
<param-name>kaptcha.textproducer.font.color</param-name>
<param-value>red</param-value>
</init-param>
<init-param>
<param-name>kaptcha.image.width</param-name>
<param-value>250</param-value>
</init-param>
<init-param>
<param-name>kaptcha.image.height</param-name>
<param-value>90</param-value>
</init-param>
<init-param>
<param-name>kaptcha.textproducer.font.size</param-name>
<param-value>70</param-value>
</init-param>
<init-param>
<param-name>kaptcha.session.key</param-name>
<param-value>code</param-value>
</init-param>
<init-param>
<param-name>kaptcha.textproducer.char.length</param-name>
<param-value>4</param-value>
</init-param>
<init-param>
<param-name>kaptcha.textproducer.font.names</param-name>
<param-value>宋体,楷体,微软雅黑</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>kaptcha</servlet-name>
<url-pattern>/kaptcha/kaptcha.jpg</url-pattern>
</servlet-mapping>