使用kaptcha生成验证码

  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生成验证码感觉挺不错的,非常好用和方便。

你可能感兴趣的:(kaptcha)