kaptcha是一个简单好用的验证码生成工具，通过配置，可以自己定义验证码大小、颜色、显示的字符等等。下面就来讲一下如何使用kaptcha生成验证码以及在服务器端取出验证码进行校验。
一、搭建测试环境
1.1、创建Web测试项目
新建一个Web项目，并将kaptcha-2.3.2.jar放在项目的WEB-INF/lib目录下，如下图所示：
1.2、在web.xml文件配置生成验证码的KaptchaServlet
KaptchaServlet的详细配置如下：
1 <?xml version="1.0" encoding="UTF-8"?> 2 <web-app version="2.5" 3xmlns="/xml/ns/javaee" 4xmlns:xsi="/2001/XMLSchema-instance" 5xsi:schemaLocation="/xml/ns/javaee 6/xml/ns/javaee/web-app_2_5.xsd"> 7 <welcome-file-list> 8<welcome-file>index.jsp</welcome-file> 9 </welcome-file-list>10 11 <!-- kaptcha验证码配置 -->12<servlet>13 <!-- 生成图片的Servlet -->14 <servlet-name>Kaptcha</servlet-name>15 <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>16 17 <!-- 是否有边框-->18 <init-param>19 <param-name>kaptcha.border</param-name>20 <param-value>no</param-value>21 </init-param> 22 <!-- 字体颜色 -->23 <init-param>24 <param-name>kaptcha.textproducer.font.color</param-name>25 <param-value>red</param-value>26 </init-param>27 <!-- 图片宽度 -->28 <init-param>29 <param-name>kaptcha.image.width</param-name>30 <param-value>135</param-value>31 </init-param>32 <!-- 使用哪些字符生成验证码 -->33 <init-param>34 <param-name>kaptcha.textproducer.char.string</param-name>35 <param-value>ACDEFHKPRSTWX345679</param-value>36 </init-param>37 <!-- 图片高度 -->38 <init-param>39 <param-name>kaptcha.image.height</param-name>40 <param-value>50</param-value>41 </init-param>42 <!-- 字体大小 -->43 <init-param>44 <param-name>kaptcha.textproducer.font.size</param-name>45 <param-value>43</param-value>46 </init-param>47 <!-- 干扰线的颜色 -->48 <init-param>49 <param-name>kaptcha.noise.color</param-name>50 <param-value>black</param-value>51 </init-param>52 <!-- 字符个数 -->53 <init-param>54 <param-name>kaptcha.textproducer.char.length</param-name>55 <param-value>4</param-value>56 </init-param>57 <!-- 使用哪些字体 -->58 <init-param>59 <param-name>kaptcha.textproducer.font.names</param-name>60 <param-value>Arial</param-value>61 </init-param> 62</servlet>63<!-- 映射的url -->64<servlet-mapping>65 <servlet-name>Kaptcha</servlet-name>66 <url-pattern>/Kaptcha.jpg</url-pattern>67</servlet-mapping>68 </web-app>
1.3、显示生成的验证码
在页面index.jsp显示验证码
1 <%@ page language="java" pageEncoding="UTF-8"%> 2 <!DOCTYPE HTML> 3 <html> 4 <head> 5<title>显示KaptchaServlet生成的验证码</title> 6<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.9.1.js"></script> 7<script type="text/javascript"> 8 //点击切换验证码 9 function changeVerifyCode(){10 $("#yzmImg").attr("src","Kaptcha.jpg?"+Math.floor(Math.random()*100));11 }12 13 //提交14 function doSubmit() {15 var verifyCodeValue = $("#verifyCode").val();16 if(verifyCodeValue.replace(/\s/g,"") == "") {17 alert("请输入验证码");18 }else {19 //提交前先异步检查验证码是否输入正确20 var verifyUrl = "${pageContext.request.contextPath}/servlet/VerifyServlet?verifyCode="+verifyCodeValue;21 $.ajax({22 type:"GET",23 url:verifyUrl,24 success:function(returnData){25if(returnData!="Y") {26 alert("请输入正确的验证码！");27}else {28 //验证码正确，进行提交操作29 alert("验证码输入正确，提交表单");30}31 },32 error:function(e){33alert(e);34 }35 });36 }37 }38</script>39 </head>40 41 <body>42 <form>43 <table>44 <tr>45 <td> 46请输入验证码：47 </td>48 <td>49 <input type="text" name="verifyCode" id="verifyCode">50 <img src="Kaptcha.jpg" onclick="changeVerifyCode()" id="yzmImg" style="cursor: pointer;">51 <a href="javascript:void(0)" onclick="changeVerifyCode()">看不清，换一张</a>52 </td>53 </tr>54 <tr>55 <td> 56 57 </td>58 <td>59 <input type="button" value="提交" onclick="doSubmit()">60 </td>61 </tr>62 </table>63</form> 64 </body>65 </html>
运行效果如下图所示：
1.4、在服务器端验证提交的验证码
用户在form表单中提交了验证码之后，我们会在服务器端进行验证，编写一个VerifyServlet，代码如下：
1 /** 2 * 3 */ 4 package me.gacl.web.controller; 5 6 import java.io.IOException; 7 import java.io.PrintWriter; 8 9 import javax.servlet.ServletException;10 import javax.servlet.http.HttpServlet;11 import javax.servlet.http.HttpServletRequest;12 import javax.servlet.http.HttpServletResponse;13 14 public class VerifyServlet extends HttpServlet {15 1617public void doGet(HttpServletRequest request, HttpServletResponse response)18 throws ServletException, IOException {19 20 response.setContentType("text/html;charaset=utf-8");21 response.setHeader("pragma", "no-cache");22 response.setHeader("cache-control", "no-cache");23 PrintWriter out = null;24 try {25 //响应数据26 String resultData;27 //获取传过来的验证码28 String verifyCode = request.getParameter("verifyCode");29 System.out.println("verifyCode----"+verifyCode);30 if(verifyCode=="") {31 resultData = "N";32 }else {33 //获取kaptcha生成存放在session中的验证码34 String kaptchaValue = (String) request.getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);35 //比较输入的验证码和实际生成的验证码是否相同36 if(kaptchaValue == null || kaptchaValue == ""||!verifyCode.equalsIgnoreCase(kaptchaValue)) {37 resultData = "N";38 }else {39 resultData = "Y";40 }41 }42 out = response.getWriter();43 out.write(resultData);44 out.flush();45 }catch(Exception e) {46 e.printStackTrace();47 }finally {48 if(out != null) {49 out.close();50 }51 }52}53 }
在web.xml中注册VerifyServlet
1 <!-- 检查验证码是否输入正确 -->2<servlet>3 <servlet-name>VerifyServlet</servlet-name>4 <servlet-class>me.gacl.web.controller.VerifyServlet</servlet-class>5</servlet>6<servlet-mapping>7 <servlet-name>VerifyServlet</servlet-name>8 <url-pattern>/servlet/VerifyServlet</url-pattern>9</servlet-mapping>
运行结果如下：
1、验证码不输入
2、输入错误的验证码
3、输入正确的验证码
使用kaptcha生成验证码感觉挺不错的，非常好用和方便。
