驗證碼的原理
驗證碼的作用：
驗證碼是是一種區分使用者是計算機還是人的公共全自動程式，可以防止：惡意破解密碼、刷票、論壇灌水、有效防止某個黑客對某一特定註冊使用者，用特定程式暴力破解方式進行不斷的登入嘗試。實際上驗證碼是現在很多網站通行的方式，我們利用比較簡易的方式實現了這個功能。
生成驗證碼
生成驗證碼這個功能已經特別成熟了 在網上可以找到很多資源
以下是生成驗證碼的相關程式碼：
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位數字+字母的驗證碼
生成的驗證碼 將存放到兩個地方：
- Session中
- 放到圖片上去
最重要的是 將驗證碼存入Session，因為後臺校驗驗證碼是否正確要依靠這一步
// 儲存生成的5位驗證碼
request.getSession().setAttribute("RANDOMCODE_IN_SESSION", vCode);
前端頁面實現驗證碼的切換
在很多應用中 ，我們都會看見驗證碼的切換操作
比如：點選圖片切換，或者點選後面文字（類如 看不清，換一張） 進行切換
其實 切換很簡單 只是將圖片元素 的src 屬性 變換一下就可以完成
這裡給驗證碼圖片 和 換一張文字新增點選事件
驗證碼：<input type="text" maxlength="5" required="required" name ="randomcode">
<img src="/createRandomcode" style="cursor: pointer;" onclick="change();" id="randomcodeImg">
<a href="" onclick="change();">換一張</a><br>
點選事件 是一個名字為change函式
function change(){
// 因為有快取 所以加一個隨機數 表示不同的請求
document.getElementById("randomcodeImg").src="/createRandomcode?"+new Date().getTime();
}
注意這裡：src不能也寫 /createRandomcode，因為瀏覽器有快取 因為之前的src就是它
所以點選時不會發生切換，所以我們可以加個隨機數代表每一次都是一個新的請求。
這樣就可以實現驗證碼的切換了。
驗證碼的後臺驗證
驗證其實也很簡單,只需要把輸入的和圖片中的驗證碼進行對比即可
獲取輸入的驗證碼：
String code = req.getParameter("randomcode");
獲取圖片中的驗證碼：
(生成的時候 已經存在Session中 這時只需要從Session中取出即可)
String Imgcode = req.getSession().getAttribute("RANDOMCODE_IN_SESSION").toString();
兩者進行對比驗證:
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中這次的驗證碼（驗證碼一次性使用） 避免重複提交
// 避免重複提交 去除Session中這一次驗證碼
req.getSession().removeAttribute("RANDOMCODE_IN_SESSION");