ASP.NET中的校验码图像生成(适用于初学者)

  (嘿嘿 不好意思,一年前写的今天才放上来)

ASP.NET中的校验码图像生成(适用于初学者)

  介

        在Web系统中很多时候需要用到校验码,例如我们经常遇到不少电子邮件、论坛的注册过程需要我们输入校验码,这是为了提高安全性。今天我们就来讲讲如何生成校验码。

        使用ASP.NET来生成校验码图像很方便,网上也有不少教程与文章有介绍,但是都讲的太简单了,不够实用。我来介绍一点自己的思路,算是抛砖引玉吧。

        首先我们来看看,生成校验码的一种常见方式:

1. 生成校验码的字符串

2. 将该字符串输出为图像

 

具体步骤

        下面我们就开始简单的例子来介绍这个过程,首先打开VS.NET,新建一个Web Site,添加一个新的 Web Form,取名为 VCode.aspx,在其代码文件(VCode.aspx.vb)中添加一个函数generateVCode,此函数用于生成校验码的字符串,具体代码如下:

None.gif      ' '' <summary>
None.gif

None.gif    
' '' 产生随机数(包含字母与数字)用于校验码
None.gif

None.gif    
' '' </summary>
None.gif

None.gif    
' '' <param name="CodeLength"></param>
None.gif

None.gif    
' '' <returns></returns>
None.gif

None.gif    
' '' <remarks></remarks>
None.gif

