D Google验证码API的使用---kaptcha

谷歌kaptcha图片验证码的使用

谷歌验证码 kaptcha 使用步骤如下:

  1、导入谷歌验证码的 jar 包

    kaptcha-2.3.2.jar

  2、在 web.xml 中去配置用于生成验证码的 Servlet 程序

1 <servlet>
2         <servlet-name>KaptchaServlet</servlet-name>
3         <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
4 </servlet>
5 
6 <servlet-mapping>
7         <servlet-name>KaptchaServlet</servlet-name>
8         <url-pattern>/kaptcha.jpg</url-pattern>
9 </servlet-mapping>

测试: http://localhost:8080/book/kaptcha.jpg 

  3、在表单中使用img标签去显示验证码并使用它

   新建kaptcha.jsp

 1 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
 2 <html>
 3 <head>
 4     <title>kaptcha</title>
 5 </head>
 6 <body>
 7 
 8 <form action="http://localhost:8080/book/testServlet" method="get">
 9     用户名:<input type="text" name="username" > <br>
10     验证码:<input type="text" style="width: 80px;" name="code">
11     <img src="http://localhost:8080/book/kaptcha.jpg" alt="" style="width: 100px; height: 28px;"> <br>
12     <input type="submit" value="登录"> </form>
13 </body>
14 </html>
kaptcha.jsp

  4、在服务器获取谷歌生成的验证码和客户端发过来的验证码比较使用

   新建TestServlet.java

 1 package com.gychen.web;
 2 
 3 import javax.servlet.ServletException;
 4 import javax.servlet.http.HttpServlet;
 5 import javax.servlet.http.HttpServletRequest;
 6 import javax.servlet.http.HttpServletResponse;
 7 import java.io.IOException;
 8 
 9 import static com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY;
10 
11 public class TestServlet extends HttpServlet {
12     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
13 
14         //获取Session中的验证码
15         String token = (String) request.getSession().getAttribute(KAPTCHA_SESSION_KEY);
16 
17         request.getSession().invalidate();
18         //获取验证码
19         String code = request.getParameter("code");
20 
21         //获取用户名
22         String username = request.getParameter("username");
23 
24         if (token != null && token.equalsIgnoreCase(code)){
25             System.out.println("保存到数据库"+username);
26             response.sendRedirect(request.getContextPath()+"/pages/test/ok.jsp");
27         }else {
28 
29             if (token != null && !token.equalsIgnoreCase(code)){
30                 System.out.println("验证码错误");
31             }
32 
33             else {
34                 System.out.println("请不要重复提交表单");
35             }
36         }
37     }
38 
39 
40 }
TestServlet.java

  5、以图书项目为例:

 1 /**
 2      * 处理注册功能
 3      */
 4     protected void regist(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException{
 5 
 6         //获取Session中的验证码
 7         String token = (String) req.getSession().getAttribute(KAPTCHA_SESSION_KEY);
 8         //删除Session中的验证码,或者销毁
 9         req.getSession().removeAttribute(KAPTCHA_SESSION_KEY);
10 
11         //        1、获取请求参数
12         String username = req.getParameter("username");
13         String password = req.getParameter("password");
14 //        String repwd = req.getParameter("repwd");
15         String email = req.getParameter("email");
16         String verification_code = req.getParameter("verification_code");
17 
18         //使用BeanUtils注入参数
19 //        try {
20 //            User user = new User();
21 //            System.out.println("参数注入前:"+user);
22 //            /**
23 //             * 把所有请求的参数都注入到user对象中
24 //             */
25 //            BeanUtils.populate(user,req.getParameterMap());
26 //            System.out.println("参数注入之后:"+user);
27 //        } catch (Exception e) {
28 //            e.printStackTrace();
29 //        }
30 
31         //使用封装好的bean工具类来注入参数
32 //        //法一
33 //        User user = new User();
34 //        WebUtils.copyParamToBean(req.getParameterMap(),user);
35 //        //法二
36 //        User user = (User) WebUtils.copyParamToBean(req.getParameterMap(),new User());
37 
38         //法三
39         User user =  WebUtils.copyParamToBean(req.getParameterMap(),new User());
40 
41         //保存用户信息到Sesion域中,为了注册完登陆后显示用户名
42         req.getSession().setAttribute("user",user);
43 
44 //        2、检查验证码是否正确
45         if (token != null && token.equalsIgnoreCase(verification_code)){
46 
47 //          Ⅰ、正确
48 
49 //              3、检查用户名是否可用
50             if(userService.existUsername(username)){
51 //                  ①、不可用
52 //                      跳回注册页面
53                 System.out.println("用户名["+username+"]已存在");
54                 //把错误信息和回显保存到Request域中
55                 req.setAttribute("registError","用户名已存在");
56                 req.setAttribute("username",username);
57                 req.setAttribute("email",email);
58                 req.getRequestDispatcher("/pages/user/regist.jsp").forward(req,resp);
59             }else{
60 //                  ②、可用
61                 System.out.println("用户名["+username+"]可用");
62 //                      调用Service保存到数据库
63                 userService.registUser(new User(null,username,password,email));
64 //                      跳到注册成功页面
65                 req.getRequestDispatcher("/pages/user/regist_success.jsp").forward(req,resp);
66             }
67 
68         }else if (token != null && !token.equalsIgnoreCase(verification_code)){
69 //          Ⅱ、错误
70 //              跳回注册页面
71             System.out.println("验证码错误["+verification_code+"]错误");
72             //把错误信息和回显保存到Request域中
73             req.setAttribute("registError","验证码错误");
74             req.setAttribute("username",username);
75             req.setAttribute("email",email);
76             req.getRequestDispatcher("/pages/user/regist.jsp").forward(req,resp);
77         }else if (token ==null){
78 
79             //Ⅲ、重复提交
80             //跳回注册页面
81             System.out.println("表单重复提交");
82             //把错误信息和回显保存到Request域中
83             req.setAttribute("registError","表单重复提交");
84             req.setAttribute("username",username);
85             req.setAttribute("email",email);
86             req.getRequestDispatcher("/pages/user/regist.jsp").forward(req,resp);
87         }
88     }
regist();
1  <label>验证码:</label>
2  <input class="itxt" type="text" name="verification_code" style="width: 100px;" id="code"/>
3  <img alt="" src="kaptcha.jpg" style="float: right; margin-right: 0px;width: 110px;height: 30px;">
4  <br />

   6、点击验证码图片刷新验证码 

 1         <script type="text/javascript">
 2             // 页面加载完成之后
 3             $(function () {
 4 
 5                 /**
 6                  * 给验证码图片添加单击事件
 7                  */
 8                 $("#code_img").click(function () {
 9                     //this.src表示img标签的src属性,可读可写
10                     //加时间戳是为了兼容IE和火狐点击不重新访问的问题。有缓存,请求参数一样的话会先从缓存里找
11                     this.src = "${pageScope.basePath}kaptcha.jpg?=" + new Date();
12                 });
13 
14             });
15 
16         </script>
click刷新事件

 

posted @ 2020-04-11 20:50  nuister  阅读(867)  评论(0编辑  收藏  举报