Web網頁實現登錄驗證碼功能

三部分內容

1、在登錄頁面生成驗證碼圖片

2、點擊圖片更換新的驗證碼圖片

3、點擊登錄，判定輸入驗證碼與實際驗證碼是否一致

1、如何生成一個驗證碼圖片，放置在登錄頁面？

servlet：

package com.zs.ssh.yzmServlet;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics2D;
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;
import javax.servlet.http.HttpSession;

/**
 * Servlet implementation class yzmServlet
 */
@WebServlet("/yzmServlet")
public class yzmServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public yzmServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		this.doPost(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// 首先設置瀏覽器不緩存
	    response.setHeader("cache-control", "no-cache");

	    response.setHeader("Expire", "-1"); // >0爲緩存

	    response.setHeader("pragma", "no-cache");

	    // 存儲正確的驗證碼

	    String vali_code = "";

	    String Vali_str = "abcdefghijklmnopqrstuvwsyz1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ";

	    Color[] colors =

	        { Color.BLACK, Color.RED, Color.BLUE };

	    // 1.創建圖像

	    int width = 110, height = 40;

	    int x_offset = 5, y_offset = 28;

	    BufferedImage img = new BufferedImage(width, height, BufferedImage.TYPE_3BYTE_BGR);

	    // 2.創建畫布

	    Graphics2D g = img.createGraphics();

	    // 3.爲畫布添加背景顏色爲亮灰色

	    g.setColor(Color.LIGHT_GRAY);

	    g.fillRect(0, 0, width, height);//fillRect是包括矩形框內部

	    // 4.爲畫布添加邊框

	    g.setColor(Color.BLUE);

	    g.drawRect(0, 0, width - 1, height - 1);//drawRect是繪製矩形邊框

	    // 5.繪製干擾線

	    for (int i = 0; i < 10; i++)
	    {
	        g.setColor(new Color(randNum(0, 255), randNum(0, 255), randNum(0, 255)));

	        g.drawLine(randNum(0, width), randNum(0, height), randNum(0, width), randNum(0, height));

	    }
	    g.setFont(new Font("黑體", Font.BOLD, 20));
	    for (int i = 0; i < 4; i++)
	    {
	        int r = randNum(-180, 180);

	        String code = Vali_str.charAt(randNum(0, Vali_str.length() - 1)) + "";

	        g.rotate(r / 180 * Math.PI);

	        g.setColor(colors[randNum(0, colors.length)]);

	        g.drawString(code, x_offset + i * 30, y_offset);

	        g.rotate(-r / 180 * Math.PI);

	        vali_code += code;

	    }

	    //將驗證碼的內容存儲在HttpSession中

	    HttpSession session = request.getSession();
	    
	    session.setAttribute("Valicode", vali_code);

	    // 通過response的輸出流打給瀏覽器

	    ImageIO.write(img, "jpg", response.getOutputStream());
	}
	private Random random = new Random();

	//隨機生成begin和end之間的一個int值

	private int randNum(int begin, int end)

	{

	    return random.nextInt(end - begin) + begin;

	}
}

html頁面：

<input type="text" placeholder="用戶名" /><!-- 用戶名 -->
<input type="password"  id="password"/><!-- 密碼 -->
<img src="/ZXTM/yzmServlet" οnclick="changeValiImage(this)" /><!-- 驗證碼圖片 -->
<input type="text" placeholder="輸入驗證碼" name="ValiImage" /><!-- 輸入驗證碼文本 -->
<button οnclick="doLogin()" >登錄</button>

2、如何切換驗證圖片？

<!-- 驗證碼圖片點擊切換 -->
<!-- 通過Date來改變每次訪問的url不同 -->
<script type="text/javascript">
    function changeValiImage(img){
	img.src = "/ZXTM/yzmServlet?time=" + new Date().getTime();
    }
</script>

2、如何判定驗證碼的一致性？

在  doLogin() 登錄的方法裏面：

獲取網頁文本信息

再獲取getSession().getAttribute("Valicode")裏面保存的生成的驗證碼信息

String vali_user = getRequest().getParameter("ValiImage");
String vali_sys =  getSession().getAttribute("Valicode").toString();