Joe Joe Chang

圖形碼生成技術

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

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

（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/>

              密&nbsp;&nbsp;&nbsp;碼：

             <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/>

                <br/>

            </td>

         </tr>

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

               <tdcolspan="2">

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

                    <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>