ASP.NET中動態生成驗證碼的一則方法

熱血奇跡 2013-04-11

展開全文

現在不少網站中都使用了驗證碼的技術，實現方式也是多種多樣，這里主要介紹ASP.NET中可以采用的一種動態生成驗證碼的方法，可能并不十分完美，但實現難度是屬于較低的。

該方法是利用了普通的動態圖片生成技術，但比較特別的一點是圖片的生成是在一個Page類型的子類的Page_Load方法中執行的。所以Response的ContentType為image/Gif，而非text/html。

GraphicalText.aspx.cs代碼：

using System;
using System.Drawing;
using System.Drawing.Imaging;
 
namespace WebApplication1
{
    public partial class GraphicalText : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            using (Bitmap image = new Bitmap(30, 20))
            {
                using (Graphics g = Graphics.FromImage(image))
                {
                    g.FillRectangle(Brushes.Yellow, 0, 0, 30, 20);
                    g.DrawRectangle(Pens.Red, 0, 0, 29, 19);
                    Font f = new Font("Arial", 9, FontStyle.Italic);
                    string code = Request.QueryString["code"];
                    g.DrawString(code, f, Brushes.Blue, 0, 0);
                    Response.ContentType = "image/Gif";
                    image.Save(Response.OutputStream, ImageFormat.Gif);
                }
            }
        }
    }
}

注意，必須要加上這句代碼——“Response.ContentType = “image/Gif”;”，否則在IE之外的瀏覽器中無法正確顯示。

對應的GraphicalText.aspx代碼很簡單，只有一行，因為不需要有HTML的輸出，例如：http://：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GraphicalText.aspx.cs" Inherits="WebApplication1.GraphicalText" %>

在主頁面中關鍵要將圖片的ImageUrl賦值為之前的頁面地址，并且為了令圖片內容發生變化，將4位隨機數字作為它的參數。

Default.aspx.cs代碼：

using System;
using System.Text;
 
namespace WebApplication1
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            StringBuilder sb = new StringBuilder("~/GraphicalText.aspx?code=");
            Random d = new Random();
            sb.Append((char)d.Next(48, 58));
            sb.Append((char)d.Next(48, 58));
            sb.Append((char)d.Next(48, 58));
            sb.Append((char)d.Next(48, 58));
            Image1.ImageUrl = sb.ToString();
        }
    }
}

最后在頁面中加上必要的驗證代碼，所有工作就都完成了。

http://的Default.aspx代碼：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www./1999/xhtml" >
<head runat="server">
    <title>http://</title>
<script type="text/javascript">
    function ClientValidate(sender, args) {
        var url = form1.Image1.src;
        var index = url.lastIndexOf("=");
        var code = url.substring(index + 1);
        if (code == form1.TextBox1.value) {
            args.IsValid = true;
        }
        else {
            args.IsValid = false;
        }
    }
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1"  runat="server">
                <ContentTemplate>
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                    <asp:Image ID="Image1" runat="server"/>
                    <asp:Button ID="Button1" runat="server" Text="刷新"  />                              
                    <asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="驗證碼錯誤！"
                        ControlToValidate="TextBox1" ClientValidationFunction="ClientValidate" ValidateEmptyText="true" ValidationGroup="validation"></asp:CustomValidator>                              
                </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    <div>
        <asp:Button ID="Button2" runat="server" Text="提交" ValidationGroup="validation"/>//http://
    </div>
    </form>
</body>
</html>