4-12 **引入kaptcha实现验证码

一、前端编写

1、进入网址，引入依赖

https://mvnrepository.com/artifact/com.github.penggle/kaptcha/2.3.2

    com.github.penggle
    kaptcha
    2.3.2

2、在web.xml 编写servlet，负责生成验证码

  	Kaptcha
  	com.google.code.kaptcha.servlet.KaptchaServlet
  	
  	
  		kaptcha.border
  		no
  	
  	
  	
  		kaptcha.textproducer.font.color
  		red
  	
  	
  	
  		kaptcha.image.width
  		135
  	
  	
  	
  		kaptcha.textproducer.char.string
  		ACDEFHKPRSTWX345679
  	
  	
  	
  		kaptcha.image.height
  		50
  	
  	
  	
  		kaptcha.textproducer.font.size
  		43
  	
  	
  	
  		kaptcha.noise.color
  		black
  	
  	
  	
  		kaptcha.textproducer.char.length
  		4
  	
  	
  	
  		kaptcha.textproducer.font.names
  		Arial
  	
  

 
  	Kaptcha
  	/Kaptcha
  

3、HTML中编写验证码

红框中的名字是web.xml中servlet的名字

4、编写changeVerifyCode()方法

由于验证码功能有很多地方可能用到，所以单独写一个JS

function changeVerifyCode(img) {
	img.src="../Kaptcha?" + Math.floor(Math.random()*100);//0-100的整数
}

5、在HTML中引入common.js

6、shopoperation.js中编写

点击提交后更换验证码,通过click 调用changeVerifyCode()方法

---

二、后端验证输入验证码是否正确

1、在util包下编写工具类

/**
 * 判断验证码是否符合预期
 * @author shawn
 *
 */
public class CodeUtil {
	public static boolean checkVerifyCode(HttpServletRequest request) {
		//实际的验证码
		String verifyCodeExcepted = (String)request.getSession().getAttribute(
				com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
		//输入的验证码
		String verifyCodeActual = HttpServletRequestUtil.getString(request, "verifyCodeActual");
		if(verifyCodeActual == null || !verifyCodeActual.equals(verifyCodeExcepted)) {
			return false;
		}
		return true;
	}
}

2、在ShopManagementController引入验证码工具类

3、通过modelMap传到前端