java 實現登錄驗證碼 （kaptcha 驗證碼組件）

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

驗證碼的作用

1. 防止廣告機注冊和發帖、評論。
2. 防止暴力破解密碼，特別是有管理員權限的密碼。

在這里介紹一種非常實用的驗證碼生成工具：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";
    }
}

以上配置的效果圖

打完收工~

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