SSM 實現登錄驗證碼之Kaptcha （帶例子）

效果圖：

1.由於這是大神寫好封裝起來的一個框架，所有我們使用前得先下載相關

的 jar 包。

第一種：maven 

<!-- 驗證碼 -->
<!-- https://mvnrepository.com/artifact/com.github.penggle/kaptcha -->
<dependency>
    <groupId>com.github.penggle</groupId>
    <artifactId>kaptcha</artifactId>
    <version>2.3.2</version>
</dependency> 

第二種：lib

打開鏈接：https://mvnrepository.com/artifact/com.github.penggle/kaptcha

2.配置 web.xml

驗證碼的一些樣式都是通過配置來實現的，下面是我自己使用的一個例

子，如果需要更改字體顏色還有字體大小什麼的等，可以自己根據註釋

來修改。不然直接複製粘貼也行。由於配置比較簡單，不作過多解釋，直

接上代碼。

<!-- 驗證碼相關屬性的配置 -->
	<servlet>
		<servlet-name>Kaptcha</servlet-name>
		<servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
		<!-- 定義 Kaptcha 的樣式 -->
		<!-- 是否有邊框 -->
		<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.image.height</param-name>
			<param-value>50</param-value>
		</init-param>
		<!-- 使用哪些字符生成驗證碼 -->
		<init-param>
			<param-name>kaptcha.textproducer.char.string</param-name>
			<param-value>ACDEFHKPRSTWX345975</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.前端驗證碼的顯示實現

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

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

解釋：

驗證碼圖片的鏈接 src 中的 "../Kaptcha"，這裏的“Kaptcha”是要與剛剛 web.xml 中的 url-pattern 配置的值一樣的，並非隨便寫的。

4.後端進行驗證碼的輸入驗證

實現思路：我是把驗證碼的驗證單獨寫成一個靜態類，然後在控制層裏面

直接調用就行。

驗證碼靜態類：

public class CodeUtil {
	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;
	}
}

控制層調用代碼：

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

if 裏面驗證碼不通過（錯誤）的時候，我自己做的一些處理，可以根據自己

的實際情況進行修改。

 

到這裏 Kaptcha 的使用就介紹完了，希望對你有幫助！！！