Kaptcha验证码的使用实现操作

配置操作

pom.xml中依赖导入

<dependency>
    <groupId>com.github.penggle</groupId>
    <artifactId>kaptcha</artifactId>
    <version>2.3.2</version>
</dependency>
<dependency>
	<groupId>commons-fileupload</groupId>
	<artifactId>commons-fileupload</artifactId>
	<version>1.3.2</version>
</dependency>

web.xml中 配置serlvet

<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.font.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>

在Web.xml 响应此servlet

 <servlet-mapping>
  	<servlet-name>Kaptcha</servlet-name>
  	<url-pattern>/Kaptcha</url-pattern>
  </servlet-mapping>

在spring的 spring-web.xml中 配置bean

<!-- 文件上传解析器 -->
	<bean id="multipartResolver"
		class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
		<property name="defaultEncoding" value="utf-8"></property>
			<!-- 1024*1024*20 = 20M -->
		<property name="maxUploadSize" value="20971520"></property>
		<property name="maxInMemorySize" value="20971520"></property>
	</bean>

前端部分

html部分

<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" />  <!-- 对应web.xml 里servlet的名字 Kaptcha -->
									</div>
								</div>
							</div>

js部分

实现按钮触及函数的操作

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

返回给后台的操作(相关部分的代码，省略了其他不相关代码内容)

var formData = new FormData();
			formData.append('shopImg',shopImg);
			formData.append('shopStr',JSON.stringify(shop));
			
			var verifyCodeActual = $('#j_captcha').val();
			if(!verifyCodeActual){
				$.toast('请输入验证码');
				return;
			}
			formData.append('verifyCodeActual',verifyCodeActual);
			$.ajax({
				url:registerShopUrl,
				type:'POST',
				data:formData,
				contentType:false,
				proceesData:false,
				cache:false,
				success:function(data){
					if(data.success){
						$.toast('提交成功!');
					}else{
						$.toast('提交失败！',data.errMsg);
					}
					$('#captcha_img').click();
				}
			});

后端部分

设计一个Utill类进行判断

public class CodeUtil {
		public static boolean checkVerifyCode(HttpServletRequest req) {
			
			String verifyCodeExpected = (String) req.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
			
			String verifyCodeActual = HttpServletRequestUtil.getString(req, "verifyCodeActual");
			if(verifyCodeActual==null|| !verifyCodeActual.equals(verifyCodeExpected)) 
			{
				return false;
			}
			return true;
		}
		
}

控制器部分

	Map<String,Object> modelMap = new HashMap<String,Object>();
		if(!CodeUtil.checkVerifyCode(req)) {
			modelMap.put("success",false);
			modelMap.put("errMsg","输入了错误的验证码");
			return modelMap;
		}