Spring MVC（五）—— Kaptcha验证码组件使用
一、依赖的jar包
kaptcha-0.0.9.jar
filters-2.0.235-1.jar
二、添加captchaProducer bean定义
1 <bean id="captchaProducer" class="com.google.code.kaptcha.impl.DefaultKaptcha"> 2 <property name="config"> 3 <bean class="com.google.code.kaptcha.util.Config"> 4 <constructor-arg> 5 <props> 6 <!--Border around kaptcha. Legal values are yes or no. --> 7 <prop key="kaptcha.border">no</prop> 8 <!--Color of the border. Legal values are r,g,b (and optional alpha) or white,black,blue. --> 9 <prop key="kaptcha.border.color">red</prop> 10 <!--Thickness of the border around kaptcha. Legal values are > 0. --> 11 <prop key="kaptcha.border.thickness">5</prop> 12 <!--Width in pixels of the kaptcha image. --> 13 <prop key="kaptcha.image.width">80</prop> 14 <!--Height in pixels of the kaptcha image. --> 15 <prop key="kaptcha.image.height">30</prop> 16 <!--The image producer. --> 17 <prop key="kaptcha.producer.impl">com.google.code.kaptcha.impl.DefaultKaptcha </prop> 18 <!--The text producer. --> 19 <prop key="kaptcha.textproducer.impl">com.google.code.kaptcha.text.impl.DefaultTextCreator</prop> 20 <!--The characters that will create the kaptcha. --> 21 <prop key="kaptcha.textproducer.char.string">abcde2345678gfynmnpwx </prop> 22 <!--The number of characters to display. --> 23 <prop key="kaptcha.textproducer.char.length">4</prop> 24 <!--A list of comma separated font names. --> 25 <prop key="kaptcha.textproducer.font.names">宋体,楷体,微软雅黑</prop> 26 <!--The size of the font to use. --> 27 <prop key="kaptcha.textproducer.font.size">20</prop> 28 <!--The color to use for the font. Legal values are r,g,b. --> 29 <prop key="kaptcha.textproducer.font.color">black</prop> 30 <!--The noise producer. --> 31 <prop key="kaptcha.noise.impl">com.google.code.kaptcha.impl.NoNoise </prop> 32 <!--The noise color. Legal values are r,g,b. --> 33 <prop key="kaptcha.noise.color">black</prop> 34 <!--The obscurificator implementation. --> 35 <prop key="kaptcha.obscurificator.impl">com.google.code.kaptcha.impl.ShadowGimpy</prop> 36 <!--The background implementation. --> 37 <prop key="kaptcha.background.impl">com.google.code.kaptcha.impl.DefaultBackground</prop> 38 <!--Ending background color. Legal values are r,g,b. --> 39 <prop key="kaptcha.background.clear.to">white</prop> 40 <!--The word renderer implementation. --> 41 <prop key="kaptcha.word.impl">com.google.code.kaptcha.text.impl.DefaultWordRenderer</prop> 42 <!--The value for the kaptcha is generated and is put into the HttpSession. This is the key value for that item in the session. --> 43 <prop key="kaptcha.session.key">KAPTCHA_SESSION_KEY</prop> 44 <!--The date the kaptcha is generated is put into the HttpSession. This is the key value for that item in the session. --> 45 <prop key="kaptcha.session.date">KAPTCHA_SESSION_DATE</prop> 46 </props> 47 </constructor-arg> 48 </bean> 49 </property> 50 </bean>
三、生成验证码的Controller
1 package com.ruijie.crazy.security; 2 import java.awt.image.BufferedImage; 3 4 import javax.imageio.ImageIO; 5 import javax.servlet.ServletOutputStream; 6 import javax.servlet.http.HttpServletRequest; 7 import javax.servlet.http.HttpServletResponse; 8 9 import org.springframework.beans.factory.annotation.Autowired; 10 import org.springframework.stereotype.Controller; 11 import org.springframework.web.bind.annotation.RequestMapping; 12 import org.springframework.web.servlet.ModelAndView; 13 14 import com.google.code.kaptcha.Constants; 15 import com.google.code.kaptcha.Producer; 16 17 /** 18 * ClassName: CaptchaImageCreateController 19 * Function: 生成验证码Controller. 20 * date: 21 * 22 * @author 23 */ 24 @Controller 25 @RequestMapping("/myweb") 26 public class CaptchaImageCreateController { 27 private Producer captchaProducer = null; 28 29 @Autowired 30 public void setCaptchaProducer(Producer captchaProducer){ 31 this.captchaProducer = captchaProducer; 32 } 33 34 @RequestMapping("/kaptcha.jpg") 35 public ModelAndView handleRequest(HttpServletRequest request, HttpServletResponse response) throws Exception{ 36 // Set to expire far in the past. 37 response.setDateHeader("Expires", 0); 38 // Set standard HTTP/1.1 no-cache headers. 39 response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate"); 40 // Set IE extended HTTP/1.1 no-cache headers (use addHeader). 41 response.addHeader("Cache-Control", "post-check=0, pre-check=0"); 42 // Set standard HTTP/1.0 no-cache header. 43 response.setHeader("Pragma", "no-cache"); 44 45 // return a jpeg 46 response.setContentType("image/jpeg"); 47 48 // create the text for the image 49 String capText = captchaProducer.createText(); 50 51 // store the text in the session 52 request.getSession().setAttribute(Constants.KAPTCHA_SESSION_KEY, capText); 53 54 // create the image with the text 55 BufferedImage bi = captchaProducer.createImage(capText); 56 57 ServletOutputStream out = response.getOutputStream(); 58 59 // write the data out 60 ImageIO.write(bi, "jpg", out); 61 try { 62 out.flush(); 63 } finally { 64 out.close(); 65 } 66 return null; 67 } 68 }
四、校验用户输入的Controller
1 package com.ruijie.crazy.security; 2 3 import javax.servlet.http.HttpServletRequest; 4 5 import org.springframework.stereotype.Controller; 6 import org.springframework.web.bind.annotation.RequestMapping; 7 import org.springframework.web.bind.annotation.RequestMethod; 8 import org.springframework.web.bind.annotation.RequestParam; 9 import org.springframework.web.bind.annotation.ResponseBody; 10 11 /** 12 * ClassName: LoginController 13 * Function: 登录Controller. 14 * date: 15 * 16 * @author 17 */ 18 @Controller 19 @RequestMapping("/login") 20 public class LoginController { 21 22 /** 23 * loginCheck:ajax异步校验登录请求. <br/> 24 * 25 * @author 26 * @param request 27 * @param username 用户名 28 * @param password 密码 29 * @param kaptchaReceived 验证码 30 * @return 校验结果 31 * @since 32 */ 33 @RequestMapping(value = "check", method = RequestMethod.POST) 34 @ResponseBody 35 public String loginCheck(HttpServletRequest request, 36 // @RequestParam(value = "username", required = true) String username, 37 // @RequestParam(value = "password", required = true) String password, 38 @RequestParam(value = "kaptcha", required = true) String kaptchaReceived){ 39 //用户输入的验证码的值 40 String kaptchaExpected = (String) request.getSession().getAttribute( 41 com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY); 42 //校验验证码是否正确 43 if (kaptchaReceived == null || !kaptchaReceived.equals(kaptchaExpected)) { 44 return "kaptcha_error";//返回验证码错误 45 } 46 //校验用户名密码 47 // …… 48 // …… 49 return "success"; //校验通过返回成功 50 } 51 }
五、前端代码
1、html代码
1 <div> 2 <input type="text" class="form-control" id="kaptcha" name="kaptcha" placeholder="请输入验证码" style="color:#000000;"/> 3 <img src="kaptcha.jpg" width="200" id="kaptchaImage" title="看不清，点击换一张" /> 4 <br /><small>看不清，点击换一张</small> 5 </div>
2、js代码
1 $('#kaptchaImage').click(function() { 2 $(this).attr('src','kaptcha.jpg?' + Math.floor(Math.random() * 100)); 3 }); 4 5 $('#kaptcha').bind({ 6 focus:function(){ 7 // if (this.value == this.defaultValue){ 8 // this.value=""; 9 // } 10 }, 11 blur:function(){ 12 var paramsTime ={ 13 kaptcha:this.value 14 }; 15 $.ajax({ 16 type: "POST", 17 url: "http://127.0.0.1/crazypf/login/check", 18 data: paramsTime, 19 dataType: "json", 20 success: function(data){ 21 $('#kaptcha').html(data); 22 } 23 }); 24 } 25 });
