淘先锋技术网

首页 1 2 3 4 5 6 7

ASP.NET中验证码的生成和使用

在网上看了很多牛人写的关于asp.net生成验证码的例子后，进行了一些总结。如果有哪不对的地方还请多多指教。

1.首先我们先建立一个验证码页面（取名Vcode.aspx），我们进入到他的后台（Vcode.aspx.cs）书写验证码的生成方法：

[csharp] view plain copy
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. using System.Drawing;  
  8. using System.Drawing.Imaging;  
  9.   
  10. public partial class VCode : System.Web.UI.Page  
  11. {  
  12.     protected void Page_Load(object sender, EventArgs e)  
  13.     {  
  14.         VCode v = new VCode();  
  15.         string code = v.CreateVerifyCode();            //取随机码    
  16.         v.CreateImageOnPage(code, this.Context);       // 输出图片    
  17.         Session["CheckCode"] = code;   
  18.     }  
  19.  
  20.     #region  验证码长度(默认6个验证码的长度)  
  21.     int length = 4;  
  22.     public int Length  
  23.     {  
  24.         get { return length; }  
  25.         set { length = value; }  
  26.     }  
  27.     #endregion  
  28.  
  29.     #region 验证码字体大小(为了显示扭曲效果，默认40像素，可以自行修改)  
  30.     int fontSize = 40;  
  31.     public int FontSize  
  32.     {  
  33.         get { return fontSize; }  
  34.         set { fontSize = value; }  
  35.     }  
  36.     #endregion  
  37.  
  38.     #region 边框补(默认1像素)  
  39.     int padding = 2;  
  40.     public int Padding  
  41.     {  
  42.         get { return padding; }  
  43.         set { padding = value; }  
  44.     }  
  45.     #endregion  
  46.  
  47.     #region 是否输出燥点(默认不输出)  
  48.     bool chaos = true;  
  49.     public bool Chaos  
  50.     {  
  51.         get { return chaos; }  
  52.         set { chaos = value; }  
  53.     }  
  54.     #endregion  
  55.  
  56.     #region 输出燥点的颜色(默认灰色)  
  57.     Color chaosColor = Color.LightGray;  
  58.     public Color ChaosColor  
  59.     {  
  60.         get { return chaosColor; }  
  61.         set { chaosColor = value; }  
  62.     }  
  63.     #endregion  
  64.  
  65.     #region 自定义背景色(默认白色)  
  66.     Color backgroundColor = Color.White;  
  67.     public Color BackgroundColor  
  68.     {  
  69.         get { return backgroundColor; }  
  70.         set { backgroundColor = value; }  
  71.     }  
  72.     #endregion  
  73.  
  74.     #region 自定义随机颜色数组  
  75.     Color[] colors = { Color.Black, Color.Red, Color.DarkBlue, Color.Green, Color.Orange, Color.Brown, Color.DarkCyan, Color.Purple };  
  76.     public Color[] Colors  
  77.     {  
  78.         get { return colors; }  
  79.         set { colors = value; }  
  80.     }  
  81.     #endregion  
  82.  
  83.     #region 自定义字体数组  
  84.     string[] fonts = { "Arial", "Georgia" };  
  85.     public string[] Fonts  
  86.     {  
  87.         get { return fonts; }  
  88.         set { fonts = value; }  
  89.     }  
  90.     #endregion  
  91.  
  92.     #region 自定义随机码字符串序列(使用逗号分隔)  
  93.     string codeSerial = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z";  
  94.     public string CodeSerial  
  95.     {  
  96.         get { return codeSerial; }  
  97.         set { codeSerial = value; }  
  98.     }  
  99.     #endregion  
  100.  
  101.     #region 产生波形滤镜效果  
  102.   
  103.     private const double PI = 3.1415926535897932384626433832795;  
  104.     private const double PI2 = 6.283185307179586476925286766559;  
  105.   
  106.     /// <summary>    
  107.     /// 正弦曲线Wave扭曲图片（Edit By 51aspx.com）    
  108.     /// </summary>    
  109.     /// <param name="srcBmp">图片路径</param>    
  110.     /// <param name="bXDir">如果扭曲则选择为True</param>    
  111.     /// <param name="nMultValue">波形的幅度倍数，越大扭曲的程度越高，一般为3</param>    
  112.     /// <param name="dPhase">波形的起始相位，取值区间[0-2*PI)</param>    
  113.     /// <returns></returns>    
  114.     public System.Drawing.Bitmap TwistImage(Bitmap srcBmp, bool bXDir, double dMultValue, double dPhase)  
  115.     {  
  116.         System.Drawing.Bitmap destBmp = new Bitmap(srcBmp.Width, srcBmp.Height);  
  117.         // 将位图背景填充为白色     
  118.         System.Drawing.Graphics graph = System.Drawing.Graphics.FromImage(destBmp);  
  119.         graph.FillRectangle(new SolidBrush(System.Drawing.Color.White), 0, 0, destBmp.Width, destBmp.Height);  
  120.         graph.Dispose();  
  121.   
  122.         double dBaseAxisLen = bXDir ? (double)destBmp.Height : (double)destBmp.Width;  
  123.   
  124.         for (int i = 0; i < destBmp.Width; i++)  
  125.         {  
  126.             for (int j = 0; j < destBmp.Height; j++)  
  127.             {  
  128.                 double dx = 0;  
  129.                 dx = bXDir ? (PI2 * (double)j) / dBaseAxisLen : (PI2 * (double)i) / dBaseAxisLen;  
  130.                 dx += dPhase;  
  131.                 double dy = Math.Sin(dx);  
  132.   
  133.                 // 取得当前点的颜色    
  134.                 int nOldX = 0, nOldY = 0;  
  135.                 nOldX = bXDir ? i + (int)(dy * dMultValue) : i;  
  136.                 nOldY = bXDir ? j : j + (int)(dy * dMultValue);  
  137.   
  138.                 System.Drawing.Color color = srcBmp.GetPixel(i, j);  
  139.                 if (nOldX >= 0 && nOldX < destBmp.Width  
  140.                  && nOldY >= 0 && nOldY < destBmp.Height)  
  141.                 {  
  142.                     destBmp.SetPixel(nOldX, nOldY, color);  
  143.                 }  
  144.             }  
  145.         }  
  146.   
  147.         return destBmp;  
  148.     }  
  149.  
  150.  
  151.  
  152.     #endregion  
  153.  
  154.     #region 生成校验码图片  
  155.     public Bitmap CreateImageCode(string code)  
  156.     {  
  157.         int fSize = FontSize;  
  158.         int fWidth = fSize + Padding;  
  159.   
  160.         int imageWidth = (int)(code.Length * fWidth) + 4 + Padding * 2;  
  161.         int imageHeight = fSize * 2 + Padding;  
  162.   
  163.         System.Drawing.Bitmap image = new System.Drawing.Bitmap(imageWidth, imageHeight);  
  164.   
  165.         Graphics g = Graphics.FromImage(image);  
  166.   
  167.         g.Clear(BackgroundColor);  
  168.   
  169.         Random rand = new Random();  
  170.   
  171.         //给背景添加随机生成的燥点    
  172.         if (this.Chaos)  
  173.         {  
  174.   
  175.             Pen pen = new Pen(ChaosColor, 0);  
  176.             int c = Length * 10;  
  177.   
  178.             for (int i = 0; i < c; i++)  
  179.             {  
  180.                 int x = rand.Next(image.Width);  
  181.                 int y = rand.Next(image.Height);  
  182.   
  183.                 g.DrawRectangle(pen, x, y, 1, 1);  
  184.             }  
  185.         }  
  186.   
  187.         int left = 0, top = 0, top1 = 1, top2 = 1;  
  188.   
  189.         int n1 = (imageHeight - FontSize - Padding * 2);  
  190.         int n2 = n1 / 4;  
  191.         top1 = n2;  
  192.         top2 = n2 * 2;  
  193.   
  194.         Font f;  
  195.         Brush b;  
  196.   
  197.         int cindex, findex;  
  198.   
  199.         //随机字体和颜色的验证码字符    
  200.         for (int i = 0; i < code.Length; i++)  
  201.         {  
  202.             cindex = rand.Next(Colors.Length - 1);  
  203.             findex = rand.Next(Fonts.Length - 1);  
  204.   
  205.             f = new System.Drawing.Font(Fonts[findex], fSize, System.Drawing.FontStyle.Bold);  
  206.             b = new System.Drawing.SolidBrush(Colors[cindex]);  
  207.   
  208.             if (i % 2 == 1)  
  209.             {  
  210.                 top = top2;  
  211.             }  
  212.             else  
  213.             {  
  214.                 top = top1;  
  215.             }  
  216.   
  217.             left = i * fWidth;  
  218.   
  219.             g.DrawString(code.Substring(i, 1), f, b, left, top);  
  220.         }  
  221.   
  222.         //画一个边框 边框颜色为Color.Gainsboro    
  223.         g.DrawRectangle(new Pen(Color.Gainsboro, 0), 0, 0, image.Width - 1, image.Height - 1);  
  224.         g.Dispose();  
  225.   
  226.         //产生波形（Add By 51aspx.com）    
  227.         image = TwistImage(image, true, 8, 4);  
  228.   
  229.         return image;  
  230.     }  
  231.     #endregion  
  232.  
  233.     #region 将创建好的图片输出到页面  
  234.     public void CreateImageOnPage(string code, HttpContext context)  
  235.     {  
  236.         System.IO.MemoryStream ms = new System.IO.MemoryStream();  
  237.         Bitmap image = this.CreateImageCode(code);  
  238.   
  239.         image.Save(ms, ImageFormat.Jpeg);  
  240.         context.Response.ClearContent();  
  241.         context.Response.ContentType = "image/Jpeg";  
  242.         context.Response.BinaryWrite(ms.GetBuffer());  
  243.   
  244.         ms.Close();  
  245.         ms = null;  
  246.         image.Dispose();  
  247.         image = null;  
  248.     }  
  249.     #endregion  
  250.  
  251.     #region 生成随机字符码  
  252.     public string CreateVerifyCode(int codeLen)  
  253.     {  
  254.         if (codeLen == 0)  
  255.         {  
  256.             codeLen = Length;  
  257.         }  
  258.   
  259.         string[] arr = CodeSerial.Split(',');  
  260.   
  261.         string code = "";  
  262.   
  263.         int randValue = -1;  
  264.   
  265.         Random rand = new Random(unchecked((int)DateTime.Now.Ticks));  
  266.   
  267.         for (int i = 0; i < codeLen; i++)  
  268.         {  
  269.             randValue = rand.Next(0, arr.Length - 1);  
  270.   
  271.             code += arr[randValue];  
  272.         }  
  273.   
  274.         return code;  
  275.     }  
  276.     public string CreateVerifyCode()  
  277.     {  
  278.         return CreateVerifyCode(0);  
  279.     }  
  280.     #endregion    
  281. }  
