ASP.NET中使用验证码技术

ASP.NET中使用验证码技术

    由于验证码技术中服务器程序需要创建验证码图片，里面用到了图形编程，因此本节课程仍然是C#发现之旅的图形编程系列教程。

    根据验证码的原理，我们使用C#在ASP.NET中实现了验证码的功能。

checkimage.aspx

    首先根据上节课程的内容，我们要创建一个图片服务页面，专门用于提供包含验证码文本的图片，为此我们建立一个 checkimage.aspx 的页面。其HTML代码很简单，只有一行，不输出任何内容。在其Page_Load方法中就有创建验证码图片的过程。

// 创建一个包含随机内容的验证码文本 System.Random rand = new Random(); int len = rand.Next(4 , 6 ); char[] chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ".ToCharArray(); System.Text.StringBuilder myStr = new System.Text.StringBuilder(); for( int iCount = 0 ; iCount < len ; iCount ++ ) {     myStr.Append( chars[ rand.Next( chars.Length )]); } string text = myStr.ToString(); // 保存验证码到 session 中以便其他模块使用 this.Session["checkcode"] = text ; Size ImageSize = Size.Empty ; Font myFont = new Font("MS Sans Serif" , 20 ); // 计算验证码图片大小 using( Bitmap bmp = new Bitmap( 10 , 10 )) {     using( Graphics g = Graphics.FromImage( bmp ))     {         SizeF size = g.MeasureString( text , myFont , 10000 );         ImageSize.Width = ( int ) size.Width + 8 ;         ImageSize.Height = ( int ) size.Height + 8 ;     } } // 创建验证码图片 using( Bitmap bmp = new Bitmap( ImageSize.Width , ImageSize.Height )) {     // 绘制验证码文本     using( Graphics g = Graphics.FromImage( bmp ))     {         g.Clear( Color.White );         using( StringFormat f = new StringFormat())         {             f.Alignment = StringAlignment.Near ;             f.LineAlignment = StringAlignment.Center ;             f.FormatFlags = StringFormatFlags.NoWrap ;             g.DrawString(                 text ,                 myFont ,                 Brushes.Black ,                 new RectangleF(                 0 ,                 0 ,                 ImageSize.Width ,                 ImageSize.Height ),                 f );         }//using     }//using     // 制造噪声 杂点面积占图片面积的 30%     int num = ImageSize.Width * ImageSize.Height * 30 / 100 ;     for( int iCount = 0 ; iCount < num ; iCount ++ )     {         // 在随机的位置使用随机的颜色设置图片的像素         int x = rand.Next( ImageSize.Width );         int y = rand.Next( ImageSize.Height );         int r = rand.Next( 255 );         int g = rand.Next( 255 );         int b = rand.Next( 255 );         Color c = Color.FromArgb( r , g , b );         bmp.SetPixel( x , y , c );     }//for     // 输出图片     System.IO.MemoryStream ms = new System.IO.MemoryStream();     bmp.Save( ms , System.Drawing.Imaging.ImageFormat.Png );     this.Response.ContentType = "image/png";     ms.WriteTo( this.Response.OutputStream );     ms.Close(); }//using myFont.Dispose();

    首先我们使用.NET框架中随机数生成器 Random类型来生成一个不定长的包含随机数字和英文字符的文本，这就是验证码原始文本，我们将其保存在session中供以后使用。

    然后我们创建一个临时图片，并据此创建一个临时的图象绘制对象，然后调用Graphics的MeasureString函数获得这个字符串的显示大小。据此我们就可以计算出验证码图片的大小。

    然后我们创建一个位图对象，在此基础上创建一个图形绘制对象，然后调用图形绘制对象的DrawString函数将验证码文本绘制在这个位图上。

    绘制验证码后我们在图片上随机的制造杂点来混淆图片内容。这些杂点的面积占图片面积的30%，而且其位置和颜色都是随机的。这些杂点能严重的干扰程序辨认验证码文本。但人脑在辨认文本时能比较轻松的排除这些干扰。

    图片生成后页面就使用PNG格式将图片文档发送到客户端。

checkimage.aspx还提供了一个静态函数来检测验证码。

/// <summary> /// 检查指定的文本是否匹配验证码 /// </summary> /// <param name="text">要判断的文本</param> /// <returns>是否匹配</returns> public static bool CheckCode( string text ) {     string txt = System.Web.HttpContext.Current.Session["checkcode"] as string ;     return text == txt ; }

    代码很简单。就是看看参数传进的文本是否等于 session 中保存的验证码文本。其他的页面程序调用这个函数就可以判断验证码的正确性。

login.aspx

    验证码图片服务页面完成后，我们就可以利用这个页面来实现验证码技术。我们建立一个模拟系统登录的页面。

    上面放置输入用户名，密码和验证码的三个文本输入框。其中验证码输入框后面放置一个图片，图片就来源于checkimage.aspx页面。用户输入三个信息后点击确定按钮进行登录。则运行该按钮的服务器段代码。

private void cmdOK_Click(object sender, System.EventArgs e) {     string UserName = this.txtUserName.Text ;     string Password = this.txtPassword.Text ;     string CheckCode = this.txtCheckCode.Text ;     if( UserName == "张三"         && Password == "abc"         && checkimage.CheckCode( CheckCode ) )     {         this.lblResult.Text = "<b>登录成功</b>";         this.RegisterStartupScript("a" , "<script>alert('登录成功');</script>");     }     else     {         this.lblResult.Text = "<font color=red><b>用户登录信息错误，请重新输入</b></font>";     } }

    在该代码中，程序获得用户输入的用户名，密码和验证码，然后判断用户名密码是否正确，还调用checkimage的静态函数CheckCode来判断验证码是否正确。只有这三个信息都正确则登录成功，否则登录失败。

    在少数情况下，程序生成的验证码图片难以辨认，则需要重新提供新的验证码图片，此时我们在登录页面中可以双击这个图片来更新验证码图片。显示验证码图片的HTML代码片断为

<img src="checkimage.aspx"     title='看不清楚，双击图片换一张。'     ondblclick="this.src = 'checkimage.aspx?flag=' + Math.random() "     border="1">

    可以看到 ondblclick 事件处理中更新了图片来源，这里使用了一个毫无意义的flag页面参数，这是保证浏览器不会使用本地缓存的验证码图片而是下载最新的验证码图片。

    用户双击图片后，浏览器重新调用checkimage.aspx页面，于是服务器端的验证码文本用了新的，而图片内容也随之更新。

    由于每次尝试登录或更换验证码图片时，正确的验证码都是随机的发生改变，毫无规律，这样就很大的增强了登录页面的安全性。但这样做会让用户登录时需要辨认和输入验证码，这会降低应用程序的可用性。因此是否使用验证码技术是需要多方面权衡的。

小结

    在本次课程中，我们一起研究了验证码技术的原理，并使用C#在ASP.NET中实现了简单的验证码技术。验证码技术是一种安全防御技术，其中使用了一定的图形编程。这样看来图形编程应用是广泛的，可以为很多其他的技术提供支持。