構建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的後台管理系統（16）-許可權管理系統-漂亮的驗證碼

標籤：

我們上一節建了資料庫的表,但我發現很多東西還未完善起來,比如驗證碼,我們先做好驗證碼吧,驗證碼我們再熟悉不過了，為了防止惡意的登入，我們必須在登入頁面加入驗證碼,下面我將分享一個驗證碼，這個是用C#畫的，原理是，產生一個隨機4位元，將其儲存為session或者是cookie形式，將使用者輸入的驗證碼進行對比，

驗證碼可以是一個視圖cshtml，或者是一個aspx頁面，也可以是一個ashx一般處理常式，我們這裡用ashx來顯示

在App.Admin下的Core檔案夾下建立一個一般處理檔案verify_code.ashx,複製以下代碼（此驗證碼適用aspx程式的）

using System;using System.IO;using System.Drawing;using System.Drawing.Imaging;using System.Web;using System.Web.SessionState;namespace App.Admin{    /// <summary>    /// 驗證碼產生類    /// </summary>    public class verify_code : IHttpHandler, IRequiresSessionState    {        public void ProcessRequest(HttpContext context)        {            int codeW = 80;            int codeH = 22;            int fontSize = 16;            string chkCode = string.Empty;            //顏色列表，用於驗證碼、噪線、噪點             Color[] color = { Color.Black, Color.Red, Color.Blue, Color.Green, Color.Orange, Color.Brown, Color.Brown, Color.DarkBlue };            //字型列表，用於驗證碼             string[] font = { "Times New Roman", "Verdana", "Arial", "Gungsuh", "Impact" };            //驗證碼的字元集，去掉了一些容易混淆的字元             char[] character = { ‘2‘, ‘3‘, ‘4‘, ‘5‘, ‘6‘, ‘8‘, ‘9‘, ‘a‘, ‘b‘, ‘d‘, ‘e‘, ‘f‘, ‘h‘, ‘k‘, ‘m‘, ‘n‘, ‘r‘, ‘x‘, ‘y‘, ‘A‘, ‘B‘, ‘C‘, ‘D‘, ‘E‘, ‘F‘, ‘G‘, ‘H‘, ‘J‘, ‘K‘, ‘L‘, ‘M‘, ‘N‘, ‘P‘, ‘R‘, ‘S‘, ‘T‘, ‘W‘, ‘X‘, ‘Y‘ };            Random rnd = new Random();            //產生驗證碼字串             for (int i = 0; i < 4; i++)            {                chkCode += character[rnd.Next(character.Length)];            }            //寫入Session            context.Session["Code"] = chkCode;            //建立畫布            Bitmap bmp = new Bitmap(codeW, codeH);            Graphics g = Graphics.FromImage(bmp);            g.Clear(Color.White);            //畫噪線             for (int i = 0; i < 1; i++)            {                int x1 = rnd.Next(codeW);                int y1 = rnd.Next(codeH);                int x2 = rnd.Next(codeW);                int y2 = rnd.Next(codeH);                Color clr = color[rnd.Next(color.Length)];                g.DrawLine(new Pen(clr), x1, y1, x2, y2);            }            //畫驗證碼字串             for (int i = 0; i < chkCode.Length; i++)            {                string fnt = font[rnd.Next(font.Length)];                Font ft = new Font(fnt, fontSize);                Color clr = color[rnd.Next(color.Length)];                g.DrawString(chkCode[i].ToString(), ft, new SolidBrush(clr), (float)i * 18 + 2, (float)0);            }            //畫噪點             for (int i = 0; i < 100; i++)            {                int x = rnd.Next(bmp.Width);                int y = rnd.Next(bmp.Height);                Color clr = color[rnd.Next(color.Length)];                bmp.SetPixel(x, y, clr);            }            //清除該頁輸出緩衝，設定該頁無緩衝             context.Response.Buffer = true;            context.Response.ExpiresAbsolute = System.DateTime.Now.AddMilliseconds(0);            context.Response.Expires = 0;            context.Response.CacheControl = "no-cache";            context.Response.AppendHeader("Pragma", "No-Cache");            //將驗證碼圖片寫入記憶體流，並將其以 "image/Png" 格式輸出             MemoryStream ms = new MemoryStream();            try            {                bmp.Save(ms, ImageFormat.Png);                context.Response.ClearContent();                context.Response.ContentType = "image/Png";                context.Response.BinaryWrite(ms.ToArray());            }            finally            {                //顯式釋放資源                 bmp.Dispose();                g.Dispose();            }        }        public bool IsReusable        {            get            {                return false;            }        }    }}

View Code

 

 //寫入Session
context.Session["Code"] = chkCode;
調用這個頁面將產生一個session，我們將與使用者輸入的代碼進行對比，OK回到Account的index視圖

在驗證碼的位置嵌入這個頁面

<tr>                            <td style="width: 80px; text-align: right">驗證碼：                            </td>                            <td>                                 <input style="width: 50px" type="text" name="ValidateCode" id="ValidateCode" />                                <img id="codeImg" alt="重新整理驗證碼！" style="margin-bottom: -8px; cursor: pointer;" src="/Core/verify_code.ashx" onclick="this.src=this.src+‘?‘" />                                <a href="javascript:$(‘#codeImg‘).trigger(‘click‘)">看不清？</a>                            </td>                        </tr>

編譯後預覽一下

構建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的後台管理系統（16）-許可權管理系統-漂亮的驗證碼