ASP.NET程序中實現校驗碼圖像生成
在Web系統中很多時候需要用到校驗碼，例如我們經常遇到不少電子郵件、論壇的注冊過程需要我們輸入校驗碼，這是為了提高安全性。今天我們就來講講如何生成校驗碼。
使用ASP.NET來生成校驗碼圖像很方便，網上也有不少教程與文章有介紹，但是都講的太簡單了，不夠實用。我來介紹一點自己的思路，算是拋磚引玉吧。
首先我們來看看，生成校驗碼的一種常見方式：
1． 生成校驗碼的字符串
2． 將該字符串輸出為圖像
具體步驟
下面我們就開始簡單的例子來介紹這個過程，首先打開VS.NET，新建一個Web Site，添加一個新的 Web Form，取名為 VCode.aspx，在其代碼文件（VCode.aspx.vb）中添加一個函數generateVCode，此函數用于生成校驗碼的字符串，具體代碼如下：
上面的的函數使用隨機數來代表需要產生的校驗碼，包含數字與大寫的字母。
接著我們需要將上面生成的校驗碼字符串作為圖像輸出。利用ASP.NET的強大圖像處理功能可以很方便的實現這一點。但是考慮到直接將校驗碼生成圖像輸出，安全性太差，我們需要做一些增強。這里我介紹一種簡單的方法，就是為校驗碼圖像增加背景，可以使用現有的一些圖像作為背景，也可以使用ASP.NET直接畫出背景。為了講解的方便，這里我們介紹使用ASP.NET直接來畫出背景。
首先，圖像上輸出文字之前，可以隨即選擇一種畫筆的筆觸（HatchBrush），具體的代碼如下：
現在校驗碼字符串已經產生，用于圖像背景的畫筆也有了，我們就介紹具體的圖像輸出，使用函數GenerateVCodeImage來輸出圖像，
上面介紹的都是幾個實現具體功能的函數，我們還需要在VCode.aspx的Page Load事件里面添加調用這些函數的代碼，具體如下：
現在來看看效果，刷新幾次比較一下，注意背景的不同：
我們已經能夠生成校驗碼的圖像了，那么如何使用呢？下面介紹一個簡單的例子說明如何使用這個VCode.aspx。
在VS.NET中，轉到Default.aspx頁面添加一個名為：TextBox1的TextBox，在其右邊添加一個Button，ID設置為btnCheck，還要再添加一個用于顯示提示信息的Label，把它的ID設置為lblMessage。最后是我們的重點，添加一個Image控件，設置ImageUrl='VCode.aspx'。以上幾個步驟設置結束后的參考HTML如下：
當然，我們還需要實現檢查用戶輸入校驗碼是否正確，并給出提示。具體代碼如下：
具體的效果如下：
總 結
上述的方法考慮到講述的方便，省略了一些細節。當然我們可以根據具體的應用對上述實現的方法進行一些改進，例如上面介紹的字符串生成函數會生成字符O與數字0，會對用戶造成混淆。對于這個問題，可以在其循環過程中添加如下代碼解決（不生成數字0， 當然也可以選擇兩個都不生成）：
我們還可以在生成圖像的過程中，使用更加復雜的方法來增強安全性，常用的方法有：
1．在上述圖像生成結束后，在圖像上添加隨機的雜點，或者是隨機的線條
2．使用彩色的字體或者背景；
3．使用預先準備的干擾性更強的背景；
4．還可以移動或者旋轉每個字符的位置與角度；
當然我們也可以使用漢字來做校驗碼，但是用戶恐怕很難接受吧，哈哈遇到校驗碼里面的字居然不認識的時候，說不定很抓狂～～。
使用ASP.NET來生成校驗碼圖像很方便，網上也有不少教程與文章有介紹，但是都講的太簡單了，不夠實用。我來介紹一點自己的思路，算是拋磚引玉吧。
首先我們來看看，生成校驗碼的一種常見方式：
1． 生成校驗碼的字符串
2． 將該字符串輸出為圖像
具體步驟
下面我們就開始簡單的例子來介紹這個過程，首先打開VS.NET，新建一個Web Site，添加一個新的 Web Form，取名為 VCode.aspx，在其代碼文件（VCode.aspx.vb）中添加一個函數generateVCode，此函數用于生成校驗碼的字符串，具體代碼如下：
| ''' ＜summary＞ ''' 產生隨機數（包含字母與數字）用于校驗碼 ''' ＜/summary＞ ''' ＜param name="CodeLength"＞＜/param＞ ''' ＜returns＞＜/returns＞ ''' ＜remarks＞＜/remarks＞ Private Function generateVCode(ByVal CodeLength As Integer) As String Dim VCode As String = String.Empty Dim randObj As New Random() Dim c As Integer = 63 For i As Byte = 1 To CodeLength c = randObj.Next(35) If c ＞= 10 Then c += 7 End If c += 48 VCode += Chr(c) Next Return VCode End Function |
上面的的函數使用隨機數來代表需要產生的校驗碼，包含數字與大寫的字母。
接著我們需要將上面生成的校驗碼字符串作為圖像輸出。利用ASP.NET的強大圖像處理功能可以很方便的實現這一點。但是考慮到直接將校驗碼生成圖像輸出，安全性太差，我們需要做一些增強。這里我介紹一種簡單的方法，就是為校驗碼圖像增加背景，可以使用現有的一些圖像作為背景，也可以使用ASP.NET直接畫出背景。為了講解的方便，這里我們介紹使用ASP.NET直接來畫出背景。
首先，圖像上輸出文字之前，可以隨即選擇一種畫筆的筆觸（HatchBrush），具體的代碼如下：
| ''' ＜summary＞ ''' 產生隨機的筆觸樣式(用于圖像的背景) ''' ＜/summary＞ ''' ＜returns＞＜/returns＞ ''' ＜remarks＞＜/remarks＞ Private Function generateHatchStyle() As HatchStyle Dim slist As New ArrayList For Each style As HatchStyle In System.Enum.GetValues(GetType(HatchStyle)) slist.Add(style) Next Dim randObj As New Random() Dim index As Integer = randObj.Next(slist.Count - 1) Return CType(slist(index), HatchStyle) End Function |
現在校驗碼字符串已經產生，用于圖像背景的畫筆也有了，我們就介紹具體的圖像輸出，使用函數GenerateVCodeImage來輸出圖像，
| ''' ＜summary＞ ''' 產生隨機數校驗碼圖像 ''' ＜/summary＞ ''' ＜remarks＞＜/remarks＞ Private Function GenerateVCodeImage() Dim oBitmap As Bitmap = New Bitmap(90, 35) Dim oGraphic As Graphics = Graphics.FromImage(oBitmap) Dim foreColor As System.Drawing.Color Dim backColor As System.Drawing.Color Dim sText As String = generateVCode(5) '獲取校驗碼字符串 Dim sFont As String = "Comic Sans MS" '設置自己喜歡的字體 '前景、背景的顏色 foreColor = Color.FromArgb(220, 220, 220) backColor = Color.FromArgb(190, 190, 190) '設置用于背景的畫筆 Dim oBrush As New HatchBrush(CType(generateHatchStyle(), HatchStyle), foreColor, backColor) '用于輸出校驗碼的畫筆 Dim oBrushWrite As New SolidBrush(Color.Gray) '生成的圖像矩形大小 oGraphic.FillRectangle(oBrush, 0, 0, 100, 50) oGraphic.TextRenderingHint = TextRenderingHint.AntiAlias Dim oFont As New Font(sFont, 14) Dim oPoint As New PointF(5.0F, 4.0F) oGraphic.DrawString(sText, oFont, oBrushWrite, oPoint) Response.ContentType = "image/jpeg" oBitmap.Save(Response.OutputStream, ImageFormat.Jpeg) oBitmap.Dispose() Return sText End Function |
上面介紹的都是幾個實現具體功能的函數，我們還需要在VCode.aspx的Page Load事件里面添加調用這些函數的代碼，具體如下：
| Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load Dim code As String = GenerateVCodeImage() Session("VCode") = code End Sub |
現在來看看效果，刷新幾次比較一下，注意背景的不同：
 |
我們已經能夠生成校驗碼的圖像了，那么如何使用呢？下面介紹一個簡單的例子說明如何使用這個VCode.aspx。
在VS.NET中，轉到Default.aspx頁面添加一個名為：TextBox1的TextBox，在其右邊添加一個Button，ID設置為btnCheck，還要再添加一個用于顯示提示信息的Label，把它的ID設置為lblMessage。最后是我們的重點，添加一個Image控件，設置ImageUrl='VCode.aspx'。以上幾個步驟設置結束后的參考HTML如下：
| ＜asp:TextBox ID="TextBox1" runat="server"＞＜/asp:TextBox＞ ＜asp:Button ID="btnCheck" runat="server" Text="Check It" /＞ ＜asp:Label ID="lblMessage" runat="server"＞＜/asp:Label＞＜br /＞ ＜br /＞ ＜asp:Image ID="Image1" runat="server" Height="32px" Width="104px" ImageUrl='VCode.aspx' /＞ ＜br /＞ ＜br /＞ |
當然，我們還需要實現檢查用戶輸入校驗碼是否正確，并給出提示。具體代碼如下：
| Protected Sub btnCheck_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnCheck.Click Dim code As String = Session("VCODE") If TextBox1.Text.Trim.ToUpper = code Then lblMessage.Text = "校驗成功！" lblMessage.ForeColor = Color.Blue Else lblMessage.Text = "您輸入的注冊碼錯誤！" lblMessage.ForeColor = Color.Red End If TextBox1.Text = "" End Sub |
具體的效果如下：
 |
總 結
上述的方法考慮到講述的方便，省略了一些細節。當然我們可以根據具體的應用對上述實現的方法進行一些改進，例如上面介紹的字符串生成函數會生成字符O與數字0，會對用戶造成混淆。對于這個問題，可以在其循環過程中添加如下代碼解決（不生成數字0， 當然也可以選擇兩個都不生成）：
| Private Function generateVCode(ByVal CodeLength As Integer) As String Dim VCode As String = String.Empty Dim randObj As New Random() Dim c As Integer = 63 For i As Byte = 1 To CodeLength '是否顯示 數字：0， 因為數字0 與字母O 容易混淆 'While (c = 63) ' c = randObj.Next(35) 'End While c = randObj.Next(35) If c ＞= 10 Then c += 7 End If c += 48 VCode += Chr(c) Next Return VCode End Function |
我們還可以在生成圖像的過程中，使用更加復雜的方法來增強安全性，常用的方法有：
1．在上述圖像生成結束后，在圖像上添加隨機的雜點，或者是隨機的線條
2．使用彩色的字體或者背景；
3．使用預先準備的干擾性更強的背景；
4．還可以移動或者旋轉每個字符的位置與角度；
當然我們也可以使用漢字來做校驗碼，但是用戶恐怕很難接受吧，哈哈遇到校驗碼里面的字居然不認識的時候，說不定很抓狂～～。