ASP.NET——验证码的制作

我们在登陆网站，发表博客或者提交评论的时候，经常会遇到填写验证码这一项，当时感觉挺神奇的样子，终于在牛腩新闻发布系统里接触到了，在这里小小的总结下。

        用到的东东有三个：一个aspx页面，一个图片

        首先，建立一个aspx页面。       

[csharp] view plain copy print ?

1. <%@ WebHandler Language="C#" Class="Picture" %> 
2.  
3. using System; 
4. using System.Web; 
5. using System.Drawing; 
6. using System.Drawing.Drawing2D; 
7. using System.Web.SessionState;   
8.  
9. public class Picture : IHttpHandler, IRequiresSessionState  
10. // 要使用session必须实现该接口,记得要导入System.Web.SessionState命名空间 
11. { 
12.  
13.     public void ProcessRequest(HttpContext context) 
14.     { 
15.         string checkCode = GenCode(5);  // 产生5位随机字符 
16.         context.Session["Code"] = checkCode; //将字符串保存到Session中，以便需要时进行验证 
17.         System.Drawing.Bitmap image = new System.Drawing.Bitmap(70, 22); 
18.         Graphics g = Graphics.FromImage(image); 
19.         try 
20.         { 
21.             //生成随机生成器 
22.             Random random = new Random(); 
23.  
24.             //清空图片背景色 
25.             g.Clear(Color.White); 
26.  
27.             // 画图片的背景噪音线 
28.             int i; 
29.             for (i = 0; i < 25; i++) 
30.             { 
31.                 int x1 = random.Next(image.Width); 
32.                 int x2 = random.Next(image.Width); 
33.                 int y1 = random.Next(image.Height); 
34.                 int y2 = random.Next(image.Height); 
35.                 g.DrawLine(new Pen(Color.Silver), x1, y1, x2, y2); 
36.             } 
37.  
38.             Font font = new System.Drawing.Font("Arial", 12, (System.Drawing.FontStyle.Bold)); 
39.             System.Drawing.Drawing2D.LinearGradientBrush brush = new System.Drawing.Drawing2D.LinearGradientBrush(new Rectangle(0, 0, image.Width, image.Height), Color.Blue, Color.DarkRed, 1.2F, true); 
40.             g.DrawString(checkCode, font, brush, 2, 2); 
41.  
42.             //画图片的前景噪音点 
43.             g.DrawRectangle(new Pen(Color.Silver), 0, 0, image.Width - 1, image.Height - 1); 
44.             System.IO.MemoryStream ms = new System.IO.MemoryStream(); 
45.             image.Save(ms, System.Drawing.Imaging.ImageFormat.Gif); 
46.             context.Response.ClearContent(); 
47.             context.Response.ContentType = "image/Gif"; 
48.             context.Response.BinaryWrite(ms.ToArray()); 
49.         } 
50.         finally 
51.         { 
52.             g.Dispose(); 
53.             image.Dispose(); 
54.         } 
55.     } 
56.  
57.     /// <summary> 
58.     /// 产生随机字符串 
59.     /// </summary> 
60.     /// <param name="num">随机出几个字符</param> 
61.     /// <returns>随机出的字符串</returns> 
62.     private string GenCode(int num) 
63.     { 
64.         string str = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ"; 
65.         char[] chastr = str.ToCharArray(); 
66.          
67.         string code = ""; 
68.         Random rd = new Random(); 
69.         int i; 
70.         for (i = 0; i < num; i++) 
71.         { 
72.             //code += source[rd.Next(0, source.Length)]; 
73.             code += str.Substring(rd.Next(0, str.Length), 1); 
74.         } 
75.         return code; 
76.     } 
77.  
78.     public bool IsReusable 
79.     { 
80.         get 
81.         { 
82.             return false; 
83.         } 
84.     } 
85. } 

<%@ WebHandler Language="C#" Class="Picture" %>

using System;
using System.Web;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Web.SessionState;  

