使用kaptcha生成验证码

你的名字 2022-01-13 03:07 266阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

kaptcha是一个简单好用的验证码生成工具，通过配置，可以自己定义验证码大小、颜色、显示的字符等等。下面就来讲一下如何使用kaptcha生成验证码以及在服务器端取出验证码进行校验。

## 一、搭建测试环境 ##

### 1.1、创建Web测试项目 ###

新建一个Web项目，并将kaptcha-2.3.2.jar放在项目的WEB-INF/lib目录下，如下图所示：

### 1.2、在web.xml文件配置生成验证码的KaptchaServlet ###

KaptchaServlet的详细配置如下：

![复制代码][30184205_fEzN.gif]

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    
    12     <servlet>
    13         
    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     
    64     <servlet-mapping>
    65         <servlet-name>Kaptcha</servlet-name>
    66         <url-pattern>/Kaptcha.jpg</url-pattern>
    67     </servlet-mapping>
    68 </web-app>

![复制代码][30184205_fEzN.gif]

### 1.3、显示生成的验证码 ###

在页面index.jsp显示验证码

![复制代码][30184205_fEzN.gif]

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                      
    57                 </td>
    58                 <td>
    59                     <input type="button" value="提交" onclick="doSubmit()">
    60                 </td>
    61             </tr>
    62         </table>
    63     </form>    
    64   </body>
    65 </html>

![复制代码][30184205_fEzN.gif]

运行效果如下图所示：

### 1.4、在服务器端验证提交的验证码 ###

用户在form表单中提交了验证码之后，我们会在服务器端进行验证，编写一个VerifyServlet，代码如下：

![复制代码][30184205_fEzN.gif]

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 }

![复制代码][30184205_fEzN.gif]

在web.xml中注册VerifyServlet

![复制代码][30184205_fEzN.gif]

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>

![复制代码][30184205_fEzN.gif]

运行结果如下：

1、验证码不输入

2、输入错误的验证码

3、输入正确的验证码

使用kaptcha生成验证码感觉挺不错的，非常好用和方便。

转载于:https://my.oschina.net/zhanghaiyang/blog/593260

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220113/343b66a192cd42e998578a56dc9b8fb5.png
[30184205_fEzN.gif]: /images/20220113/59e7c6ec57c24ca7a545319ebaa68d03.png