使用Servlet和谷歌 kaptcha做一個簡單驗證碼
阿新 • • 發佈：2021-12-21
使用谷歌 kaptcha做一個簡單驗證碼的步驟:
- 匯入谷歌驗證碼的 jar 包 - kaptcha-2.3.2.jar
- 在web.xml 中去配置用於生成驗證碼的 Servlet 程式
- 在表單中使用 img 標籤去顯示驗證碼圖片並使用它,使用jquery進行圖片的切換
- 在伺服器獲取谷歌生成的驗證碼和客戶端傳送過來的驗證碼比較使用
匯入谷歌驗證碼的 jar 包 - kaptcha-2.3.2.jar
在WEB-IEN資料夾下新建lib資料夾將jar包放入，右鍵jar包，選擇Add as library
在web.xml 中去配置用於生成驗證碼的 Servlet 程式
<servlet> <servlet-name>KaptchaServlet</servlet-name> <servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>KaptchaServlet</servlet-name> <url-pattern>/kaptcha.jpg</url-pattern> </servlet-mapping>
在表單中使用 img 標籤去顯示驗證碼圖片並使用它
index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>驗證碼</title> </head> <body> <% //獲取網址初始路徑 String bashPath=request.getScheme()+"://"+request.getServerName()+":"+request.getLocalPort()+"/"+request.getContextPath(); %> <form action="/code" method="get"> <input type="text" name="code" style="width: 80px;"> 驗證碼：<img src="http://localhost:8080/kaptcha.jpg" style="width: 100px; height: 28px;"> <br> <input type="submit" value="提交"> </form> </body> <%-- 匯入jquery庫 --%> <script src="js/jquery-1.8.3.min.js"></script> <script> //進入頁面就會執行,定義一個點選事件 $(function () { //定義一個點選事件,點選圖片時改變圖片 $("form>img").on("click",function () { this.src="<%=bashPath%>/kaptcha.jpg?date="+new Date(); }) }) </script> </html>
在伺服器獲取谷歌生成的驗證碼和客戶端傳送過來的驗證碼比較使用
CodeServlet.jsp
/**驗證碼服務 * @author admin */ @WebServlet("/code") public class CodeServlet extends HttpServlet { @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //1.獲取session中的驗證碼 HttpSession session = req.getSession(); String sessionCode = (String)session.getAttribute(KAPTCHA_SESSION_KEY); //2.刪除session中的驗證碼 session.removeAttribute(KAPTCHA_SESSION_KEY); //3.獲取使用者輸入的驗證碼 String code = req.getParameter("code"); //4.判斷驗證碼是否正確 if(sessionCode!=null && sessionCode.equalsIgnoreCase(code)){ //驗證成功,重定向到成功介面 resp.sendRedirect("success.jsp"); }else{ //驗證失敗,重定向到原始介面 resp.sendRedirect("index.jsp"); } } @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doPost(req,resp); } }
驗證成功介面
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> </head> <body> 驗證成功!!! </body> </html>
執行截圖:
輸入驗證碼後: