在网页上常把图形验证码应用在登入或贴文的页面中，因为图形验证码具有机器不易识别的特性，可以防止机器人程序恶意的存取网页。在本文中将实作一个图形验证码的服务器控件，透过简单的属性设定就可以轻易地在网页上套用图形验证码。
一、产生图形验证码
我们先准备一个产生图形验证码的页面 (ValidateCode.ASPx)，这个页面主要是绘制验证码图形，并将其写入内存数据流，最后使用 Response.BinaryWrite 将图形输出传递到客户端。当我们输出此验证码图形的同时，会使用 Session("_ValidateCode") 来记录验证码的值，以便后续与使用者输入验证码做比对之用。
Partial Class ValidateCode
Inherits System.Web.UI.Page
''' <summary>
''' 產生圖形驗證碼。
''' </summary>
''' <param name="Code">傳出驗證碼。</param>
''' <param name="CodeLength">驗證碼字元數。</param>
Public Function CreateValidateCodeImage(ByRef Code As String, ByVal CodeLength As Integer, _
ByVal Width As Integer, ByVal Height As Integer, ByVal FontSize As Integer) As Bitmap
Dim sCode As String = String.Empty
'顏色列表，用於驗證碼、噪線、噪點
Dim oColors As Color() = { _
Drawing.Color.Black, Drawing.Color.Red, Drawing.Color.Blue, Drawing.Color.Green, _
Drawing.Color.Orange, Drawing.Color.Brown, Drawing.Color.Brown, Drawing.Color.DarkBlue}
'字體列表，用於驗證碼
Dim oFontNames As String() = {"Times New Roman", "MS Mincho", "Book Antiqua", _
"Gungsuh", "PMingLiU", "Impact"}
'驗證碼的字元集，去掉了一些容易混淆的字元
Dim oCharacter As Char() = {"2"c, "3"c, "4"c, "5"c, "6"c, "8"c, _
"9"c, "A"c, "B"c, "C"c, "D"c, "E"c, _
"F"c, "G"c, "H"c, "J"c, "K"c, "L"c, _
"M"c, "N"c, "P"c, "R"c, "S"c, "T"c, _
"W"c, "X"c, "Y"c}
Dim oRnd As New Random()
Dim oBmp As Bitmap
Dim oGraphics As Graphics
Dim N1 As Integer
Dim oPoint1 As Drawing.Point
Dim oPoint2 As Drawing.Point
Dim sFontName As String
Dim oFont As Font
Dim oColor As Color
'生成驗證碼字串
For N1 = 0 To CodeLength - 1
sCode += oCharacter(oRnd.Next(oCharacter.Length))
Next
oBmp = New Bitmap(Width, Height)
oGraphics = Graphics.FromImage(oBmp)
oGraphics.Clear(Drawing.Color.White)
Try
For N1 = 0 To 4
'畫噪線
oPoint1.X = oRnd.Next(Width)
oPoint1.Y = oRnd.Next(Height)
oPoint2.X = oRnd.Next(Width)
oPoint2.Y = oRnd.Next(Height)
oColor = oColors(oRnd.Next(oColors.Length))
oGraphics.DrawLine(New Pen(oColor), oPoint1, oPoint2)
Next
For N1 = 0 To sCode.Length - 1
'畫驗證碼字串
sFontName = oFontNames(oRnd.Next(oFontNames.Length))
oFont = New Font(sFontName, FontSize, FontStyle.Italic)
oColor = oColors(oRnd.Next(oColors.Length))
oGraphics.DrawString(sCode(N1).ToString(), oFont, New SolidBrush(oColor), CSng(N1) * FontSize + 10, CSng(8))
Next
For i As Integer = 0 To 30
'畫噪點
Dim x As Integer = oRnd.Next(oBmp.Width)
Dim y As Integer = oRnd.Next(oBmp.Height)
Dim clr As Color = oColors(oRnd.Next(oColors.Length))
oBmp.SetPixel(x, y, clr)
Next
Code = sCode
Return oBmp
Finally
oGraphics.Dispose()
End Try
End Function
''' <summary>
''' 產生圖形驗證碼。
''' </summary>
''' <param name="MemoryStream">記憶體資料流。</param>
''' <param name="Code">傳出驗證碼。</param>
''' <param name="CodeLength">驗證碼字元數。</param>
Public Sub CreateValidateCodeImage(ByRef MemoryStream As MemoryStream, _
ByRef Code As String, ByVal CodeLength As Integer, _
ByVal Width As Integer, ByVal Height As Integer, ByVal FontSize As Integer)
Dim oBmp As Bitmap
oBmp = CreateValidateCodeImage(Code, CodeLength, Width, Height, FontSize)
Try
oBmp.Save(MemoryStream, ImageFormat.Png)
Finally
oBmp.Dispose()
End Try
End Sub
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim sCode As String = String.Empty
'清除該頁輸出緩存，設置該頁無緩存
Response.Buffer = True
Response.ExpiresAbsolute = System.DateTime.Now.AddMilliseconds(0)
Response.Expires = 0
Response.CacheControl = "no-cache"
Response.AppendHeader("Pragma", "No-Cache")
'將驗證碼圖片寫入記憶體流，並將其以 "image/Png" 格式輸出
Dim oStream As New MemoryStream()
Try
CreateValidateCodeImage(oStream, sCode, 4, 100, 40, 18)
Me.Session("_ValidateCode") = sCode
Response.ClearContent()
Response.ContentType = "image/Png"
Response.BinaryWrite(oStream.ToArray())
Finally
'釋放資源
oStream.Dispose()
End Try
End Sub
End Class
我們將此頁面置於 ~/Page/ValidateCode.ASPx，當要使用此頁面的圖形驗證碼，只需要在使用 Image 控制項，設定 ImageUrl 為此頁面即可。
<asp:Image ID="imgValidateCode" runat="server" ImageUrl="~/Page/ValidateCode.aspx" />
二、實作圖形驗證碼控制項
虽然我们可以使用 Image 控件来呈现 ValidateCode.ASPx 页面产生的验证码图形，可是这样只处理一半的动作，因为没有处理「使用者输入的验证码」是否与「图形验证码」相符，所以我们将实作一个图形验证码控件，来处理掉所有相关动作。
即然上面的示范使用 Image 控件来呈现验证码，所以图形验证码控件就继承 Image 命名为 TBValidateCode。
< _
Description("圖形驗證碼控制項"), _
ToolboxData("<{0}:TBValidateCode runat=server></{0}:TBValidateCode>") _
> _
Public Class TBValidateCode
Inherits System.Web.UI.WebControls.Image
End
新增 ValidateCodeUrl 属性，设定图形验证码产生页面的网址。
''' <summary>
''' 圖形驗證碼產生頁面網址。
''' </summary>
< _
Description("圖形驗證碼產生頁面網址"), _
DefaultValue("") _
> _
Public Property ValidateCodeUrl() As String
Get
Return FValidateCodeUrl
End Get
Set(ByVal value As String)
FValidateCodeUrl = value
End Set
End Property
覆写 Render 方法，若未设定 ValidateCodeUrl 属性，则预设为 ~/Page/ValidateCode.ASPx 这个页面。另外我们在图形的 ondbclick 加上一段客户端指令码，其作用是让用户可以鼠标二下来重新产生一个验证码图形。
Protected Overrides Sub Render(ByVal writer As System.Web.UI.HTMLTextWriter)
Dim sUrl As String
Dim sScript As String
sUrl = Me.ValidateCodeUrl
If String.IsNullOrEmpty(sUrl) Then
sUrl = "~/Page/ValidateCode.ASPx"
End If
If Me.BorderWidth = Unit.Empty Then
Me.BorderWidth = Unit.Pixel(1)
End If
If Me.AlternateText = String.Empty Then
Me.AlternateText = "圖形驗證碼"
End If
Me.ToolTip = "双击即可重新生产验证码"
Me.ImageUrl = sUrl
If Not Me.DesignMode Then
sScript = String.Format("this.src='{0}?flag='+Math.random();", Me.Page.ResolveClientUrl(sUrl))
Me.Attributes("ondblclick") = sScript
End If
Me.Style(HTMLTextWriterStyle.Cursor) = "pointer"
MyBase.Render(writer)
End Sub
另外新增一个 ValidateCode 方法，用来检查输入验证码是否正确。还记得我们在产生验证码图形时，同时把该验证码的值写入 Session("_ValidateCode") 中吧，所以这个方法只是把用户输入的值与 Seesion 中的值做比对。
''' <summary>
''' 检查输入验证码是否正确。
''' </summary>
''' <param name="Code">输入验证码。</param>
''' <returns>验证承购返回 True，反之返回 False。</returns>
Public Function ValidateCode(ByVal Code As String) As Boolean
If Me.Page.Session(SessionKey) Is Nothing Then Return False
If SameText(CCStr(Me.Page.Session(SessionKey)), Code) Then
Return True
Else
Return False
End If
End Function
三、测试程序
在页面放置一个 TBValidateCode 控件，另外加一个文字框及按钮，供使用者输入验证码后按下「确定」按钮后到服务端做输入值比对的动作。
<bee:TBValidateCode ID="TBValidateCode1" runat="server" />
<bee:TBTextBox ID="txtCode" runat="server"></bee:TBTextBox>
<bee:TBButton ID="TBButton1" runat="server" Text="確定" />
在「确定」按钮的 Click 事件中，我们使用 TBValidateCode 控件的 ValidateCode 方法判断验证码输入的正确性。
Protected Sub TBButton1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles TBButton1.Click
If TBValidateCode1.ValidateCode(txtCode.Text) Then
Me.Response.Write("验证码输入正确")
Else
Me.Response.Write("验证码输入错误!")
End If
End Sub
执行程序，页面就会随机产生一个验证码图形。
输入正确的值按「确定」钮，就会显示「验证码输入正确」的讯息。因为我们在同一页面测试的关系，你会发现 PostBack 后验证码图形又会重新产生，一般正常的做法是验证正确后就导向另一个页面。
当我们输入错误的值，就会显示「验证码输入错误!」的讯息。
一、产生图形验证码
我们先准备一个产生图形验证码的页面 (ValidateCode.ASPx)，这个页面主要是绘制验证码图形，并将其写入内存数据流，最后使用 Response.BinaryWrite 将图形输出传递到客户端。当我们输出此验证码图形的同时，会使用 Session("_ValidateCode") 来记录验证码的值，以便后续与使用者输入验证码做比对之用。
Partial Class ValidateCode
Inherits System.Web.UI.Page
''' <summary>
''' 產生圖形驗證碼。
''' </summary>
''' <param name="Code">傳出驗證碼。</param>
''' <param name="CodeLength">驗證碼字元數。</param>
Public Function CreateValidateCodeImage(ByRef Code As String, ByVal CodeLength As Integer, _
ByVal Width As Integer, ByVal Height As Integer, ByVal FontSize As Integer) As Bitmap
Dim sCode As String = String.Empty
'顏色列表，用於驗證碼、噪線、噪點
Dim oColors As Color() = { _
Drawing.Color.Black, Drawing.Color.Red, Drawing.Color.Blue, Drawing.Color.Green, _
Drawing.Color.Orange, Drawing.Color.Brown, Drawing.Color.Brown, Drawing.Color.DarkBlue}
'字體列表，用於驗證碼
Dim oFontNames As String() = {"Times New Roman", "MS Mincho", "Book Antiqua", _
"Gungsuh", "PMingLiU", "Impact"}
'驗證碼的字元集，去掉了一些容易混淆的字元
Dim oCharacter As Char() = {"2"c, "3"c, "4"c, "5"c, "6"c, "8"c, _
"9"c, "A"c, "B"c, "C"c, "D"c, "E"c, _
"F"c, "G"c, "H"c, "J"c, "K"c, "L"c, _
"M"c, "N"c, "P"c, "R"c, "S"c, "T"c, _
"W"c, "X"c, "Y"c}
Dim oRnd As New Random()
Dim oBmp As Bitmap
Dim oGraphics As Graphics
Dim N1 As Integer
Dim oPoint1 As Drawing.Point
Dim oPoint2 As Drawing.Point
Dim sFontName As String
Dim oFont As Font
Dim oColor As Color
'生成驗證碼字串
For N1 = 0 To CodeLength - 1
sCode += oCharacter(oRnd.Next(oCharacter.Length))
Next
oBmp = New Bitmap(Width, Height)
oGraphics = Graphics.FromImage(oBmp)
oGraphics.Clear(Drawing.Color.White)
Try
For N1 = 0 To 4
'畫噪線
oPoint1.X = oRnd.Next(Width)
oPoint1.Y = oRnd.Next(Height)
oPoint2.X = oRnd.Next(Width)
oPoint2.Y = oRnd.Next(Height)
oColor = oColors(oRnd.Next(oColors.Length))
oGraphics.DrawLine(New Pen(oColor), oPoint1, oPoint2)
Next
For N1 = 0 To sCode.Length - 1
'畫驗證碼字串
sFontName = oFontNames(oRnd.Next(oFontNames.Length))
oFont = New Font(sFontName, FontSize, FontStyle.Italic)
oColor = oColors(oRnd.Next(oColors.Length))
oGraphics.DrawString(sCode(N1).ToString(), oFont, New SolidBrush(oColor), CSng(N1) * FontSize + 10, CSng(8))
Next
For i As Integer = 0 To 30
'畫噪點
Dim x As Integer = oRnd.Next(oBmp.Width)
Dim y As Integer = oRnd.Next(oBmp.Height)
Dim clr As Color = oColors(oRnd.Next(oColors.Length))
oBmp.SetPixel(x, y, clr)
Next
Code = sCode
Return oBmp
Finally
oGraphics.Dispose()
End Try
End Function
''' <summary>
''' 產生圖形驗證碼。
''' </summary>
''' <param name="MemoryStream">記憶體資料流。</param>
''' <param name="Code">傳出驗證碼。</param>
''' <param name="CodeLength">驗證碼字元數。</param>
Public Sub CreateValidateCodeImage(ByRef MemoryStream As MemoryStream, _
ByRef Code As String, ByVal CodeLength As Integer, _
ByVal Width As Integer, ByVal Height As Integer, ByVal FontSize As Integer)
Dim oBmp As Bitmap
oBmp = CreateValidateCodeImage(Code, CodeLength, Width, Height, FontSize)
Try
oBmp.Save(MemoryStream, ImageFormat.Png)
Finally
oBmp.Dispose()
End Try
End Sub
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim sCode As String = String.Empty
'清除該頁輸出緩存，設置該頁無緩存
Response.Buffer = True
Response.ExpiresAbsolute = System.DateTime.Now.AddMilliseconds(0)
Response.Expires = 0
Response.CacheControl = "no-cache"
Response.AppendHeader("Pragma", "No-Cache")
'將驗證碼圖片寫入記憶體流，並將其以 "image/Png" 格式輸出
Dim oStream As New MemoryStream()
Try
CreateValidateCodeImage(oStream, sCode, 4, 100, 40, 18)
Me.Session("_ValidateCode") = sCode
Response.ClearContent()
Response.ContentType = "image/Png"
Response.BinaryWrite(oStream.ToArray())
Finally
'釋放資源
oStream.Dispose()
End Try
End Sub
End Class
我們將此頁面置於 ~/Page/ValidateCode.ASPx，當要使用此頁面的圖形驗證碼，只需要在使用 Image 控制項，設定 ImageUrl 為此頁面即可。
<asp:Image ID="imgValidateCode" runat="server" ImageUrl="~/Page/ValidateCode.aspx" />
二、實作圖形驗證碼控制項
虽然我们可以使用 Image 控件来呈现 ValidateCode.ASPx 页面产生的验证码图形，可是这样只处理一半的动作，因为没有处理「使用者输入的验证码」是否与「图形验证码」相符，所以我们将实作一个图形验证码控件，来处理掉所有相关动作。
即然上面的示范使用 Image 控件来呈现验证码，所以图形验证码控件就继承 Image 命名为 TBValidateCode。
< _
Description("圖形驗證碼控制項"), _
ToolboxData("<{0}:TBValidateCode runat=server></{0}:TBValidateCode>") _
> _
Public Class TBValidateCode
Inherits System.Web.UI.WebControls.Image
End
新增 ValidateCodeUrl 属性，设定图形验证码产生页面的网址。
''' <summary>
''' 圖形驗證碼產生頁面網址。
''' </summary>
< _
Description("圖形驗證碼產生頁面網址"), _
DefaultValue("") _
> _
Public Property ValidateCodeUrl() As String
Get
Return FValidateCodeUrl
End Get
Set(ByVal value As String)
FValidateCodeUrl = value
End Set
End Property
覆写 Render 方法，若未设定 ValidateCodeUrl 属性，则预设为 ~/Page/ValidateCode.ASPx 这个页面。另外我们在图形的 ondbclick 加上一段客户端指令码，其作用是让用户可以鼠标二下来重新产生一个验证码图形。
Protected Overrides Sub Render(ByVal writer As System.Web.UI.HTMLTextWriter)
Dim sUrl As String
Dim sScript As String
sUrl = Me.ValidateCodeUrl
If String.IsNullOrEmpty(sUrl) Then
sUrl = "~/Page/ValidateCode.ASPx"
End If
If Me.BorderWidth = Unit.Empty Then
Me.BorderWidth = Unit.Pixel(1)
End If
If Me.AlternateText = String.Empty Then
Me.AlternateText = "圖形驗證碼"
End If
Me.ToolTip = "双击即可重新生产验证码"
Me.ImageUrl = sUrl
If Not Me.DesignMode Then
sScript = String.Format("this.src='{0}?flag='+Math.random();", Me.Page.ResolveClientUrl(sUrl))
Me.Attributes("ondblclick") = sScript
End If
Me.Style(HTMLTextWriterStyle.Cursor) = "pointer"
MyBase.Render(writer)
End Sub
另外新增一个 ValidateCode 方法，用来检查输入验证码是否正确。还记得我们在产生验证码图形时，同时把该验证码的值写入 Session("_ValidateCode") 中吧，所以这个方法只是把用户输入的值与 Seesion 中的值做比对。
''' <summary>
''' 检查输入验证码是否正确。
''' </summary>
''' <param name="Code">输入验证码。</param>
''' <returns>验证承购返回 True，反之返回 False。</returns>
Public Function ValidateCode(ByVal Code As String) As Boolean
If Me.Page.Session(SessionKey) Is Nothing Then Return False
If SameText(CCStr(Me.Page.Session(SessionKey)), Code) Then
Return True
Else
Return False
End If
End Function
三、测试程序
在页面放置一个 TBValidateCode 控件，另外加一个文字框及按钮，供使用者输入验证码后按下「确定」按钮后到服务端做输入值比对的动作。
<bee:TBValidateCode ID="TBValidateCode1" runat="server" />
<bee:TBTextBox ID="txtCode" runat="server"></bee:TBTextBox>
<bee:TBButton ID="TBButton1" runat="server" Text="確定" />
在「确定」按钮的 Click 事件中，我们使用 TBValidateCode 控件的 ValidateCode 方法判断验证码输入的正确性。
Protected Sub TBButton1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles TBButton1.Click
If TBValidateCode1.ValidateCode(txtCode.Text) Then
Me.Response.Write("验证码输入正确")
Else
Me.Response.Write("验证码输入错误!")
End If
End Sub
执行程序，页面就会随机产生一个验证码图形。
输入正确的值按「确定」钮，就会显示「验证码输入正确」的讯息。因为我们在同一页面测试的关系，你会发现 PostBack 后验证码图形又会重新产生，一般正常的做法是验证正确后就导向另一个页面。
当我们输入错误的值，就会显示「验证码输入错误!」的讯息。
文章是我在自学过程中对有关知识点的理解的笔记，如有错误和不全或您有更好的理解请在评论中指出，我定会及时更正。谢谢您的指点.笔记中如有涉及到学习资料中的版权问题请通知我删除
