验证码的作用:
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 需要配置验证码的相关属性:
1 <!-- 验证码 --> 2 <bean id="captchaProducer" class="com.google.code.kaptcha.impl.DefaultKaptcha"> 3 <property name="config"> 4 <bean class="com.google.code.kaptcha.util.Config"> 5 <constructor-arg> 6 <props> 7 <!--这里的颜色只支持标准色和rgb颜色,不可使用十六进制的颜色--> 8 <!-- 是否有边框 --> 9 <prop key="kaptcha.border">no</prop> 10 <!-- 验证码文本字符颜色 --> 11 <prop key="kaptcha.textproducer.font.color">black</prop> 12 <!-- 验证码图片宽度 --> 13 <prop key="kaptcha.image.width">92</prop> 14 <!-- 验证码图片高度 --> 15 <prop key="kaptcha.image.height">36</prop> 16 <!-- 验证码文本字符大小 --> 17 <prop key="kaptcha.textproducer.font.size">24</prop> 18 <!-- session中存放验证码的key键 --> 19 <prop key="kaptcha.session.key">code</prop> 20 <!-- 验证码噪点颜色 --> 21 <prop key="kaptcha.noise.color">white</prop> 22 <!-- 验证码文本字符间距 --> 23 <prop key="kaptcha.textproducer.char.space">3</prop> 24 <!-- 验证码样式引擎 --> 25 <prop key="kaptcha.obscurificator.impl">com.google.code.kaptcha.impl.ShadowGimpy</prop> 26 <!-- 验证码文本字符长度 --> 27 <prop key="kaptcha.textproducer.char.length">4</prop> 28 <!-- 验证码文本字体样式 --> 29 <prop key="kaptcha.textproducer.font.names">宋体,楷体,微软雅黑</prop> 30 </props> 31 </constructor-arg> 32 </bean> 33 </property> 34 </bean>
生成二维码图片的控制类:CaptchaController.java
1 /** 2 * com.krry.web 3 * 方法名:生成二维码控制类 4 * 创建人:krry 5 * @param request 6 * @param response 7 * @return 8 * @throws Exception 9 * 返回类型:ModelAndView 10 * @exception 11 * @since 1.0.0 12 */ 13 @RequestMapping("/code") 14 public ModelAndView getKaptchaImage(HttpServletRequest request,HttpServletResponse response) throws Exception { 15 HttpSession session = request.getSession(); 16 //获取验证码 17 // String code = (String) session.getAttribute(Constants.KAPTCHA_SESSION_KEY); 18 // String code = (String) session.getAttribute("Kaptcha_Code"); 19 //清除浏览器的缓存 20 response.setDateHeader("Expires", 0); 21 // Set standard HTTP/1.1 no-cache headers. 22 response.setHeader("Cache-Control","no-store, no-cache, must-revalidate"); 23 // Set IE extended HTTP/1.1 no-cache headers (use addHeader). 24 response.addHeader("Cache-Control", "post-check=0, pre-check=0"); 25 // Set standard HTTP/1.0 no-cache header. 26 response.setHeader("Pragma", "no-cache"); 27 // return a jpeg 28 response.setContentType("image/jpeg"); 29 //浏览器记忆功能-----当前过浏览器和服务器交互成功以后下载的图片和资源会进行缓存一次。下次刷新的时候就不会在到服务器去下载。 30 // 获取KAPTCHA验证的随机文本 31 String capText = captchaProducer.createText(); 32 // 将生成好的图片放入会话中 33 session.setAttribute(Constants.KAPTCHA_SESSION_KEY, capText); 34 // create the image with the text 35 BufferedImage bi = captchaProducer.createImage(capText); 36 ServletOutputStream out = response.getOutputStream(); 37 // write the data out 38 ImageIO.write(bi, "jpg", out); 39 try { 40 out.flush(); 41 } finally { 42 out.close();//关闭 43 } 44 return null; 45 }
前台调用:
1 <input type=‘text‘ placeholder=‘请输入验证码...‘ maxlength=‘4‘ autocomplete=‘off‘ class=‘inp kr_code‘ id=‘code‘/> 2 <img src=‘"+basePath+"/kaptcha/code.do‘ class=‘yanz_img‘ onclick=‘changeyanz($(this));‘>
js方法:
点击验证码图片换验证码时,<img> 的 onclick 里面做的就是改变 <img> 标签的 src 属性。
所以要给 url 带一个随机数,这样每次点击验证码图片时,都会由于 src 改变而重新请求 jsp
1 function changeyanz(obj){ 2 obj.attr("src",basePath+"/kaptcha/code.do?d="+new Date().getTime()); 3 }