摘要:實作網頁圖片驗證碼
我們在瀏覽許多網站時常會看到圖片驗證碼這種東西，例如:BLOG回文、留言板...等等。筆者今天要跟各位介紹如何實作網頁圖片驗證碼，下面這種方式是目前最常見到的，各位也可自行搭配AJAX來使用。
首先建立一個產生驗證碼的網頁，我們先將它命名為ValidateCode.aspx，其產生驗證碼圖片的程式碼如下:
ValidateCode.aspx.cs
15 protected void Page_Load(object sender, EventArgs e)
16 {
17 //Validate Code
18 string[] Code ={ "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M",
19 "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z",
20 "0", "1", "2", "3", "4", "5", "6", "7", "8", "9" };
21 string strRd = string.Empty;
22
23 Random rd = new Random(unchecked((int)DateTime.Now.Ticks));
24 Bitmap Bmp = new Bitmap(80, 25); //建立實體圖檔並設定大小
25 Graphics Gpi = Graphics.FromImage(Bmp);
26 Font Font1 = new Font("Verdana", 14, FontStyle.Italic);
27
28 for (int i = 0; i < 5; i++) // 亂數產生驗證文字
29 {
30 strRd += Code[rd.Next(35)];
31 }
32
33 Pen PenLine = new Pen(Brushes.Red, 1); //實體化筆刷並設定顏色、大小(畫X,Y軸用)
34 Gpi.Clear(Color.White); //設定背景顏色
35 Gpi.DrawLine(PenLine, 0, rd.Next(80), 90, rd.Next(25));
36 Gpi.DrawString(strRd, Font1, Brushes.Black, 0, 0);
37
38 for (int i = 0; i <= 25; i++) //亂數產生霧點，擾亂機器人辨別
39 {
40 int RandPixelX = rd.Next(0, 80);
41 int RandPixelY = rd.Next(0, 25);
42 Bmp.SetPixel(RandPixelX, RandPixelY, Color.Blue);
43 }
44
45 Session["ValidateCode"] = strRd; //將驗證碼存入Session以便稍後進行驗證
46 Bmp.Save(Response.OutputStream, System.Drawing.Imaging.ImageFormat.Gif);
47 }
-
實際運行ValidateCode.aspx將產生下面這張圖片
接著我們來測試圖片驗證的功能，請在您的Default.aspx加入TextBox控制項、Button控制項及一張圖片(如下圖)。
Default.aspx
<div>
<img src="ValidateCode.aspx" alt="Validate Code" border="1" /><br />
ValidateCode:
<asp:TextBox ID="TextBox1" runat="server" Style="position: static" Width="94px"></asp:TextBox>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Style="position: static" Text="Validate" />
</div>
Default.aspx.cs
17 protected void Button1_Click(object sender, EventArgs e)
18 {
19 if (TextBox1.Text == (string)Session["ValidateCode"])
20 Response.Write("OK");
21 else
22 Response.Write("ERROR");
23 }
-
OK...現在來執行看看Default.aspx
請在驗證圖片上按下【滑鼠右鍵】->【內容】，我們可以很清楚看到驗證圖片的來源是ValidateCode.aspx
這時候輸入正確的驗證碼就會出現【OK】如果輸入錯誤的驗證碼就會出現【ERROR】
OR
圖片驗證碼的部份大概就是這樣，圖片的【字體】、【背景】、【大小】...等等，各位可自行發揮運用。
