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

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

驗證碼的作用：

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