Java生成驗證碼並進行驗證

一、實現思路

  1. 使用BufferedImage用於在內存中存儲生成的驗證碼圖片
  2. 使用Graphics來進行驗證碼圖片的繪製,並將繪製在圖片上的驗證碼存放到session中用於後續驗證
  3. 最後通過ImageIO將生成的圖片進行輸出
  4. 通過頁面提交的驗證碼和存放在session中的驗證碼對比來進行校驗

二、生成驗證碼

頁面通過訪問servlet來生成驗證碼,servlet中的代碼如下:

package org.test;

import java.awt.Color;
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.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * @author worm0527
 * 2016-03-22 23:15:54
 * 生成驗證碼
 */
public class ImageServlet extends HttpServlet{
    // 圖片高度
    private static final int IMG_HEIGHT = 100;
    // 圖片寬度
    private static final int IMG_WIDTH = 30;
    // 驗證碼長度
    private static final int CODE_LEN = 4;

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        // 用於繪製圖片,設置圖片的長寬和圖片類型(RGB)
        BufferedImage bi = new BufferedImage(IMG_HEIGHT, IMG_WIDTH, BufferedImage.TYPE_INT_RGB);
        // 獲取繪圖工具
        Graphics graphics = bi.getGraphics();
        graphics.setColor(new Color(100, 230, 200)); // 使用RGB設置背景顏色
        graphics.fillRect(0, 0, 100, 30); // 填充矩形區域

        // 驗證碼中所使用到的字符
        char[] codeChar = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456".toCharArray();
        String captcha = ""; // 存放生成的驗證碼
        Random random = new Random();
        for(int i = 0; i < CODE_LEN; i++) { // 循環將每個驗證碼字符繪製到圖片上
            int index = random.nextInt(codeChar.length);
            // 隨機生成驗證碼顏色
            graphics.setColor(new Color(random.nextInt(150), random.nextInt(200), random.nextInt(255)));
            // 將一個字符繪製到圖片上,並制定位置(設置x,y座標)
            graphics.drawString(codeChar[index] + "", (i * 20) + 15, 20);
            captcha += codeChar[index];
        }
        // 將生成的驗證碼code放入sessoin中
        req.getSession().setAttribute("code", captcha);
        // 通過ImageIO將圖片輸出
        ImageIO.write(bi, "JPG", resp.getOutputStream());
    }

}

三、校驗驗證碼

通過前臺提交的驗證碼與session中數據進行對比來校驗驗證碼,代碼如下:

package org.test;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class CheckCodeServlet extends HttpServlet{

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        // 獲取存放在session中的驗證碼
        String code = (String) req.getSession().getAttribute("code");
        // 獲取頁面提交的驗證碼
        String inputCode = req.getParameter("code");
        if(code.toLowerCase().equals(inputCode.toLowerCase())) { // 驗證碼不區分大小寫
            // 驗證成功,跳轉到成功頁面
            req.getRequestDispatcher("/success.jsp").forward(req, resp);
        } else { // 驗證失敗
            req.getRequestDispatcher("/fail.jsp").forward(req, resp);
        }
    }

}

驗證碼提交頁面html代碼:

<form action="<%=request.getContextPath() %>/checkCode" method="post">
    請輸入驗證碼:<input type="text" name="code">
    <input type="submit" value="確定">
</form>
<img alt="驗證碼" id="scode" src="<%=request.getContextPath() %>/getCode" >
<a href="#" onclick="javascript:flushCode();">看不清?</a>

當生成的驗證碼不清楚時需要刷新重新生成驗證碼,js代碼如下:

function flushCode() {
    // 每次刷新的時候獲取當前時間,防止瀏覽器緩存刷新失敗
    var time = new Date();
    document.getElementById("scode").src = "<%=request.getContextPath()%>/getCode?time=" + time;
}

四、效果展示

  • 生成的驗證碼

這裏寫圖片描述

  • 驗證成功

這裏寫圖片描述

這裏寫圖片描述

  • 驗證失敗

這裏寫圖片描述

這裏寫圖片描述

五、總結

本文介紹了驗證碼的生成和驗證,生成的驗證碼比較簡單沒有添加線條等干擾因素,比較容易識別。在實際的項目中可採用其他的第三方驗證碼庫來生成驗證碼。

以上。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章