如何使用ASP.NET製作簡單的驗證碼_實用技巧

大家都知道驗證碼是以圖片形式展示的，而且是動態產生的，這樣就需要我們去畫出它，那不得不提到是GDI+繪圖了

科普一下，什麼是GDI+？
GDI+是圖形裝置介面（GDI）的進階版本， 提供了各種豐富的圖形影像處理功能。GDI+主要由二維向量圖形、影像處理和版式3部分組成。GDI+為使用各種字型、字型大小和樣式來顯示文本這種複雜任務提供了大量的支援。

下面說說驗證碼，對於驗證碼這樣的圖片，我覺得是由兩部分組成的，一部分是矩形的背景，另一部分是在其上的字母數字組合（有的時候有漢字，有的時候是純字母或者純數字，這個沒有統一規定，怎麼選擇看你~）。對於矩形的背景我們可以直接把其當成畫布，字母數字組合呢？我們可以利用隨機數去拼出一組新組合。這樣整個過程我們都想好了，下面看下代碼吧：
聲明一下，我寫的這個驗證碼為5個字元長度，由大小寫英文字母+數字隨機組合。

private readonly char[] constant = {     '0','1','2','3','4','5','6','7','8','9',    'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',     'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'};//一個由數字和大小寫英文字母組成的字元數組    protected void Page_Load(object sender, EventArgs e)   {     Bitmap bitmap = new Bitmap(100, 25);//建立一個位元影像，寬100，高25，就是我所說的第一部分，矩形背景     Graphics g = Graphics.FromImage(bitmap);//建立畫布     g.Clear(Color.YellowGreen);//為畫布填充黃綠色      Font font1 = new Font("Arial", 15);//設定字型類型和大小      Brush brush = new SolidBrush(Color.Blue);//設定畫刷顏色     Pen myPen = new Pen(Color.Blue, 5);//建立畫筆對象      StringBuilder random = new StringBuilder(5); //建立可變字串對象，用於存放隨機產生的驗證碼     Random rd = new Random();//建立一個隨機數產生器對象     for (int i = 0; i < random.Capacity; i++)     {      random.Append(constant[rd.Next(62)]);//產生一個隨機字元加到random裡     }       g.DrawString(random.ToString(), font1, brush, 10, 5);//在畫布上畫出字串       System.IO.MemoryStream ms = new System.IO.MemoryStream();//建立資料流MemoryStream      bitmap.Save(ms, System.Drawing.Imaging.ImageFormat.Gif);//指定映像的輸出格式為gif       Response.ClearContent();      Response.ContentType = "image/Gif";      Response.BinaryWrite(ms.ToArray());//輸出位元據流   }

產生的效果是這樣的：

大家可能會覺得這樣看起來很容易辨識，跟我們平時登入網站時輸入的驗證碼比起來有點像個小學生。當然，我們可以做些改變，比較加上一定的角度。

private readonly char[] constant = {     '0','1','2','3','4','5','6','7','8','9',    'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',     'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'};//一個由數字和大小寫英文字母組成的字元數組    protected void Page_Load(object sender, EventArgs e)    {      Bitmap bitmap = new Bitmap(100, 25);//建立一個位元影像，寬100，高25，就是我所說的第一部分，矩形背景      Graphics g = Graphics.FromImage(bitmap);//建立畫布      g.Clear(Color.YellowGreen);//為畫布填充黃綠色       Font font1 = new Font("Arial", 15);//設定字型類型和大小       float angle = 60;//旋轉的一個基礎角度      float length = 0;//顯示字元的基礎位置，往後看      Brush brush = new SolidBrush(Color.Blue);//設定畫刷顏色      Pen myPen = new Pen(Color.Blue, 5);//建立畫筆對象       StringBuilder random = new StringBuilder(5); //建立可變字串對象，用於存放隨機產生的驗證碼      Random rd = new Random();//建立一個隨機數產生器對象      for (int i = 0; i < random.Capacity; i++)      {        random.Append(constant[rd.Next(62)]);//產生一個隨機字元加到random裡         g.ResetTransform();//將畫布重設矩陣        SizeF size = g.MeasureString(random[random.Length - 1].ToString(), font1);//得到新產生字元的尺寸        g.TranslateTransform(length + size.Width / 2, size.Height / 2);//選擇此次旋轉的中心位置        g.RotateTransform((float)rd.NextDouble() * angle * 2 - angle);//進行隨機角度旋轉        g.DrawString(random[random.Length - 1].ToString(), font1, brush, new PointF(-size.Width / 2, -size.Height / 2));//注意，這裡不是前一個例子，一次性把5個字元全部畫出來，而是一個一個畫        length += size.Width;//保證下次畫字元的位置不會覆蓋前一次的字元      }       System.IO.MemoryStream ms = new System.IO.MemoryStream();//建立資料流MemoryStream      bitmap.Save(ms, System.Drawing.Imaging.ImageFormat.Gif);//指定映像的輸出格式為gif       Response.ClearContent();      Response.ContentType = "image/Gif";      Response.BinaryWrite(ms.ToArray());//輸出位元據流   }

這時產生的效果是這樣的：

是不是看起來更專業一些了呢？如果大家還是覺得不滿意的話，可以看下GDI+的相關內容，通過添加一些噪點的元素，或者刪除線這樣子的東西來達到提高識別難度的目的，我這裡就不一一列舉啦。
關於如何畫驗證碼我們說過了，但是還有兩點問題我還是想多說一下。
1、我們實際輸出的是一個二進位的流，如何做到顯示到頁面上與頁面其他元素共存呢？
這裡通用的一種方法就是把畫驗證碼的這段代碼放到一個獨立的Web表單頁中，在另一個需要顯示驗證碼的頁面放一個<img>元素，把其src屬性指向該驗證碼頁的url。比如我寫的一段是這樣：

複製代碼 代碼如下:

<asp:Image ID="image_validatecode" runat="server" ImageUrl="~/PublicMethod/ValidateCode.aspx" style="padding-left:3px"/>

其實這裡我是用大家通用的方法，不過我先前也有單獨寫一個web自訂控制項，專門產生驗證碼使用，但是當拖入到頁面中後運行，它還是會把頁面其他元素給覆蓋掉，具體原因我也不清楚。

2、驗證碼主要目的還是用於驗證使用的，所以我們在使用者名稱，密碼是否合法外，同時也要判斷當前輸入的驗證碼是不是與圖片上的驗證碼一致。
我上面的代碼中並沒有寫這塊，其實只要在隨機產生最終驗證碼之後，把其值存入一個session中去就可以了。然後在判斷使用者名稱，密碼的同時去比較一下這個session值就OK了。如：

複製代碼 代碼如下:

Session["login_validate_code"] = random.ToString();

3、如何使用者沒有看清此張驗證碼，想換一張如何?？
可以通過指令碼給img元素的src屬性重新賦值url實現，當然，麻煩點的話也可以使用ajax去實現。大家可以自己試試。

以上就是本文給大家分享的製作驗證碼的全部過程，希望大家能夠喜歡。