验证码的作用:
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 需要配置验证码的相关属性:
- <!-- 验证码 -->
- <bean id="captchaProducer" class="com.google.code.kaptcha.impl.DefaultKaptcha">
- <property name="config">
- <bean class="com.google.code.kaptcha.util.Config">
- <constructor-arg>
- <props>
- <!-- 这里的颜色只支持标准色和 rgb 颜色, 不可使用十六进制的颜色 -->
- <!-- 是否有边框 -->
- <prop key="kaptcha.border">no</prop>
- <!-- 验证码文本字符颜色 -->
- <prop key="kaptcha.textproducer.font.color">black</prop>
- <!-- 验证码图片宽度 -->
- <prop key="kaptcha.image.width">92</prop>
- <!-- 验证码图片高度 -->
- <prop key="kaptcha.image.height">36</prop>
- <!-- 验证码文本字符大小 -->
- <prop key="kaptcha.textproducer.font.size">24</prop>
- <!-- session 中存放验证码的 key 键 -->
- <prop key="kaptcha.session.key">code</prop>
- <!-- 验证码噪点颜色 -->
- <prop key="kaptcha.noise.color">white</prop>
- <!-- 验证码文本字符间距 -->
- <prop key="kaptcha.textproducer.char.space">3</prop>
- <!-- 验证码样式引擎 -->
- <prop key="kaptcha.obscurificator.impl">com.google.code.kaptcha.impl.ShadowGimpy</prop>
- <!-- 验证码文本字符长度 -->
- <prop key="kaptcha.textproducer.char.length">4</prop>
- <!-- 验证码文本字体样式 -->
- <prop key="kaptcha.textproducer.font.names"> 宋体, 楷体, 微软雅黑 </prop>
- </props>
- </constructor-arg>
- </bean>
- </property>
- </bean>
生成二维码图片的控制类: CaptchaController.java
- /**
- * com.krry.web
- * 方法名: 生成二维码控制类
- * 创建人: krry
- * @param request
- * @param response
- * @return
- * @throws Exception
- * 返回类型: ModelAndView
- * @exception
- * @since 1.0.0
- */
- @RequestMapping("/code")
- public ModelAndView getKaptchaImage(HttpServletRequest request,HttpServletResponse response) throws Exception {
- HttpSession session = request.getSession();
- // 获取验证码
- // String code = (String) session.getAttribute(Constants.KAPTCHA_SESSION_KEY);
- // String code = (String) session.getAttribute("Kaptcha_Code");
- // 清除浏览器的缓存
- 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");
- // 浏览器记忆功能 ----- 当前过浏览器和服务器交互成功以后下载的图片和资源会进行缓存一次下次刷新的时候就不会在到服务器去下载
- // 获取 KAPTCHA 验证的随机文本
- String capText = captchaProducer.createText();
- // 将生成好的图片放入会话中
- session.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;
- }
前台调用:
- <input type='text' placeholder='请输入验证码...' maxlength='4' autocomplete='off' class='inp kr_code' id='code'/>
- <img src='"+basePath+"/kaptcha/code.do'class='yanz_img'onclick='changeyanz($(this));'>
js 方法:
点击验证码图片换验证码时,<img> 的 onclick 里面做的就是改变 <img> 标签的 src 属性
所以要给 url 带一个随机数, 这样每次点击验证码图片时, 都会由于 src 改变而重新请求 jsp
- function changeyanz(obj){
- obj.attr("src",basePath+"/kaptcha/code.do?d="+new Date().getTime());
- }
来源: https://www.cnblogs.com/ainyi/p/8571029.html