java 实现登录验证码（kaptcha 验证码组件）

验证码的作用：

1、防止广告机注册和发帖、评论。
2、防止暴力破解密码，特别是有管理员权限的密码。

在这里介绍一种非常实用的验证码生成工具：kaptcha

这个工具，可以生成各种样式的验证码，因为它是可配置的。

而 kaptcha工作的原理，是调用 com.google.code.kaptcha.servlet.KaptchaServlet，生成一个图片。同时将生成的验证码字符串放到 HttpSession中，直接从session中获取这张验证码图片，而不会占用实际内存。

使用 kaptcha 可以方便的配置如下属性：

kaptcha.border 　　　　　　　　　　是否有边框默认为true 我们可以自己设置yes，no
kaptcha.border.color　　　　　　　　边框颜色默认为Color.BLACK
kaptcha.border.thickness 　　　　　边框粗细度默认为1
kaptcha.producer.impl 　　　　　　验证码生成器默认为DefaultKaptcha
kaptcha.textproducer.impl 　　　　　验证码文本生成器默认为DefaultTextCreator
kaptcha.textproducer.char.string　　验证码文本字符内容范围默认为abcde2345678gfynmnpwx
kaptcha.textproducer.char.length 　　验证码文本字符长度默认为5
kaptcha.textproducer.font.names 　　验证码文本字体样式默认为new Font("Arial", 1, fontSize), new Font("Courier", 1, fontSize)
kaptcha.textproducer.font.size 　　　验证码文本字符大小默认为40
kaptcha.textproducer.font.color 　　　验证码文本字符颜色默认为Color.BLACK
kaptcha.textproducer.char.space 　　验证码文本字符间距默认为2
kaptcha.noise.impl 　　　　　　　　验证码噪点生成对象默认为DefaultNoise
kaptcha.noise.color 　　　　　　　　验证码噪点颜色默认为Color.BLACK
kaptcha.obscurificator.impl 　　　　验证码样式引擎默认为WaterRipple
kaptcha.word.impl 　　　　　　　　验证码文本字符渲染默认为DefaultWordRenderer
kaptcha.background.impl 　　　　　验证码背景生成器默认为DefaultBackground
kaptcha.background.clear.from 　　验证码背景颜色渐进默认为Color.LIGHT_GRAY
kaptcha.background.clear.to 　　　　验证码背景颜色渐进默认为Color.WHITE
kaptcha.image.width　　　　　　　验证码图片宽度默认为200
kaptcha.image.height 　　　　　　验证码图片高度默认为50
kaptcha.session.key 　　　　　　　 session中存放验证码的key键

所实用的框架：SSM

所需的验证码的 jar 包：kaptcha-2.3.2.jar，可以到官网上下载：http://code.google.com/p/kaptcha/

applicationContext.xml 需要配置验证码的相关属性：

 <!-- 验证码 -->

     <bean id="captchaProducer" class="com.google.code.kaptcha.impl.DefaultKaptcha">

         <property name="config">

             <bean class="com.google.code.kaptcha.util.Config">

                 <constructor-arg>

                     <props>

                         <!--这里的颜色只支持标准色和rgb颜色，不可使用十六进制的颜色-->

                         <!-- 是否有边框 -->

                         <prop key="kaptcha.border">no</prop>

                         <!-- 验证码文本字符颜色 -->

                         <prop key="kaptcha.textproducer.font.color">black</prop>

                         <!-- 验证码图片宽度 -->

                         <prop key="kaptcha.image.width">92</prop>

                         <!-- 验证码图片高度 -->

                         <prop key="kaptcha.image.height">36</prop>

                         <!-- 验证码文本字符大小 -->

                         <prop key="kaptcha.textproducer.font.size">24</prop>

                         <!-- session中存放验证码的key键 -->

                         <prop key="kaptcha.session.key">code</prop>

                         <!-- 验证码噪点颜色 -->

                         <prop key="kaptcha.noise.color">white</prop>

                         <!-- 验证码文本字符间距 -->

                         <prop key="kaptcha.textproducer.char.space">3</prop>

                         <!-- 验证码样式引擎 -->

                         <prop key="kaptcha.obscurificator.impl">com.google.code.kaptcha.impl.ShadowGimpy</prop>

                         <!-- 验证码文本字符长度 -->

                         <prop key="kaptcha.textproducer.char.length">4</prop>

                         <!-- 验证码文本字体样式 -->

                         <prop key="kaptcha.textproducer.font.names">宋体,楷体,微软雅黑</prop>

                     </props>

                 </constructor-arg>

             </bean>

         </property>

     </bean>

