Spring MVC Captcha 验证码 (附Servlet实现方式)

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

一. Spring MVC 环境实现方式:

1.1 spring-mvc.xml 

	<!--kaptcha登录验证码 -->
	<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="#" οnclick="changeCode()">看不清?换一张</a>
</div>
</body>
</html>

PS:需要自行引入kaptcha.jar;

二:servlet实现方式

2.1 web.xml 配置:

<!--Kaptcha 验证码  -->
	<servlet>
		<!-- 生成验证码和刷新的Servlet -->
		<servlet-name>kaptcha</servlet-name>
		<servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
		<init-param>
			<!-- 验证码图片的边框 yes和no -->
			<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>
			<!-- 获取验证码的名字SESSION -->
			<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>

2.2 JSP代码

<table>
			<tr>
				<td><img src="/kaptcha/kaptcha.jpg"></td>
				<td valign="top">
			
					<form method="POST">
						<br>sec code:<input type="text" name="kaptchafield"><br />
						<input type="submit" name="submit">
					</form>
				</td>
			</tr>
		</table>	

		<br /><br /><br /><br />
		
		<%
			String c = (String)session.getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
			String parm = (String) request.getParameter("kaptchafield");
			
			out.println("Parameter: " + parm + " ? Session Key: " + c + " : ");
			
			if (c != null && parm != null) {
				if (c.equals(parm)) {
					out.println("<b>true</b>");
				} else {
					out.println("<b>false</b>");
				}
			
		%>

原文链接: http://ttaale.iteye.com/blog/808719




  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值