谷歌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>
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 }
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 }
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>