William's Book: [ASP.NET C#] C# 圖形驗證碼生成技術

Reference：http://joeshua.pixnet.net/blog/post/36256920-c%23-%E5%9C%96%E5%BD%A2%E7%A2%BC%E7%94%9F%E6%88%90%E6%8A%80%E8%A1%93

圖形碼生成技術

為了防止攻擊者編寫程式重複登錄破解密碼，為其他用戶和網站製造麻煩，越來越多的網站開始採用動態生成的圖形碼或者附加碼進行驗證。因為圖形驗證碼是攻擊者編寫程式很難識別的！在生成圖形驗證碼時主要應用到兩方面的技術：一方面是生成亂數，另一方面就是將生成的亂數轉化成圖片格式並顯示出來！

通常生成一個圖形驗證碼主要有三個步驟：

（1）隨機產生一個長度為N的字串

（2）將隨機生成的字串創建成圖片，並顯示；

（3）保存驗證碼

(4)防止點擊“看不清驗證碼”，刷新畫面（附加功能）

（5）點擊“看不清驗證碼”，更換圖形碼圖片（附加功能）

一，在ValidatePage.aspx畫面實現圖形碼的生成顯示（1），（2），（3）

using System.Drawing;

using System.Drawing.Imaging;

using System.Drawing.Drawing2D;

（1）隨機產生一個長度為N的字串

CreateRandomNum(int NumCount)方法隨機生成一個長度為NumCount的驗證字串。為了避免生成重複的亂數，這裏通過變數記錄亂數的結果，如果出現與上次亂數相同的數時，則調用函數本身，以保證生成不同的亂數：

private string CreateRandomNum(int NumCount)
{
      string allChar = "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";
      string[] allCharArray = allChar.Split(',');//差分成陣列
      string randomNum = "";
      int temp = -1;//記錄上次亂數值的數值，儘量避免產生幾個相同的亂數
      Random rand = new Random();
      for (int i = 0; i < NumCount; i++)
      {
          if (temp != -1)
          {
               rand = new Random(i * temp * ((int)DateTime.Now.Ticks));
          }
          int t = rand.Next(35);
          if (temp == t)
          {
               return CreateRandomNum(NumCount);
          }
          temp = t;
          randomNum += allCharArray[t];
      }
      return randomNum;
}

（2）將隨機生成的字串創建成圖片，並顯示；

CreateImage(string validateNum)方法基於隨機產生的字串validateNum進一步生成圖形碼，為了進一步保證安全性，這裏為圖形碼加了一些干擾色，如隨機背景花紋、文字處理等
private void CreateImage(string validateNum)
{
      if (validateNum == null || validateNum.Trim() == String.Empty)
          return;
      //生成bitmap圖像
      Bitmap image = new Bitmap(validateNum.Length * 12 + 10, 22);
      Graphics g = Graphics.FromImage(image);
      try
      {
          //生成隨機生成器
          Random random = new Random();
           g.Clear(Color.White);
          //畫圖片背景噪音線
          for (int i = 0; i < 25; i++)
          {
               int x1 = random.Next(image.Width);
               int x2 = random.Next(image.Width);
               int y1 = random.Next(image.Height);
               int y2 = random.Next(image.Height);
               g.DrawLine(new Pen(Color.Silver), x1, y1, x2, y2);
          }
          Font font = new Font("Arial", 12, (FontStyle.Bold | FontStyle.Italic));
           LinearGradientBrush brush = new LinearGradientBrush(new Rectangle(0, 0, image.Width, image.Height), Color.Blue, Color.DarkRed, 1.2f, true);
           g.DrawString(validateNum, font, brush, 2, 2);
          //畫圖片的前景噪音點
          for (int i = 0; i < 100; i++)
          {
               int x = random.Next(image.Width);
               int y = random.Next(image.Height);
               image.SetPixel(x, y, Color.FromArgb(random.Next()));
          }
          //畫圖片的邊框線
           g.DrawRectangle(new Pen(Color.Silver), 0, 0, image.Width - 1, image.Height - 1);
           System.IO.MemoryStream ms = new System.IO.MemoryStream();
          //將圖像保存到指定的流
           image.Save(ms, System.Drawing.Imaging.ImageFormat.Gif);
           Response.ClearContent();
           Response.ContentType = "image/Gif";
           Response.BinaryWrite(ms.ToArray());
      }
      finally
      {
          g.Dispose();
           image.Dispose();
      }
}

（3）保存驗證碼

Session["ValidateNum"] = validateNum;

二，實現動態驗證嘛碼（附加功能）（4），（5）Login畫面前臺代碼

<tablewidth="100%"style="text-align: left;">

<tr>

<tdstyle="width: 30%;"></td>

<tdstyle="width: 70%;">

用戶名：

<asp:TextBoxID="txtName"runat="server"></asp:TextBox><br/>

<br/>

密   碼：

<asp:TextBoxID="txtPwd"runat="server"></asp:TextBox><br/>

<br/>

驗證碼：

<asp:TextBoxID="txtTXM"runat="server"></asp:TextBox>

<asp:UpdatePanelID="UpdatePanel1"runat="server">

<ContentTemplate>

<asp:ImageButtonID="ImageButton1"runat="server"ImageUrl="~/TuXingMaPic.aspx"/>

<asp:ButtonID="Button1"runat="server"Text="看不清"OnClientClick="return reloadcode();"/><br/>

</ContentTemplate>

</asp:UpdatePanel>

<br/>

</td>

</tr>

<trstyle="text-align: center;">

<tdcolspan="2">

<asp:ButtonID="Button2"runat="server"Text="註冊帳號"/>          

<asp:ButtonID="Button3"runat="server"Text="登錄"/>

</td>

</tr>

</table>

(4)防止點擊“看不清驗證碼”，刷新畫面（附加功能）

在ImageButton1（或者Image）和Button外面套用UpdatePanel和ScriptManager防止點擊Button或者imagebutton是刷新畫面

（5）點擊“看不清驗證碼”，更換圖形碼圖片（附加功能）

在imagebutton或者button的OnClientClick時間調用ReloadImage這個function（）。

<%--圖形碼的動態載入--%>

<scripttype="text/javascript"> //動態產生圖型驗證碼

function reloadcode() {

document.getElementById("ImageButton1").src = "TuXingMaPic.aspx?m=" + Math.random();

returnfalse;

}

</script>

William's Book

2013年12月22日星期日

[ASP.NET C#] C# 圖形驗證碼生成技術

沒有留言:

張貼留言

2013年12月22日 星期日

[ASP.NET C#] C# 圖形驗證碼生成技術

沒有留言:

張貼留言

2013年12月22日星期日