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