如何使用kaptcha验证码组件
kaptcha是基于SimpleCaptcha的验证码开源项目。
kaptcha是纯配置的,使用起来比较友好。如使用了Servlet,所有配置都在web.xml中。如果你在项目中使用了开源框架(比如SpringMVC),那么配置在该框架的配置文件中。
一、使用Servlet实现
1. 添加依赖的JAR包
<dependency> <groupId>com.github.penggle</groupId> <artifactId>kaptcha</artifactId> <version>2.3.2</version> </dependency>
我这里使用了maven来统一管理jar包,在pom.xml中添加上面的内容。
没有使用的需要自己下载jar包了。
2. 配置web.xml文件
kaptcha都是在web.xml中配置,我们需要在web.xml中配置kaptcha的servlet,具体如下:
<!-- kaptcha --> <servlet> <servlet-name>Kaptcha</servlet-name> <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>Kaptcha</servlet-name> <url-pattern>/kaptcha.jpg</url-pattern> </servlet-mapping>
其中的servlet-name和url-pattern都是自己定义的。
kaptcha的所有参数都是有默认的配置,如果我们不显式的配置,则会使用默认的配置。
如要显式配置kaptcha,在配置对应的servlet时,在init-param增加响应的参数配置即可。部分配置如下:
<servlet> <servlet-name>Kaptcha</servlet-name> <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class> <init-param> <param-name>kaptcha.image.width</param-name> <param-value>200</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.char.length</param-name> <param-value>4</param-value> </init-param> <init-param> <param-name>kaptcha.noise.impl</param-name> <param-value>com.google.code.kaptcha.impl.NoNoise</param-value> </init-param> </servlet>
二、与SpringMVC开源框架集成使用kaptcha
1. 声明CaptchaProducer Bean实例
<bean id="captchaProducer" class="com.google.code.kaptcha.impl.DefaultKaptcha"> <property name="config"> <bean class="com.google.code.kaptcha.util.Config"> <constructor-arg type="java.util.Properties"> <props> <prop key="kaptcha.image.width">100</prop> <prop key="kaptcha.image.height">50</prop> <prop key="kaptcha.noise.impl">com.google.code.kaptcha.impl.NoNoise</prop> <prop key="kaptcha.textproducer.char.string">0123456789abcdefghijklmnopqrstuvwxyz</prop> <prop key="kaptcha.textproducer.char.length">4</prop> </props> </constructor-arg> </bean> </property> </bean>
多贴几个配置
<props> <!-- 是否有边框 --> <prop key="kaptcha.border">no</prop> <!-- 设置边框颜色 --> <prop key="kaptcha.border.color">105,179,90</prop> <!-- 获取中文 --> <prop key="kaptcha.textproducer.impl">org.cric.util.ChineseText</prop> <!-- 设置字体颜色 --> <prop key="kaptcha.textproducer.font.color">black</prop> <!-- 设置验证码宽度 --> <prop key="kaptcha.image.width">100</prop> <!-- 设置验证码高度 --> <prop key="kaptcha.image.height">50</prop> <!-- 设置字体大小 --> <prop key="kaptcha.textproducer.font.size">30</prop> <!-- 设置字体个数 --> <prop key="kaptcha.textproducer.char.length">4</prop> <!-- 设置字体样式 --> <prop key="kaptcha.textproducer.font.names">宋体,楷体,微软雅黑</prop> <prop key="kaptcha.noise.impl">com.google.code.kaptcha.impl.NoNoise</prop> <prop key="kaptcha.textproducer.char.string">0123456789abcdefghijklmnopqrstuvwxyz</prop> </props>
2. 获取验证码的controller
@Autowired private Producer captchaProducer; @RequestMapping("/kaptcha.jpg") public void getCheckCode(HttpServletRequest request, HttpServletResponse response) throws IOException { String codeStr = captchaProducer.createText(); request.getSession().setAttribute(Constants.KAPTCHA_SESSION_KEY, codeStr); BufferedImage bi = captchaProducer.createImage(codeStr); ServletOutputStream out = response.getOutputStream(); ImageIO.write(bi, "jpg", out); out.flush(); out.close(); }
三、测试与优化
1. 页面调用
<form action="logonServlet"> <input type="text" name="checkCode"> <img src="kaptcha.jpg"> <input type="submit" value="提交"> </form>
2. action校验类
String sessionCode = (String) request.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY); String checkCode = request.getParameter("checkCode"); String isSuccess = ""; if (checkCode != null && checkCode.equals(sessionCode)) { isSuccess = "恭喜您,验证码输入成功!!!"; } else { isSuccess = "验证码输入失败啦,囧"; } response.setContentType("text/html; charset=UTF-8"); response.setCharacterEncoding("UTF-8"); PrintWriter pw = response.getWriter(); pw.print(isSuccess);
3.实现页面验证码刷新
<img src="kaptcha.jpg" id="checkcode" onclick="onCheckCode()" title="看不清换一张">
function onCheckCode () { var date = new Date(); $("#checkcode").attr("src", "kaptcha.jpg?d="+date); }
4. 效果