SpringBoot注册登录(二)：注册---验证码kaptcha的实现

SpringBoot注册登录(一)：User表的设计点击打开链接

      SpringBoot注册登录(三)：注册--验证账号密码是否符合格式及后台完成注册功能点击打开链接

     SpringBoot注册登录(四)：登录功能--密码错误三次，需要等待2分钟才能登录，固定时间内不能登录点击打开链接

SpringBoot注册登录(五)：登录功能--Scheduling Tasks定时作业，用于某个时间段允许/不允许用户登录点击打开链接

      SpringBoot（六）：拦截器--只允许进入登录注册页面，没登录不允许查看其它页面点击打开链接

      SpringBoot--mybatis--ajax--模态框--log：注册、登录、拦截器、文件系统源代码点击打开链接         

注意：要在启动类加上自己编写的配置文件，在本例中的配置文件为mykaptcha.xml

@ImportResource(locations={"classpath:mykaptcha.xml"})  

①先引入jar

		
		  
		  
  			  com.github.penggle  
  			  kaptcha  
 			  2.3.2  
		  
		

②新建配置文件mykaptcha.xml

代码如下：

  
  
    
        
            
                
                    
                        
                        no
                        
                        red
                        
                        5
                        
                        80
                        
                        30
                        
                        com.google.code.kaptcha.impl.DefaultKaptcha 
                        
                        com.google.code.kaptcha.text.impl.DefaultTextCreator
                        
                        abcde2345678gfynmnpwx 
                        
                        4
                        
                        宋体,楷体,微软雅黑
                        
                        20
                        
                        black
                        
                        com.google.code.kaptcha.impl.NoNoise 
                        
                        black
                        
                        com.google.code.kaptcha.impl.ShadowGimpy
                        
                        com.google.code.kaptcha.impl.DefaultBackground
                        
                        white
                        
                        com.google.code.kaptcha.text.impl.DefaultWordRenderer
                        
                        KAPTCHA_SESSION_KEY
                        
                        KAPTCHA_SESSION_DATE
                    
                
            
        
     
  
  

③新建两个Controller

NewKaptchaController：点击图片更换验证码

package com.fxy.controller;

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;

@Controller
public class NewKaptchaController {

	/**
	 * ClassName: CaptchaImageCreateController
	 * Function: 生成验证码Controller.
	 * date: 
	 *
	 * @author 
	 */
	
	    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;
	    }
}

KaptchaController：校验验证码是否正确

package com.fxy.controller;
import javax.servlet.http.HttpServletRequest;

import org.apache.log4j.Logger;
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;

@Controller
public class KaptchaController {
	private static  final transient Logger log = Logger.getLogger(KaptchaController.class);
	    /**
	     * @Title: loginCheck
	     * @param request
	     * @param kaptchaReceived
	     * @return String
	     * @Description:  验证码登录
	     * @author: fxy
	     * @date: 2017年11月21日
	     */
	    @RequestMapping(value = "kaptcha", 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)) {
	        	 log.info("验证码错了");
	        	return "kaptcha_error";//返回验证码错误
	        }
	        //校验用户名密码
	        // ……
	        // ……
	        log.info("验证码对了");
	        return "success"; //校验通过返回成功
	    }
	    
	    
}

④register.html的代码（包含接下来注册功能的前端验证内容）

	

		

			

				 
			
			

				 
			
			
			
			

				 
				看不清，点击换一张
				注册
			
			
			
		
	

⑤ js文件的解释

kaptcha.js：验证码的js文件

$(function() {
	$('#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").val();
			var paramsTime = {
				kaptcha : this.value
			};
			$.ajax({
				url : "kaptcha",
				data : paramsTime,
				type : "POST",
				success : function(data) {
					if (data == "kaptcha_error") {
						//显示验证码错误信息
						show_validate_msg("#kaptcha", "error", "验证码错了");
						//禁用按钮
						$('#user_insert_btn').attr('disabled',"true");
					}else{
						//显示验证码正确信息
						show_validate_msg("#kaptcha", "success", "验证码正确");
						$('#user_insert_btn').removeAttr("disabled");
					}
						
				}
			});
		}
	});
});