驗證碼原理及驗證

驗證碼的原理

驗證碼的作用:

 驗證碼是是一種區分用戶是計算機還是人的公共全自動程序,可以防止:惡意破解密碼、刷票、論壇灌水、有效防止某個黑客對某一特定註冊用戶,用特定程序暴力破解方式進行不斷的登錄嘗試。實際上驗證碼是現在很多網站通行的方式,我們利用比較簡易的方式實現了這個功能。

生成驗證碼

生成驗證碼這個功能已經特別成熟了 在網上可以找到很多資源

以下是生成驗證碼的相關代碼:

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,因為後台校驗驗證碼是否正確要依靠這一步

// 保存生成的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");

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理
【其他文章推薦】

USB CONNECTOR掌控什麼技術要點? 帶您認識其相關發展及效能

台北網頁設計公司這麼多該如何選擇?

※智慧手機時代的來臨,RWD網頁設計為架站首選

※評比南投搬家公司費用收費行情懶人包大公開

※幫你省時又省力,新北清潔一流服務好口碑

※回頭車貨運收費標準

您可能也會喜歡…