public class Picture : IHttpHandler, IRequiresSessionState 
 // 要使用session必须实现该接口,记得要导入System.Web.SessionState命名空间
{

    public void ProcessRequest(HttpContext context)
    {
        string checkCode = GenCode(5);  // 产生5位随机字符
        context.Session["Code"] = checkCode; //将字符串保存到Session中，以便需要时进行验证
        System.Drawing.Bitmap image = new System.Drawing.Bitmap(70, 22);
        Graphics g = Graphics.FromImage(image);
        try
        {
            //生成随机生成器
            Random random = new Random();

            //清空图片背景色
            g.Clear(Color.White);

            // 画图片的背景噪音线
            int i;
            for (i = 0; i < 25; i++)
            {
                int x1 = random.Next(image.Width);
                int x2 = random.Next(image.Width);
                int y1 = random.Next(image.Height);
                int y2 = random.Next(image.Height);
                g.DrawLine(new Pen(Color.Silver), x1, y1, x2, y2);
            }

            Font font = new System.Drawing.Font("Arial", 12, (System.Drawing.FontStyle.Bold));
            System.Drawing.Drawing2D.LinearGradientBrush brush = new System.Drawing.Drawing2D.LinearGradientBrush(new Rectangle(0, 0, image.Width, image.Height), Color.Blue, Color.DarkRed, 1.2F, true);
            g.DrawString(checkCode, font, brush, 2, 2);

            //画图片的前景噪音点
            g.DrawRectangle(new Pen(Color.Silver), 0, 0, image.Width - 1, image.Height - 1);
            System.IO.MemoryStream ms = new System.IO.MemoryStream();
            image.Save(ms, System.Drawing.Imaging.ImageFormat.Gif);
            context.Response.ClearContent();
            context.Response.ContentType = "image/Gif";
            context.Response.BinaryWrite(ms.ToArray());
        }
        finally
        {
            g.Dispose();
            image.Dispose();
        }
    }

    /// <summary>
    /// 产生随机字符串
    /// </summary>
    /// <param name="num">随机出几个字符</param>
    /// <returns>随机出的字符串</returns>
    private string GenCode(int num)
    {
        string str = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        char[] chastr = str.ToCharArray();
        
        string code = "";
        Random rd = new Random();
        int i;
        for (i = 0; i < num; i++)
        {
            //code += source[rd.Next(0, source.Length)];
            code += str.Substring(rd.Next(0, str.Length), 1);
        }
        return code;
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

           其次，在用到验证码的界面添加一个img控件，并且src属性指向.ashx文件。

[html] view plain copy print ?

1. <img src="handler/WaterMark.ashx" id="vimg" alt="" onclick="changeCode()"/> 

<img src="handler/WaterMark.ashx" id="vimg" alt="" οnclick="changeCode()"/>

        然后，判断提交的验证码是否正确。      

[csharp] view plain copy print ?

1. //判断验证码是否输入正确 
2. string code = txtCode.Text.Trim().ToUpper();//将输入的字母都转化成大写然后作比较 
3. string rightCode = Session["Code"].ToString(); 
4. if(code!=rightCode ) 
5. {            
6.     Page.ClientScript.RegisterStartupScript(Page.GetType(), "message", "<script language='javascript' defer>alert('验证码输入错误！');</script>");//提示错误保证后面背景不变白 
7.  
8.     return; 
9. } 

        //判断验证码是否输入正确
        string code = txtCode.Text.Trim().ToUpper();//将输入的字母都转化成大写然后作比较
        string rightCode = Session["Code"].ToString();
        if(code!=rightCode )
        {           
            Page.ClientScript.RegisterStartupScript(Page.GetType(), "message", "<script language='javascript' defer>alert('验证码输入错误！');</script>");//提示错误保证后面背景不变白

            return;
        }

        最后，使用JavaScrip来刷新验证码。因为代码比较少，所以可以嵌套在代码中。       

[html] view plain copy print ?

1. <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> 
2.     <script language="javascript" type="text/javascript"> 
3.         function changeCode() { 
4.             var imgNode = document.getElementById("vimg"); 
5.             imgNode.src = "handler/WaterMark.ashx?t=" + (new Date()).valueOf();  // 这里加个时间的参数是为了防止浏览器缓存的问题    
6.         } 
7.     </script> 
8. </asp:Content>