Spring MVC（五）—— Kaptcha验证码组件使用

一、依赖的jar包

kaptcha-0.0.9.jar

filters-2.0.235-1.jar

二、添加captchaProducer bean定义

<bean id="captchaProducer" class="com.google.code.kaptcha.impl.DefaultKaptcha">
        <property name="config">
            <bean class="com.google.code.kaptcha.util.Config">
                <constructor-arg>
                    <props>
                        <!--Border around kaptcha. Legal values are yes or no. -->
                        <prop key="kaptcha.border">no</prop>
                        <!--Color of the border. Legal values are r,g,b (and optional alpha) or white,black,blue. -->
                        <prop key="kaptcha.border.color">red</prop>
                        <!--Thickness of the border around kaptcha. Legal values are > 0. -->
                        <prop key="kaptcha.border.thickness">5</prop>
                        <!--Width in pixels of the kaptcha image. -->
                        <prop key="kaptcha.image.width">80</prop>
                        <!--Height in pixels of the kaptcha image. -->
                        <prop key="kaptcha.image.height">30</prop>
                        <!--The image producer. -->
                        <prop key="kaptcha.producer.impl">com.google.code.kaptcha.impl.DefaultKaptcha </prop>
                        <!--The text producer. -->
                        <prop key="kaptcha.textproducer.impl">com.google.code.kaptcha.text.impl.DefaultTextCreator</prop>
                        <!--The characters that will create the kaptcha. -->
                        <prop key="kaptcha.textproducer.char.string">abcde2345678gfynmnpwx </prop>
                        <!--The number of characters to display. -->
                        <prop key="kaptcha.textproducer.char.length">4</prop>
                        <!--A list of comma separated font names. -->
                        <prop key="kaptcha.textproducer.font.names">宋体,楷体,微软雅黑</prop>
                        <!--The size of the font to use. -->
                        <prop key="kaptcha.textproducer.font.size">20</prop>
                        <!--The color to use for the font. Legal values are r,g,b. -->
                        <prop key="kaptcha.textproducer.font.color">black</prop>
                        <!--The noise producer. -->
                        <prop key="kaptcha.noise.impl">com.google.code.kaptcha.impl.NoNoise </prop>
                        <!--The noise color. Legal values are r,g,b. -->
                        <prop key="kaptcha.noise.color">black</prop>
                        <!--The obscurificator implementation. -->
                        <prop key="kaptcha.obscurificator.impl">com.google.code.kaptcha.impl.ShadowGimpy</prop>
                        <!--The background implementation. -->
                        <prop key="kaptcha.background.impl">com.google.code.kaptcha.impl.DefaultBackground</prop>
                        <!--Ending background color. Legal values are r,g,b. -->
                        <prop key="kaptcha.background.clear.to">white</prop>
                        <!--The word renderer implementation. -->
                        <prop key="kaptcha.word.impl">com.google.code.kaptcha.text.impl.DefaultWordRenderer</prop>
                        <!--The value for the kaptcha is generated and is put into the HttpSession. This is the key value for that item in the session. -->
                        <prop key="kaptcha.session.key">KAPTCHA_SESSION_KEY</prop>
                        <!--The date the kaptcha is generated is put into the HttpSession. This is the key value for that item in the session. -->
                        <prop key="kaptcha.session.date">KAPTCHA_SESSION_DATE</prop>
                    </props>
                </constructor-arg>
            </bean>
        </property>
    </bean>

三、生成验证码的Controller

package com.ruijie.crazy.security;
import java.awt.image.BufferedImage;

import javax.imageio.ImageIO;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

import com.google.code.kaptcha.Constants;
import com.google.code.kaptcha.Producer;

/**
 * ClassName: CaptchaImageCreateController
 * Function: 生成验证码Controller.
 * date: 
 *
 * @author 
 */
@Controller
@RequestMapping("/myweb")
public class CaptchaImageCreateController {
    private Producer captchaProducer = null;

    @Autowired
    public void setCaptchaProducer(Producer captchaProducer){
        this.captchaProducer = captchaProducer;
    }

    @RequestMapping("/kaptcha.jpg")
    public ModelAndView handleRequest(HttpServletRequest request, HttpServletResponse response) throws Exception{
        // Set to expire far in the past.
        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");

        // create the text for the image
        String capText = captchaProducer.createText();

        // store the text in the session
        request.getSession().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;
    }
}

四、校验用户输入的Controller

package com.ruijie.crazy.security;

import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

/**
 * ClassName: LoginController 
 * Function: 登录Controller. 
 * date: 
 *
 * @author
 */
@Controller
@RequestMapping("/login")
public class LoginController {

    /**
     * loginCheck:ajax异步校验登录请求. <br/>
     *
     * @author 
     * @param request
     * @param username 用户名
     * @param password 密码
     * @param kaptchaReceived 验证码
     * @return 校验结果
     * @since 
     */
    @RequestMapping(value = "check", method = RequestMethod.POST)
    @ResponseBody
    public String loginCheck(HttpServletRequest request,
//            @RequestParam(value = "username", required = true) String username,
//            @RequestParam(value = "password", required = true) String password,
            @RequestParam(value = "kaptcha", required = true) String kaptchaReceived){
        //用户输入的验证码的值
        String kaptchaExpected = (String) request.getSession().getAttribute(
                com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
        //校验验证码是否正确
        if (kaptchaReceived == null || !kaptchaReceived.equals(kaptchaExpected)) {
            return "kaptcha_error";//返回验证码错误
        }
        //校验用户名密码
        // ……
        // ……
        return "success"; //校验通过返回成功
    }
}

五、前端代码

1、html代码

<div>
        <input type="text" class="form-control" id="kaptcha" name="kaptcha" placeholder="请输入验证码" style="color:#000000;"/>
        <img src="kaptcha.jpg" width="200" id="kaptchaImage" title="看不清，点击换一张" />        
        <br /><small>看不清，点击换一张</small>        
</div>

2、js代码

　　$('#kaptchaImage').click(function() {
        $(this).attr('src','kaptcha.jpg?' + Math.floor(Math.random() * 100));
    });
    
    $('#kaptcha').bind({ 
        focus:function(){ 
//            if (this.value == this.defaultValue){ 
//                this.value=""; 
//            } 
        }, 
        blur:function(){
            var paramsTime  ={
                kaptcha:this.value                    
            };
            $.ajax({
                 type: "POST",
                 url: "http://127.0.0.1/crazypf/login/check",
                 data: paramsTime,
                 dataType: "json",
                 success: function(data){
                        $('#kaptcha').html(data);
                 }
             });
        } 
    });