利用kaptcha實現驗證碼,防止表單重複提交

一、添加kaptcha的依賴

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

二、在web.xml中添加kaptcha的servlet

<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>
    <!-- 映射的url -->
    <servlet-mapping>
        <servlet-name>Kaptcha</servlet-name>
        <url-pattern>/Kaptcha</url-pattern>
    </servlet-mapping>

在這裏插入圖片描述

三、在你表單需要的地方添加相應的html代碼

更換驗證碼的src根據自己的項目來設置

<!-- 驗證碼 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="capcha_img" alt="點擊更換" title="點擊更換"
                 onclick="changeVerifyCode(this)" src="../../../Kaptcha" />
             </div>
         </div>
     </div>
 </li>

四、在後臺接收輸入框內的數據判斷驗證碼是否正確

代碼中接收前端傳來的數據verifyCodeActual可以根據自己的方式接收,verifyCodeActual根據前端的參數名字來寫

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.equalsIgnoreCase(verifyCodeExpected)) {
		return false;
	}
	return true;
}

verifyCodeExpected是驗證碼的值,verifyCodeActual是接收的值

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