# 驗證碼的原理 ## **驗證碼的作用：** 　驗證碼是是一種區分使用者是計算機還是人的公共全自動程式，可以防止：惡意破解密碼、刷票、論壇灌水、有效防止某個黑客對某一特定註冊使用者，用特定程式暴力破解方式進行不斷的登入嘗試。實際上驗證碼是現在很多網站通行的方式，我們利用比較簡易的方式實現了這個功能。 ## 生成驗證碼 生成驗證碼這個功能已經特別成熟了 在網上可以找到很多資源 以下是生成驗證碼的相關程式碼： ```java package com._yhnit.randomcode; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.image.BufferedImage; import java.io.IOException; 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; /** * 生成驗證碼的Servlet * @author yhn * */ @WebServlet("/createRandomcode") public class RandomCodeServlet extends HttpServlet{ private static final long serialVersionUID = 1L; public RandomCodeServlet() { super(); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 響應頭資訊 response.setHeader("Pragma", "No-Cache"); response.setHeader("Cache-Control", "no-cache"); response.setDateHeader("Expries", 0); // 隨機數生成類 Random random = new Random(); // 定義驗證碼的位數 int size = 5; // 定義變數儲存生成的驗證碼 String vCode = ""; char c; // 產生驗證碼 for (int i = 0; i < size; i++) { // 產生一個26以內的隨機整數 int number = random.nextInt(26); // 如果生成的是偶數，則隨機生成一個數字 if (number % 2 == 0) { c = (char) ('0' + (char) ((int) (Math.random() * 10))); // 如果生成的是奇數，則隨機生成一個字母 } else { c = (char) ((char) ((int) (Math.random() * 26)) + 'A'); } vCode = vCode + c; } // 儲存生成的5位驗證碼 request.getSession().setAttribute("RANDOMCODE_IN_SESSION", vCode); // 驗證碼圖片的生成 // 定義圖片的寬度和高度 int width = (int) Math.ceil(size * 20); int height = 30; BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB); // 獲取圖片的上下文 Graphics gr = image.getGraphics(); // 設定圖片背景顏色 gr.setColor(Color.WHITE); gr.fillRect(0, 0, width, height); // 設定圖片邊框 gr.setColor(Color.GRAY); gr.drawRect(0, 0, width - 1, height - 1); // 畫十條幹擾線 for (int i = 0; i < 5; i++) { int x1 = random.nextInt(width); int y1 = random.nextInt(height); int x2 = random.nextInt(width); int y2 = random.nextInt(height); gr.setColor(randomColor()); gr.drawLine(x1, y1, x2, y2); } // 設定字型，畫驗證碼 gr.setColor(randomColor()); gr.setFont(randomFont()); gr.drawString(vCode, 10, 22); // 影象生效 gr.dispose(); // 輸出到頁面 ImageIO.write(image, "JPEG", response.getOutputStream()); } // 生成隨機的顏色 private Color randomColor() { int red = r.nextInt(150); int green = r.nextInt(150); int blue = r.nextInt(150); return new Color(red, green, blue); } private String[] fontNames = { "宋體", "華文楷體", "黑體", "微軟雅黑", "楷體_GB2312" }; private Random r = new Random(); // 生成隨機的字型 private Font randomFont() { int index = r.nextInt(fontNames.length); String fontName = fontNames[index];// 生成隨機的字型名稱 int style = r.nextInt(4); int size = r.nextInt(3) + 24; // 生成隨機字號, 24 ~ 28 return new Font(fontName, style, size); } } ``` 上述程式碼中 定義了生成5位數字+字母的驗證碼 生成的驗證碼 將存放到兩個地方： 1. Session中 2. 放到圖片上去 **最重要的是 將驗證碼存入Session**，因為後臺校驗驗證碼是否正確要依靠這一步 ```java // 儲存生成的5位驗證碼 request.getSession().setAttribute("RANDOMCODE_IN_SESSION", vCode); ``` ## 前端頁面實現驗證碼的切換 在很多應用中 ，我們都會看見驗證碼的切換操作 比如：點選圖片切換，或者點選後面文字（類如 看不清，換一張） 進行切換 其實 切換很簡單 **只是將圖片元素 的src 屬性 變換一下就可以完成** 這裡給驗證碼圖片 和 換一張文字新增點選事件 ```jsp 驗證碼： 換一張
``` 點選事件 是一個名字為change函式 ```javascript function change(){ // 因為有快取 所以加一個隨機數 表示不同的請求 document.getElementById("randomcodeImg").src="/createRandomcode?"+new Date().getTime(); } ``` 注意這裡：src不能也寫 /createRandomcode，因為瀏覽器有快取 因為之前的src就是它 所以點選時不會發生切換，所以**我們可以加個隨機數代表每一次都是一個新的請求。** 這樣就可以實現驗證碼的切換了。 ## 驗證碼的後臺驗證 驗證其實也很簡單,只需要把輸入的和圖片中的驗證碼進行對比即可 獲取輸入的驗證碼： ```java String code = req.getParameter("randomcode"); ``` 獲取圖片中的驗證碼： (生成的時候 已經存在Session中 這時只需要從Session中取出即可) ```java String Imgcode = req.getSession().getAttribute("RANDOMCODE_IN_SESSION").toString(); ``` 兩者進行對比驗證: ```java if (!code.equalsIgnoreCase(Imgcode)) { // 設定一些錯誤提示 提示使用者輸入錯誤 req.getSession().setAttribute("errorMes", "請輸入正確的驗證碼或已經過期"); req.getRequestDispatcher("randomcode/RandomCodeLogin.jsp").forward(req, resp); return; } // 此時驗證碼成功 System.out.println("驗證碼成功"); // 避免重複提交 去除Session中這一次驗證碼 req.getSession().removeAttribute("RANDOMCODE_IN_SESSION"); // 繼續驗證使用者名稱和密碼 .... ``` 驗證碼驗證成功之後 要銷燬Session中這次的驗證碼（驗證碼一次性使用） 避免重複提交 ```java // 避免重複提交 去除Session中這一次驗證碼 req.getSession().removeAttribute("RANDOMCODE_IN_SESSION