以上是生成验证码的方法，大家可以直接在浏览器查看就可以。

2.我们新建一个登录页面（取名Login.aspx），在他的前台页面添加一个image控件(ASP自带的或者HTML的都可以，关键是将他们的链接设置成你刚刚建的验证码页,这里我给大家标红了)就可以：

[html] view plain copy
  1. <img id="img_code" <span style="color:#ff0000;">src="VCode.aspx"</span> onclick="f_refreshtype()" width="50px"/>  
然后你再运行Login页面就可以看到你的图片变成了图片验证码。
3.验证码的点击刷新：

我们进入到Login的前台页面（Login.aspx），在他的头部head引入JQuery，（我引入的是1.8.3，这里引入1.4版本以上就可以，去官网上下载就行）

[html] view plain copy
  1. <span style="font-family: Arial, Helvetica, sans-serif;"><script src="JS/jquery-1.8.3.js" type="text/javascript"></script></span>  
接着在引入 JQuery下面添加js代码：

[javascript] view plain copy
  1. <script language="javascript" type="text/javascript">  
  2.         function f_refreshtype() {  
  3.             var Image1 =  document.getElementById("img_code");  
  4.             if (Image1 != null) {  
  5.                 Image1.src = Image1.src + "?";  
  6.             }  
  7.         }  
  8.     </script>  
注意：getElementById中添加的id要和你添加的image的id一样。

上面的js代码就是为你添加的图片添加一个onclick点击事件（记得在你的图片上添加οnclick="f_refreshtype()"）,这样就可以实现点击验证码图片刷新的问题了。

4.如果你想验证的话，可以自己拖一个textbox和一个button，将下列代码放到你的button的点击方法里就可以了：

[csharp] view plain copy
  1. string vCode = Session["CheckCode"].ToString();  
  2.  if (你拖的textbox的id.Text.Trim().ToUpper() == vCode.ToUpper())  
  3.  {  
  4.      ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "Startup", "alert('验证码输入正确!');", true);  
  5.  }    


以上这些就可以实现填写验证码验证的功能


-----------------------------------------------------------------------------------------------------------------------------------------------
以上观点、代码及方法都是综合了网上很多的人的智慧总结的

如果您觉得我的这篇文章涉及到侵权，请及时告知，本人会及时修正

本人是一位asp.net初学者，很高兴能和大家一起讨论技术上的问题，和大家一起共同成长，共同进步

如果您发现有不足之处，还请及时指出，希望您能不吝赐教