ASP.NET MVC5總結（四）登錄中經常使用技術解析之驗證碼

   在應用軟件中，登錄系統咱們每每會用到驗證碼技術，下面將介紹在MVC中用到的驗證碼技術。

   1.前端代碼段及前端效果圖以下

<div class="row">
                    <input id="txt_code" maxlength="4" type="text" placeholder="驗證碼" style="width: 190px; float: left;">
                    <div style="width: 110px; float: right; padding-top: 14px; padding-left: 14px;">
                        看不清？<a id="switchCode" href="javascript:void();" style="text-decoration: none;">換一張</a>
                        <img id="imgcode" class="authcode" src="~/Login/GetAuthCode" width="80" height="25" />
                    </div>
                </div>

View Code

   當驗證碼看不清楚時，咱們點擊換一張來進行驗證碼的替換，js代碼以下： 

$("#switchCode").click(function () {
                        $("#imgcode").attr("src", "/Login/GetAuthCode?time=" + Math.random());
                    });

View Code

   2.服務端

   咱們須要引入程序集：using System.Web.Mvc;

   前端調用代碼以下：

[HttpGet]
        public ActionResult GetAuthCode()
        {
            return File(new VerifyCode().GetVerifyCode(), @"image/Gif");
        }

View Code

   具體實現類以下：

public class VerifyCode
    {
        public byte[] GetVerifyCode()
        {
            int codeW = 80;
            int codeH = 30;
            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" };
            //驗證碼的字符集，去掉了一些容易混淆的字符 
            char[] character = { '1', '2', '3', '4', '5', '6', '7', '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、驗證碼加密
            WebHelper.WriteSession("nfine_session_verifycode", Md5.md5(chkCode.ToLower(), 16));
            //建立畫布
            Bitmap bmp = new Bitmap(codeW, codeH);
            Graphics g = Graphics.FromImage(bmp);
            g.Clear(Color.White);
            //畫噪線 
            for (int i = 0; i < 3; 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, (float)0);
            }
            //將驗證碼圖片寫入內存流，並將其以 "image/Png" 格式輸出 
            MemoryStream ms = new MemoryStream();
            try
            {
                bmp.Save(ms, ImageFormat.Png);
                return ms.ToArray();
            }
            catch (Exception)
            {
                return null;
            }
            finally
            {
                g.Dispose();
                bmp.Dispose();
            }
        }
    }

View Code

   經過上述代碼，一個簡單的驗證碼就能夠實現了。