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