使用Kaptcha實現JAVA驗證碼

第一步導入jar包,放入pom.xml文件

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

第二步在web.xml中配置生成映射

<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
                      http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1" metadata-complete="true">
         
    <!-- 如果是用mvn命令生成的xml,需要修改servlet版本爲3.1 -->
    <display-name>Archetype Created Web Application</display-name>
    <!-- 指定默認的返回文件  -->
    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
        <welcome-file>index.html</welcome-file>
    </welcome-file-list>
    
    <!-- 負責生成驗證碼 -->
    <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-mapping>
    	<servlet-name>Kaptcha</servlet-name>
    	<url-pattern>/Kaptcha</url-pattern>
    </servlet-mapping>
    
    <servlet>
    	<servlet-name>spring-dispatcher</servlet-name>
    	<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    	<init-param>
    		<param-name>contextConfigLocation</param-name>
    		<param-value>classpath:spring/spring-*.xml</param-value>
    	</init-param>
    </servlet>
	<servlet-mapping>
		<servlet-name>spring-dispatcher</servlet-name>
		<!-- 默認匹配所有的請求 -->
		<url-pattern>/</url-pattern>
	</servlet-mapping>
</web-app>

第三步:在html中綁值

<!-- 驗證碼 kaptcha -->
<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>

第四步:編寫驗證碼請求方法,並將js文件引入html底部

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

 

判斷驗證碼和用戶輸入的驗證碼是否相同工具類

import javax.servlet.http.HttpServletRequest;

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

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章