登入功能圖片驗證碼的實現
阿新 • • 發佈：2019-01-23
首先從網上下載一個生成驗證碼的Servlet：
package com.train.controller; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.image.BufferedImage; import java.io.BufferedReader; import java.io.FileInputStream; import java.io.IOException; import java.io.InputStreamReader; import java.util.ArrayList; import java.util.List; import java.util.Random; import javax.imageio.ImageIO; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet("/CodeServlet") public class CodeServlet extends HttpServlet { private static final long serialVersionUID = 1L; // 集合中儲存所有成語 private List<String> words = new ArrayList<String>(); public CodeServlet() { super(); } @Override public void init() throws ServletException { // 初始化階段，讀取new_words.txt // web工程中讀取 檔案，必須使用絕對磁碟路徑 String path = getServletContext().getRealPath("/WEB-INF/new_words.txt"); try { BufferedReader reader = new BufferedReader(new InputStreamReader(new FileInputStream(path), "utf-8")); String line; while ((line = reader.readLine()) != null) { words.add(line); } reader.close(); } catch (IOException e) { e.printStackTrace(); } } /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse * response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { int width = 120; int height = 36; // 步驟一 繪製一張記憶體中圖片 BufferedImage bufferedImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB); // 步驟二 圖片繪製背景顏色 ---通過繪圖物件 Graphics graphics = bufferedImage.getGraphics();// 得到畫圖物件 --- 畫筆 // 繪製任何圖形之前 都必須指定一個顏色 graphics.setColor(getRandColor(200, 250)); graphics.fillRect(0, 0, width, height); // 步驟三 繪製邊框 graphics.setColor(Color.WHITE); graphics.drawRect(0, 0, width - 1, height - 1); // 步驟四 四個隨機數字 Graphics2D graphics2d = (Graphics2D) graphics; // 設定輸出字型 graphics2d.setFont(new Font("宋體", Font.BOLD, 18)); Random random = new Random();// 生成隨機數 int index = random.nextInt(words.size()); String word = words.get(index);// 獲得成語 // 定義x座標 int x = 10; for (int i = 0; i < word.length(); i++) { // 隨機顏色 graphics2d .setColor(new Color(20 + random.nextInt(110), 20 + random.nextInt(110), 20 + random.nextInt(110))); // 旋轉 -30 --- 30度 int jiaodu = random.nextInt(60) - 30; // 換算弧度 double theta = jiaodu * Math.PI / 180; // 獲得字母數字 char c = word.charAt(i); // 將c 輸出到圖片 graphics2d.rotate(theta, x, 20); graphics2d.drawString(String.valueOf(c), x, 20); graphics2d.rotate(-theta, x, 20); x += 30; } // 將驗證碼內容儲存session作用域 request.getSession().setAttribute("checkcode_session", word); // 步驟五 繪製干擾線 graphics.setColor(getRandColor(160, 200)); int x1; int x2; int y1; int y2; for (int i = 0; i < 30; i++) { x1 = random.nextInt(width); x2 = random.nextInt(12); y1 = random.nextInt(height); y2 = random.nextInt(12); graphics.drawLine(x1, y1, x1 + x2, x2 + y2); } // 將上面圖片輸出到瀏覽器 ImageIO graphics.dispose();// 釋放資源 ImageIO.write(bufferedImage, "jpg", response.getOutputStream()); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse * response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub doGet(request, response); } private Color getRandColor(int fc, int bc) { // 取其隨機顏色 Random random = new Random(); if (fc > 255) { fc = 255; } if (bc > 255) { bc = 255; } int r = fc + random.nextInt(bc - fc); int g = fc + random.nextInt(bc - fc); int b = fc + random.nextInt(bc - fc); return new Color(r, g, b); } }
如程式碼裡寫的，我們需要一個new_words.txt用來生成圖片驗證碼：
在登入頁面新增驗證碼：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <link rel="stylesheet" href="css/style.css" /> </head> <body> <div class="register"> <form action="/Train1/loginServlet" method="post"> <div class="login-box"> <table width="350" height="200"> <tr align="center"> <td><div>使用者名稱：</div></td> <td colspan="2"><input type="text" name="userName" /></td> </tr> <tr align="center"> <td><div>密 碼：</div></td> <td colspan="2"><input type="password" name="passWord" /></td> </tr> <tr> <td>驗證碼：<input type="text" id="checkCode" name="checkCode" /></td> <td><img id="imageCode" onclick="changeImage()" src="CodeServlet"></td> </tr> <tr align="center"> <td colspan="3"><input type="submit" style="width: 50px; background-color: red;" value="登入" /></td> </tr> <tr> <td><%=request.getAttribute("msg")%></td> </tr> </table> </div> </form> </div> <script type="text/javascript"> function changeImage() { document.getElementById("imageCode").src="CodeServlet?"+new Date().getTime(); } </script> </body> </html>
changeImage()方法裡的+new Date().getTime()是為了讓使用者點選一下就能換圖片。
在Servlet裡驗證使用者輸入的驗證碼是否正確，如果不正確就給出提示，拒絕登入：
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); String userName = request.getParameter("userName"); String passWord = MD5Utils.md5(request.getParameter("passWord")); userModel model = new userModel(); model.setUserName(userName); model.setPassWord(passWord); userService service = new userService(); if (request.getSession().getAttribute("checkcode_session").equals(request.getParameter("checkCode"))) { try { userModel md = service.selectByNameAndPass(model); if (md != null) { // 找到記錄，登入成功 request.getSession().setAttribute("userName", md.getUserName()); request.getRequestDispatcher("welcome.jsp").forward(request, response); } else { request.setAttribute("msg", "登入失敗！請重試！"); request.getRequestDispatcher("login.jsp").forward(request, response); } } catch (Exception e) { e.printStackTrace(); } } else { request.setAttribute("msg", "驗證碼輸入有誤！請重試！"); request.getRequestDispatcher("login.jsp").forward(request, response); } }
即可實現登入圖片驗證碼功能，點選一次換一次圖片。