Kaptcha实现验证码

1pom.xml种导入Kaptcha依赖
<!-- https://mvnrepository.com/artifact/com.github.penggle/kaptcha -->
<dependency>
    <groupId>com.github.penggle</groupId>
    <artifactId>kaptcha</artifactId>
    <version>2.3.2</version>
2.web.xml中指定属性

<!-- 生成图片的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>

3前端数据

<li>
   <div class="item-content">
      <div class="item-media">
         <i class="icon icon-form-email"></i>
      </div>
      <div class="item-inner">
         <label for="j_captcha" class="item-title label">验证码</label> <input
            id="j_captcha" name="j_captcha" type="text"
            class="form-control in" placeholder="验证码" />
         <div class="item-input">
            <img id="captcha_img" alt="点击更换" title="点击更换"
               onclick="changeVerifyCode(this)" src="../Kaptcha" />
         </div>
      </div>
   </div>
</li>

3.1JS实现changeVerifyCode方法

function changeVerifyCode(img) {
   img.src = "../Kaptcha?" + Math.floor(Math.random() * 100);
}
4.判断业务luoji

$('#submit').click(function() {
   var shopAuth = {};
   shopAuth.name = $('#shopauth-name').val();
   shopAuth.title = $('#title').val();
   shopAuth.shopAuthId = shopAuthId;
   var verifyCodeActual = $('#j_captcha').val();
   if (!verifyCodeActual) {
      $.toast('请输入验证码！');
      return;
   }
   $.ajax({
      url : shopAuthPostUrl,
      type : 'POST',
      contentType : "application/x-www-form-urlencoded; charset=utf-8",
      data : {
         shopAuthMapStr : JSON.stringify(shopAuth),
         verifyCodeActual : verifyCodeActual
      },
      success : function(data) {
         if (data.success) {
            $.toast('提交成功！');
            $('#captcha_img').click();
         } else {
            $.toast('提交失败！');
            $('#captcha_img').click();
         }
      }
   });
});
4后端编写
4.1配置CodeUtil工具类

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

        }
        return true;


    }
}
4.2controller数据返回给前端

if(!CodeUtil.checkVerifyCode(request)){
    modelMap.put("success",false);
    modelMap.put("errMSg","输入了错误的验证码");
    return  modelMap;

}