圖形驗證碼的實現（java）

前言

圖形驗證碼在我們日常生活中是很常見的，一般用於登錄頁面來避免簡單的網絡機器人來不斷地請求你的數據。以前總是覺得這個很神奇，總以爲是先自己做好一張張的靜態圖片然後切換即可。當時也存在個疑問，如果是這樣，那豈不是會重複？知道後來看到同事寫的代碼才知道具體的實現過程。

實現過程

做法簡述

1、首先定義一個字符串，比如Strng a = "123456789abcABC..."。

2、每次根據步驟一字符串的長度產生一個隨機數，然後截取字符串的一個字符。如果你想生成四個，那麼重複四次這個操作即可。

3、製作圖片高和寬。

4、定義顏色和產生干擾的線條。

5、將驗證碼（步驟二生成的數字和字母組合）保存在session中，用於對比客戶端輸入是否正確。

6、給前端 請求返回一個圖片。

代碼實現過程

核心代碼，採用最常見的servlet

package com.read.utils;

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.ServletOutputStream;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.apache.log4j.Logger;

@SuppressWarnings("serial")
public class VerificationCode extends HttpServlet { 

	private static Logger Log = Logger.getLogger("sysLog");
	
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
       this.doPost(request, response); 
   } 

   public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
      
	   // 驗證碼圖片的寬度。 
        int width = 100; 
        // 驗證碼圖片的高度。 
        int height = 40; 
        BufferedImage buffImg = new BufferedImage(width, height,BufferedImage.TYPE_INT_RGB); 
        Graphics2D g = buffImg.createGraphics(); 
        // 創建一個隨機數生成器類。 
        Random random = new Random();         
        // 設定圖像背景色(因爲是做背景，所以偏淡) 
        g.setColor(getRandColor(200, 250)); 
        g.fillRect(0, 0, width, height); 
        // 創建字體，字體的大小應該根據圖片的高度來定。 
        Font font = new Font("Times New Roman", Font.HANGING_BASELINE, 28);      // 設置字體。 
        g.setFont(font); 
        // 畫邊框。        
        g.setColor(Color.BLACK);         
        g.drawRect(0, 0, width - 1, height - 1); 
        // 隨機產生155條幹擾線，使圖象中的認證碼不易被其它程序探測到。 
        //g.setColor(Color.GRAY); 
        g.setColor(getRandColor(160,200)); 
        for (int i = 0; i < 155; i++) { 
            int x = random.nextInt(width); 
            int y = random.nextInt(height); 
            int xl = random.nextInt(12); 
            int yl = random.nextInt(12); 
            g.drawLine(x, y, x + xl, y + yl); 
        } 
        // randomCode用於保存隨機產生的驗證碼，以便用戶登錄後進行驗證。 
        StringBuffer randomCode = new StringBuffer(); 
        // 設置默認生成4個驗證碼 
        int length = 4; 
        // 設置備選驗證碼:包括"a-z"和數字"0-9"          
        String base = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; 
        int size = base.length(); 
        // 隨機產生4位數字的驗證碼。 
        for (int i = 0; i < length; i++) { 
        	// 得到隨機產生的驗證碼數字。 
        	int start = random.nextInt(size); 
            String strRand = base.substring(start, start + 1); 
            // 用隨機產生的顏色將驗證碼繪製到圖像中。 
            // 生成隨機顏色(因爲是做前景，所以偏深) //g.setColor(getRandColor(1, 100)); 81              
            //調用函數出來的顏色相同，可能是因爲種子太接近，所以只能直接生成 
            g.setColor(new Color(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt(110))); 
            g.drawString(strRand, 15 * i + 6, 24); 
            // 將產生的四個隨機數組合在一起。 
            randomCode.append(strRand); 
        } 
        // 將四位數字的驗證碼保存到Session中。 
        HttpSession session = request.getSession(); 
        session.setAttribute("checkCode", randomCode.toString()); 
        //圖象生效 
        g.dispose(); 
        // 禁止圖像緩存。 
        response.setHeader("Pragma", "no-cache"); 
        response.setHeader("Cache-Control", "no-cache");
        response.setDateHeader("Expires", 0);
        response.setContentType("image/jpeg");
        // 將圖像輸出到Servlet輸出流中。
        ServletOutputStream sos = response.getOutputStream();
        ImageIO.write(buffImg, "jpeg", sos);
        sos.flush();
        sos.close();
    }

    Color getRandColor(int fc, int bc) {// 給定範圍獲得隨機顏色
        Random random = new Random();
        if (fc > 255) {
        	fc = 255;
        }
        if (bc > 255) {
        	bc = 255;
        }
        int r = fc + random.nextInt(bc - fc);
        int g = fc + random.nextInt(bc - fc);
        int b = fc + random.nextInt(bc - fc);
        return new Color(r, g, b);
    }

}

在web.xml註冊

<!-- 驗證碼 -->
	<servlet>
    	<servlet-name>verificationCode</servlet-name>
    	<servlet-class>com.read.utils.VerificationCode</servlet-class>
  	 </servlet>	
  	 
  	<servlet-mapping>
    	<servlet-name>verificationCode</servlet-name>
    	<url-pattern>/common/image</url-pattern>
  	</servlet-mapping>

前端JavaScript調用

function reloadImage() {
	var localObj = window.location;
	var contextPath = localObj.pathname.split("/")[1];
	var basePath = localObj.protocol + "//" + localObj.host + "/" + contextPath;
	$("#security-code-pic").attr("src",basePath + "/common/image?rand=" + Math.random());
}

html標籤

  <img alt="加載中。。。"   id="security-code-pic" onclick="reloadImage()" class="security-code-pic">

注意事項

一般來說，驗證碼的調用一般要包括以下幾種情況：

1、剛進入頁面

2、點擊驗證碼處自動刷新

3、不過使用ajax 異步還是表單提交數據，賬號密碼不匹配的話驗證碼需要重新獲取。

結語

到此圖形驗證碼的製作和調用全部完成了，當然大家可以根據自己的需求修改出更好看的驗證碼圖片。