kaptcha图片验证码的使用

一、在pom.xml中引入Kaptcha验证码

	<!-- kaptcha图片验证 -->
	<!-- https://mvnrepository.com/artifact/com.github.penggle/kaptcha -->
	<dependency>
		<groupId>com.github.penggle</groupId>
		<artifactId>kaptcha</artifactId>
		<version>2.3.2</version>
	</dependency>

二、在web,xml配置Kaptcha相关参数以及Servlet映射

	<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>no</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>135</param-value>
		</init-param>
		<!-- 使用哪些字符生成验证码 -->
		<init-param>
			<param-name>kaptcha.textproducer.char.string</param-name>
			<param-value>ACDEFHKPRSTWX345679</param-value>
		</init-param>
		<!-- 图片高度 -->
		<init-param>
			<param-name>kaptcha.image.height</param-name>
			<param-value>50</param-value>
		</init-param>
		<!-- 字体大小 -->
		<init-param>
			<param-name>kaptcha.textproducer.font.size</param-name>
			<param-value>43</param-value>
		</init-param>
		<!-- 干扰线的颜色 -->
		<init-param>
			<param-name>kaptcha.noise.color</param-name>
			<param-value>black</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>Arial</param-value>
		</init-param>
	</servlet>
	<servlet-mapping>
		<servlet-name>Kaptcha</servlet-name>
		<url-pattern>/Kaptcha</url-pattern>
	</servlet-mapping>

三、在html中写Kaptcha图片验证的控件（注：需要将js引入）

	<!-- 验证码 ka -->
	<li>
		<div class="item-content">
			<div class="item-inner">
				<div class="item-title label">验证码</div>
				<input type="text" id="j_captcha" placeholder="验证码">
				<div class="item-input">
					<img id="captcha_img" alt="点击更换" title="点击更换"
						onclick="changeVerifyCode(this)" src="../Kaptcha" />
				</div>
			</div>
		</div>
	</li>

	<script type='text/javascript' src='../resources/js/common/common.js'
		charset='utf-8'></script>
	<script type='text/javascript'
		src='../resources/js/shop/shopoperation.js' 
		charset='utf-8'></script>

四、在common.js的JavaScript中写Kaptcha的点击事件（即点击验证码图片更换验证码）

function changeVerifyCode(img) {
	img.src = "../Kaptcha?" + Math.floor(Math.random() * 100);
}

五、功能性实现验证码校验（例如：在注册信息的时候）

1.shopoperation.js

	var verifyCodeActual = $('#j_captcha').val();
	if (!verifyCodeActual) {
		$.toast('请输入验证码！');
		return;
	}
	// 生成表单对象，用于接收参数并传递给后台
	var formData = new FormData();
	formData.append('verifyCodeActual', verifyCodeActual);
	// 将数据提交至后台处理相关操作
	$.ajax({
		url : registerShopUrl,
		type : 'POST',
		data : formData,
		contentType : false,
		processData : false,
		cache : false,
		success : function(data) {
			if (data.success) {
				$.toast('提交成功！');
			} else {
				$.toast('提交失败！' + data.errMsg);
			}
			$('#captcha_img').click();
		}
	});

2.CodeUtil.java通用工具类进行验证码的比对

package com.lzx.o2o.util;

import javax.servlet.http.HttpServletRequest;

public class CodeUtil {
	/**
	 * 检查验证码是否和预期相符
	 * 
	 * @param request
	 * @return
	 */
	public static boolean checkVerifyCode(HttpServletRequest request) {
		// 从图片里获取的验证码
		String verifyCodeExpected = (String) request.getSession()
				.getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
		// 获取我们输入的验证码
		String verifyCodeActual = HttpServletRequestUtil.getString(request, "verifyCodeActual");
		if (verifyCodeActual == null || !verifyCodeActual.equals(verifyCodeExpected)) {
			return false;
		}
		return true;
	}
}

3.有关注册信息的Controller实现

	if (!CodeUtil.checkVerifyCode(request)) {
		modelMap.put("success", false);
		modelMap.put("errMsg", "输入了错误的验证码");
		return modelMap;
	}