使用kaptcha生成验证码

来源：互联网发布：网络工程和软件开发编辑：程序博客网时间：2024/05/16 10:21

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"  3     xmlns="http://java.sun.com/xml/ns/javaee"  4     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  5     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee  6     http://java.sun.com/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){25                         if(returnData!="Y") {26                             alert("请输入正确的验证码！");27                         }else {28                             //验证码正确，进行提交操作29                             alert("验证码输入正确，提交表单");30                         }31                     },32                     error:function(e){33                         alert(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                     &nbsp;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 16     17     public 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生成验证码感觉挺不错的，非常好用和方便。

0 0