[NeedBox项目总结]---引入Kaptcha实现验证码功能

前言

验证码是防止批量操作和恶意登录最有效的方式之一。所以一个成熟的web项目怎么能少了验证码呢？不过自己编写实现好像对我来说，有点困难阿。不过没关系，我们也可以使用一些比较方便的验证码工具，省时省力。在网上收集一些资料之后，决定使用Kaptcha组件。

一、Kaptcha简介

Kaptcha是一个基于SimpleCaptcha的验证码开源项目，是一个非常实用的验证码生成工具。我们可以利用这个工具根据我们的需求来定制生成各种样式的验证码，真是很人性化了～
它的工作原理是调用com.google.code.kaptcha.servlet.KaptchaServlet，生成一个验证码图片，响应到客户端，同时将生成的验证码字符串放到HttpSession中。

详情可戳下方链接～
官方网站：https://code.google.com/archive/p/kaptcha/
github源码地址：https://github.com/penggle/kaptcha

使用kaptcha可以方便的配置：

• 验证码的字体
• 验证码字体的大小
• 验证码字体的字体颜色
• 验证码内容的范围（数字、字母、中文汉字！）
• 验证码图片的大小、边框、边框粗细、边框颜色
• 验证码的干扰线（可自定义）
• 验证码的样式(鱼眼样式、3D、普通模糊，可自定义)

二、在项目中使用Kaptcha

1. 添加依赖

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

2. 配置web.xml添加Kaptcha对应的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>yes</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.image.width</param-name>
           <param-value>110</param-value>
       </init-param>
       <!-- 图片高度 -->
       <init-param>
           <param-name>kaptcha.image.height</param-name>
           <param-value>48</param-value>
       </init-param>
       <!-- 字体 -->
       <init-param>
           <param-name>kaptcha.textproducer.font.names</param-name>
           <param-value>Courier</param-value>
       </init-param>
       <!-- 字体颜色 -->
       <init-param>
           <param-name>kaptcha.textproducer.font.color</param-name>
           <param-value>blue</param-value>
       </init-param>
       <!-- 字体大小 -->
       <init-param>
           <param-name>kaptcha.textproducer.font.size</param-name>
           <param-value>40</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.char.string</param-name>
           <param-value>012345679</param-value>
       </init-param>
   </servlet>
   <servlet-mapping>
       <servlet-name>Kaptcha</servlet-name>
       <url-pattern>/Kaptcha</url-pattern>
   </servlet-mapping>
   

   kaptcha所有的参数都有默认的配置，如果我们不显示配置的话，会采取默认的配置。
3. 在register.html中引入kaptcha组件
   • 输入部分input ：设置id，便于js中操作
   • 图片部分img ：设置id，定义onClick事件，通过src属性，调用对应的servlet

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

   最后引用自定义的common.js

   <script type='text/javascript'
           src='../resources/js/common/common.js' charset='utf-8'></script>    
   

4. common.js中点击触发更换验证码的函数

   function changeVerifyCode(img){
       img.src="../Kaptcha?" + Math.floor(Math.random() * 1000)
   }
   

5. 判断验证码是否正确（工具类里的方法）

   //判断验证码是否正确
   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;
   }
   

6. 在register.js中提交、判断
   通过html中设置的id值，获取输入属性，并封装到formData中利用ajax发送到后台

   $('#submit').click(function() {
           ...
           var verifyCodeActual = $('#j_captcha').val();
           if (!verifyCodeActual) {
               $.toast('提交失败！请输入验证码');
               return;
           }
          ...
           var formData = new FormData();
          ...
           formData.append("verifyCodeActual", verifyCodeActual);
           $.ajax({
               url : registerUrl,
               type : 'POST',
               data : formData,
               contentType : false,
               processData : false,
               cache : false,
               success : function(data) {
                   if (data.success) {
                       $.toast('注册成功！');
                       window.location.href = '/o2o/local/login';
                   } else {
                       $.toast('注册失败！' + data.errMsg);
                       $('#captcha_img').click();
                   }
               }
           });
   });
   

7. 效果如下图所示：
   

三、相关参数配置

关于验证码的配置有很多参数，可以自由定制，参考下面这张图，你也可以实现你想要的验证码啦~