ExpandedBlockStart.gifContractedBlock.gif    
Private   Function generateVCode() Function generateVCode(ByVal CodeLength As IntegerAs String
InBlock.gif
InBlock.gif        
Dim VCode As String = String.Empty
InBlock.gif
InBlock.gif        
Dim randObj As New Random()
InBlock.gif
InBlock.gif        
Dim c As Integer = 63
InBlock.gif
InBlock.gif        
For i As Byte = 1 To CodeLength
InBlock.gif
InBlock.gif            c 
= randObj.Next(35)
InBlock.gif
InBlock.gif            
If c >= 10 Then
InBlock.gif
InBlock.gif                c 
+= 7
InBlock.gif
InBlock.gif            
End If
InBlock.gif
InBlock.gif            c 
+= 48
InBlock.gif
InBlock.gif            VCode 
+= Chr(c)
InBlock.gif
InBlock.gif        
Next
InBlock.gif
InBlock.gif        
Return VCode
InBlock.gif
ExpandedBlockEnd.gif    
End Function

None.gif
None.gif

 

    上面的的函数使用随机数来代表需要产生的校验码,包含数字与大写的字母。

    接着我们需要将上面生成的校验码字符串作为图像输出。利用ASP.NET的强大图像处理功能可以很方便的实现这一点。但是考虑到直接将校验码生成图像输出,安全性太差,我们需要做一些增强。这里我介绍一种简单的方法,就是为校验码图像增加背景,可以使用现有的一些图像作为背景,也可以使用ASP.NET直接画出背景。为了讲解的方便,这里我们介绍使用ASP.NET直接来画出背景。

首先,图像上输出文字之前,可以随即选择一种画笔的笔触(HatchBrush),具体的代码如下:

 

None.gif     ' '' <summary>
None.gif

None.gif    
' '' 产生随机的笔触样式(用于图像的背景)
None.gif

None.gif    
' '' </summary>
None.gif

None.gif    
' '' <returns></returns>
None.gif

None.gif    
' '' <remarks></remarks>
None.gif

ExpandedBlockStart.gifContractedBlock.gif    
Private   Function generateHatchStyle() Function generateHatchStyle() As HatchStyle
InBlock.gif
InBlock.gif        
Dim slist As New ArrayList
InBlock.gif
InBlock.gif        
For Each style As HatchStyle In System.Enum.GetValues(GetType(HatchStyle))
InBlock.gif
InBlock.gif            slist.Add(style)
InBlock.gif
InBlock.gif        
Next
InBlock.gif
InBlock.gif        
Dim randObj As New Random()
InBlock.gif
InBlock.gif        
Dim index As Integer = randObj.Next(slist.Count - 1)
InBlock.gif
InBlock.gif        
Return CType(slist(index), HatchStyle)
InBlock.gif
ExpandedBlockEnd.gif
End Function

None.gif
None.gif

        现在校验码字符串已经产生,用于图像背景的画笔也有了,我们就介绍具体的图像输出,使用函数GenerateVCodeImage来输出图像,

 

None.gif     ' '' <summary>
None.gif

None.gif    
' '' 产生随机数校验码图像
None.gif

None.gif    
' '' </summary>
None.gif

None.gif    
' '' <remarks></remarks>
None.gif

ExpandedBlockStart.gifContractedBlock.gif    
Private   Function GenerateVCodeImage() Function GenerateVCodeImage()
InBlock.gif
InBlock.gif 
InBlock.gif
InBlock.gif       
InBlock.gif
InBlock.gif        
Dim oBitmap As Bitmap = New Bitmap(9035)
InBlock.gif
InBlock.gif        
Dim oGraphic As Graphics = Graphics.FromImage(oBitmap)
InBlock.gif
InBlock.gif        
Dim foreColor As System.Drawing.Color
InBlock.gif
InBlock.gif        
Dim backColor As System.Drawing.Color
InBlock.gif
InBlock.gif 
InBlock.gif
InBlock.gif        
Dim sText As String = generateVCode(5'获取校验码字符串
InBlock.gif

InBlock.gif        
Dim sFont As String = "Comic Sans MS" '设置自己喜欢的字体
InBlock.gif

InBlock.gif 
InBlock.gif
InBlock.gif        
'前景、背景的颜色
InBlock.gif

InBlock.gif        foreColor 
= Color.FromArgb(220220220)
InBlock.gif
InBlock.gif        backColor 
= Color.FromArgb(190190190)
InBlock.gif 
InBlock.gif
InBlock.gif        
'设置用于背景的画笔
InBlock.gif

InBlock.gif        
Dim oBrush As New HatchBrush(CType(generateHatchStyle(), HatchStyle), foreColor, backColor)
InBlock.gif
InBlock.gif       
'用于输出校验码的画笔
InBlock.gif

InBlock.gif        
Dim oBrushWrite As New SolidBrush(Color.Gray)   
InBlock.gif
InBlock.gif
InBlock.gif        
'生成的图像矩形大小
InBlock.gif

InBlock.gif        oGraphic.FillRectangle(oBrush, 
0010050)
InBlock.gif
InBlock.gif        oGraphic.TextRenderingHint 
= TextRenderingHint.AntiAlias
InBlock.gif
InBlock.gif
InBlock.gif        
Dim oFont As New Font(sFont, 14)
InBlock.gif
InBlock.gif        
Dim oPoint As New PointF(5.0F, 4.0F)
InBlock.gif
InBlock.gif
InBlock.gif        oGraphic.DrawString(sText, oFont, oBrushWrite, oPoint)
InBlock.gif
InBlock.gif 
InBlock.gif        Response.ContentType 
= "image/jpeg"
InBlock.gif
InBlock.gif        oBitmap.Save(Response.OutputStream, ImageFormat.Jpeg)
InBlock.gif
InBlock.gif       oBitmap.Dispose()
InBlock.gif
InBlock.gif        
Return sText
InBlock.gif
ExpandedBlockEnd.gif    
End Function

None.gif
None.gif

 

    上面介绍的都是几个实现具体功能的函数,我们还需要在VCode.aspxPage Load事件里面添加调用这些函数的代码,具体如下:

ExpandedBlockStart.gif ContractedBlock.gif      Protected   Sub Page_Load() Sub Page_Load(ByVal sender As ObjectByVal e As System.EventArgs) Handles Me.Load
InBlock.gif
InBlock.gif        
Dim code As String = GenerateVCodeImage()
InBlock.gif
InBlock.gif        Session(
"VCode"= code
InBlock.gif
ExpandedBlockEnd.gif    
End Sub

None.gif

 

    现在来看看效果,刷新几次比较一下,注意背景的不同:

004.JPG


        我们已经能够生成校验码的图像了,那么如何使用呢?下面介绍一个简单的例子说明如何使用这个VCode.aspx

        在VS.NET中,转到Default.aspx页面添加一个名为:TextBox1TextBox,在其右边添加一个ButtonID设置为btnCheck,还要再添加一个用于显示提示信息的Label,把它的ID设置为lblMessage。最后是我们的重点,添加一个Image控件,设置ImageUrl='VCode.aspx'。以上几个步骤设置结束后的参考HTML如下:

 

None.gif         < asp:TextBox  ID ="TextBox1"  runat ="server" ></ asp:TextBox >
None.gif
None.gif        
< asp:Button  ID ="btnCheck"  runat ="server"  Text ="Check It"   /> &nbsp;
None.gif
None.gif        
< asp:Label  ID ="lblMessage"  runat ="server" ></ asp:Label >< br  />
None.gif
None.gif        
< br  />
None.gif
None.gif        
< asp:Image  ID ="Image1"  runat ="server"  Height ="32px"  Width ="104px"  ImageUrl ='VCode.aspx'   /> &nbsp; < br  />
None.gif
None.gif        
< br  />
None.gif
None.gif

 

    当然,我们还需要实现检查用户输入校验码是否正确,并给出提示。具体代码如下:

 

ExpandedBlockStart.gif ContractedBlock.gif     Protected   Sub btnCheck_Click() Sub btnCheck_Click(ByVal sender As ObjectByVal e As System.EventArgs) Handles btnCheck.Click
InBlock.gif
InBlock.gif        
Dim code As String = Session("VCODE")
InBlock.gif
InBlock.gif        
If TextBox1.Text.Trim.ToUpper = code Then
InBlock.gif
InBlock.gif            lblMessage.Text 
= "校验成功!"
InBlock.gif
InBlock.gif            lblMessage.ForeColor 
= Color.Blue
InBlock.gif
InBlock.gif        
Else
InBlock.gif
InBlock.gif            lblMessage.Text 
= "您输入的注册码错误!"
InBlock.gif
InBlock.gif            lblMessage.ForeColor 
= Color.Red
InBlock.gif
InBlock.gif        
End If
InBlock.gif
InBlock.gif        TextBox1.Text 
= ""
InBlock.gif
ExpandedBlockEnd.gif    
End Sub

None.gif
None.gif

 

    具体的效果如下:

   005.JPG006.JPG

总 结

       本文介绍了一种简单的校验码图像生成方法。上述的方法考虑到讲述的方便,省略了一些细节。当然我们可以根据具体的应用对上述实现的方法进行一些改进,例如上面介绍的字符串生成函数会生成字符O与数字0,会对用户造成混淆。对于这个问题,可以在其循环过程中添加如下代码解决(不生成数字0, 当然也可以选择两个都不生成):

ExpandedBlockStart.gif ContractedBlock.gif      Private   Function generateVCode() Function generateVCode(ByVal CodeLength As IntegerAs String
InBlock.gif        
Dim VCode As String = String.Empty
InBlock.gif        
Dim randObj As New Random()
InBlock.gif        
Dim c As Integer = 63
InBlock.gif        
For i As Byte = 1 To CodeLength
InBlock.gif            
'是否显示 数字:0, 因为数字0 与字母O 容易混淆
InBlock.gif
            'While (c = 63)
InBlock.gif
            '    c = randObj.Next(35)
InBlock.gif
            'End While
InBlock.gif
            c = randObj.Next(35)
InBlock.gif            
If c >= 10 Then
InBlock.gif                c 
+= 7
InBlock.gif            
End If
InBlock.gif            c 
+= 48
InBlock.gif            VCode 
+= Chr(c)
InBlock.gif        
Next
InBlock.gif        
Return VCode
ExpandedBlockEnd.gif    
End Function

 

    我们还可以在生成图像的过程中,使用更加复杂的方法来增强安全性,常用的方法有:

1. 在上述图像生成结束后,在图像上添加随机的杂点,或者是随机的线条

2. 使用彩色的字体或者背景;

3. 使用预先准备的干扰性更强的背景;

4. 还可以移动或者旋转每个字符的位置与角度;

 

        当然我们也可以使用汉字来做校验码,但是用户恐怕很难接受吧,哈哈遇到校验码里面的字居然不认识的时候,说不定很抓狂~~。

 

 

Author : Activer   

MSN: asp_lha@msn.com  

 

(转载请注明原作者,谢谢!)

 

转载于:https://www.cnblogs.com/Activer/archive/2006/01/30/324332.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值