生成二维码图片的控制类：CaptchaController.java

 /**

      * com.krry.web

      * 方法名：生成二维码控制类

      * 创建人：krry

      * @param request

      * @param response

      * @return

      * @throws Exception

      * 返回类型：ModelAndView

      * @exception

      * @since  1.0.0

     */

     @RequestMapping("/code")

     public ModelAndView getKaptchaImage(HttpServletRequest request,HttpServletResponse response) throws Exception {

         HttpSession session = request.getSession();

         //获取验证码

         //    String code = (String) session.getAttribute(Constants.KAPTCHA_SESSION_KEY);

         //    String code = (String) session.getAttribute("Kaptcha_Code");

         //清除浏览器的缓存

         response.setDateHeader("Expires", 0);

         // Set standard HTTP/1.1 no-cache headers.

         response.setHeader("Cache-Control","no-store, no-cache, must-revalidate");

         // Set IE extended HTTP/1.1 no-cache headers (use addHeader).

         response.addHeader("Cache-Control", "post-check=0, pre-check=0");

         // Set standard HTTP/1.0 no-cache header.

         response.setHeader("Pragma", "no-cache");

         // return a jpeg

         response.setContentType("image/jpeg");

         //浏览器记忆功能-----当前过浏览器和服务器交互成功以后下载的图片和资源会进行缓存一次。下次刷新的时候就不会在到服务器去下载。

         // 获取KAPTCHA验证的随机文本

         String capText = captchaProducer.createText();

         // 将生成好的图片放入会话中

         session.setAttribute(Constants.KAPTCHA_SESSION_KEY, capText);

         // create the image with the text

         BufferedImage bi = captchaProducer.createImage(capText);

         ServletOutputStream out = response.getOutputStream();

         // write the data out

         ImageIO.write(bi, "jpg", out);

         try {

             out.flush();

         } finally {

             out.close();//关闭

         }

         return null;

     }

前台调用：

 <input type='text' placeholder='请输入验证码...' maxlength='4' autocomplete='off' class='inp kr_code' id='code'/>

 <img src='"+basePath+"/kaptcha/code.do' class='yanz_img' onclick='changeyanz($(this));'>

js方法：

点击验证码图片换验证码时，<img> 的 onclick 里面做的就是改变 <img> 标签的 src 属性。

所以要给 url 带一个随机数，这样每次点击验证码图片时，都会由于 src 改变而重新请求 jsp

 function changeyanz(obj){

     obj.attr("src",basePath+"/kaptcha/code.do?d="+new Date().getTime());

 }

登录时对验证码的验证：LoginController.java

         //获取用户传递进来的验证码

         String code = request.getParameter("code");

         if(TmStringUtils.isNotEmpty(code)){

             //获取session中的验证码

             String sessionCode = (String)request.getSession().getAttribute(Constants.KAPTCHA_SESSION_KEY);

             //如果输入的验证码和会话的验证码不一致的,提示用户输入有误

             if(TmStringUtils.isNotEmpty(sessionCode) && !code.equalsIgnoreCase(sessionCode)){

                 return "error_code";

             }

         }

以上配置的效果图：

博客地址：https://ainyi.com/70