SSM框架Kaptcha驗證碼的使用

1.在pom中引入依賴

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

2.在web.xml中配置其對於的Servelet 設置以及相應的servlet-mapping

<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>ABCDEFGHIJKLMNOPQRST345679</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頁面部分

 

當剛進入頁面時 驗證碼圖片部分調用web.xml中的Kaptcha Servelet（src=「../Kaptcha」）

當發生點擊事件時會調用changeVerifyCode(this)的方法

 注：調用changeVerifyCode(this) 時路徑要生成隨機四位數 

 

 

4.將前端獲取的實際輸入驗證碼傳入後臺與Kaptcha圖片驗證碼進行匹配

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