SSM-圖形驗證碼的實現以及校驗邏輯

引入依賴：

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

web.xml文件配置

當前端頁面調用圖片驗證碼的url時，就會路由到/Kaptcha

 <!--驗證碼-->
  <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.textproducer.font.size</param-name>
      <param-value>43</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>ACDEFHKPRSTWX345679</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>

前端代碼：

html：

可以看到，實際上前端代碼並沒有什麼變化。

  <div class="item-content">
        <div class="item-inner">
            <div class="item-title label">驗證碼</div>
            <input type="text" id="j_kaptcha" placeholder="驗證碼">
            <div class="item-input">
                <img id="kaptcha_img" alt="點擊更換" placeholder="驗證碼" onclick="changeVerifyCode(this)" src="../Kaptcha"/>
            </div>
        </div>
    </div>
                   

js:

需要注意的是，在我們點擊 onclick事件時，如果url不發生變化，那麼請求是不是傳送到後端的，因此我們可以採用加隨機數和日期的方式。

function changeVerifyCode(img) {
    //url需要發生變換
    img.src="../Kaptcha?"+Math.floor(Math.random()*100);
}

後端校驗代碼邏輯：

package com.util;

import com.google.code.kaptcha.Constants;

import javax.servlet.http.HttpServletRequest;

/**
 * @Created with IntelliJ IDEA
 * @Description: 判斷前端輸入的驗證碼是否正確
 * @Package: com.util
 * @author: FLy-Fly-Zhang
 * @Date: 2020/2/8
 * @Time: 14:34
 */
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==null||!verifyCodeActual.equals(verifyCodeExpected))
            return false;
        return true;
    }
}