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

原创

Krry

修改于 2019-03-23 21:40:07

8.2K0

修改于 2019-03-23 21:40:07

文章被收录于专栏：Krryblog

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

验证码的作用

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

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

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

kaptcha

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

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

实践

所使用的框架：SSM

所需的验证码的 jar 包：kaptcha-2.3.2.jar

可以到官网上下载：http://code.google.com/p/kaptcha

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

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