java項目實戰之驗證碼kaptcha的使用

（1）在maven的配置文件pom.xml中添加依賴

<dependency>
    	<groupId>com.github.penggle</groupId>
	<artifactId>kaptcha</artifactId>
	<version>2.3.2</version>
</dependency>

（2）在web的配置文件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>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>

 

（3）html中的寫法

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

 

（4）點擊更換驗證碼的實現changeVerifyCode(this)

在js中寫入

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

 

（5）將獲取到的驗證碼傳入到後臺，首先通過標籤id獲取值，然後將這個值封裝到formData中，傳入到後臺

var verifyCodeActual = $('#j_captcha').val();
		if (!verifyCodeActual) {
			$.toast('請輸入驗證碼！');
			return;
		}
		formData.append('verifyCodeActual', verifyCodeActual);

 

（6）在後端寫一個工具類，看輸入的驗證碼是否正確

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;
	}
}

（7）工具類的使用

if (!CodeUtil.checkVerifyCode(request)) {
			modelMap.put("success", false);
			modelMap.put("errMsg", "輸入了錯誤的驗證碼");
			return modelMap;
		}

（8）現在出現一個問題就是驗證碼錯誤，需要在引入一些流和文件上傳的類庫

在pom.xml中加入

Pom.xml
	<dependency>
		<groupId>commons-fileupload</groupId>
		<artifactId>commons-fileupload</artifactId>
		<version>1.3.2</version>
	</dependency>

在web.xml中加入

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