Kaptcha概述
GitHub:
https://github.com/penggle/kaptcha
官网
http://code.google.com/p/kaptcha/
Kaptcha是基于SimpleCaptcha的开源项目。通过调整Kaptcha配置可以生成各种样式的验证码。
Kaptcha提供的功能如下：
- 验证码的字体
- 验证码字体的大小
- 验证码字体的字体颜色
- 验证码内容的范围
- 验证码图片的大小，边框，边框粗细，边框颜色
- 验证码的干扰线
- 验证码的样式
maven依赖
<!-- https://mvnrepository.com/artifact/com.github.penggle/kaptcha --> <dependency> <groupId>com.github.penggle</groupId> <artifactId>kaptcha</artifactId> <version>2.3.2</version> </dependency>
web.xml配置Kaptcha对应的servlet，设置属性
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" version="3.1" metadata-complete="true"> <!-- 配置DispatcherServlet --> .........省略 .........省略 <!-- 为避免编码不一致,一般情况下都需要增加编码过滤器 --> .........省略 .........省略 <!-- 生成图片的Servlet --> <servlet> <servlet-name>Kaptcha</servlet-name> <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class> <!-- 是否有边框 --> <init-param> <param-name>kaptcha.border</param-name> <param-value>no</param-value> </init-param> <!-- 字体颜色 --> <init-param> <param-name>kaptcha.textproducer.font.color</param-name> <param-value>red</param-value> </init-param> <!-- 图片宽度 --> <init-param> <param-name>kaptcha.image.width</param-name> <param-value>135</param-value> </init-param> <!-- 使用哪些字符生成验证码 --> <init-param> <param-name>kaptcha.textproducer.char.string</param-name> <param-value>ACDEFHKPRSTWX345679</param-value> </init-param> <!-- 图片高度 --> <init-param> <param-name>kaptcha.image.height</param-name> <param-value>50</param-value> </init-param> <!-- 字体大小 --> <init-param> <param-name>kaptcha.textproducer.font.size</param-name> <param-value>43</param-value> </init-param> <!-- 干扰线的颜色 --> <init-param> <param-name>kaptcha.noise.color</param-name> <param-value>black</param-value> </init-param> <!-- 字符个数 --> <init-param> <param-name>kaptcha.textproducer.char.length</param-name> <param-value>4</param-value> </init-param> <!-- 使用哪些字体 --> <init-param> <param-name>kaptcha.textproducer.font.names</param-name> <param-value>Arial</param-value> </init-param> </servlet> <!-- 映射的url --> <servlet-mapping> <servlet-name>Kaptcha</servlet-name> <url-pattern>/Kaptcha</url-pattern> </servlet-mapping> </web-app>
页面
shopoperation.html中定义组件
/o2o/src/main/webapp/WEB-INF/html/shop/shopoperation.html
输入部分input ：设置id,便于js中操作
图片部分img ：设置id, 定义onClick事件,通过src属性，调用对应的servlet
<!-- 验证码 kapa--> <li> <div class="item-content"> <div class="item-inner"> <div class="item-title label">验证码</div> <input type="text" id="j_kaptcha" placeholder="验证码"> <div class="item-input"> <img id="kaptcha_img" alt="点击更换" title="点击更换" onclick="changeVerifyCode(this)" src="../Kaptcha"> <!-- src是找到web.xml中 对应的servlet的名字 --> </div> </div> </div> </li>
最后引用自定义的common.js
<script type='text/javascript' src='../resources/js/common/common.js' charset='utf-8'></script>
common.js
/o2o/src/main/webapp/resources/js/common/common.js
点击触发更换验证码
function changeVerifyCode(img){ img.src="../Kaptcha?" + Math.floor(Math.random() * 1000) }
shopoperation.js使用
/o2o/src/main/webapp/resources/js/shop/shopoperation.js
通过html中设置的id值，获取输入属性，做了一层很弱的校验，并封装到formData中利用ajax发送到后台
/** * submit按钮触发的操作 */ $('#submit').click(function() { // 获取页面的值 var shop = {}; .........省略 .........省略 // 验证码 var verifyCodeActual =$('#j_kaptcha').val(); console.log('verifyCodeActual:'+verifyCodeActual); if(!verifyCodeActual){ $.toast('请输入验证码'); return; } // 接收数据 var formData = new FormData(); // 将数据封装到formData发送到后台 formData.append('verifyCodeActual',verifyCodeActual); .........省略 .........省略 // 利用ajax提交 $.ajax({ url:registerShopUrl, type:'POST', data:formData, contentType:false, processData:false, cache:false, success:function(data){ if(data.success){ $.toast('提示信息:'+data.errMsg); }else{ $.toast('提示信息:' + data.errMsg); } // 点击提交后 不管成功失败都更换验证码，防止重复提交 $('#kaptcha_img').click(); } }); });
spring-web.xml配置multipartResolver
/o2o/src/main/resources/spring/spring-web.xml
我们的首页使用了文件上传，以及验证码（图片），multipart类型。 Spring需要multipartResolver来接收解析这部分流。 如果不配置的话，无法获取到输入的验证码。
<!-- 文件上传解析器 --> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="defaultEncoding" value="utf-8"></property> <property name="maxUploadSize" value="10485760000"></property><!-- 最大上传文件大小 --> <property name="maxInMemorySize" value="10960"></property> </bean>
控制层
封装校验验证码的工具类
package com.artisan.o2o.util; import javax.servlet.http.HttpServletRequest; import org.slf4j.Logger; import org.slf4j.LoggerFactory; public class VerifyCodeUtil { private static final Logger logger = LoggerFactory.getLogger(VerifyCodeUtil.class); /** * * * @Title: verifyCode * * @Description:验证码校验 * * @param request * 前端HttpServletRequest * @return * * @return: boolean */ public static boolean verifyCode(HttpServletRequest request) { // 图片中的验证码 String verifyCodeExpected = (String) request.getSession().getAttribute( com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY); logger.debug("verifyCodeExpected:{}", verifyCodeExpected); // 用户输入的验证码 String verifyCodeActual = HttPServletRequestUtil.getString(request, "verifyCodeActual"); logger.debug("verifyCodeActual:{}", verifyCodeActual); if (verifyCodeActual == null || !verifyCodeActual.equalsIgnoreCase(verifyCodeExpected)) { return false; } return true; } }
控制层获取验证码做校验
在 ShopController#registerShop()中，首先进行验证码的校验工作，使用封装的工具类，如果输入错误，直接返回给前端，将错误结果放入modelMap中。
// 0. 验证码校验 if (!VerifyCodeUtil.verifyCode(request)) { modelMap.put("success", false); modelMap.put("errMsg", "验证码不正确"); return modelMap; }
Github地址
代码地址： https://github.com/yangshangwei/o2o
