1. 程式人生 > >如何實現頁面登入驗證

如何實現頁面登入驗證

現在很多網站在登入的時候都需要輸入驗證碼,現在輸入的驗證碼方式層出不窮有單單是數字的、字母(又分大小寫)的,有數字、字母混合的,有給出運算表示式需要回答結果的,還有的卡片移動組合的...,為什麼要輸入驗證碼呢?其實是為了有效防止對某一個特定註冊/登入使用者用特定程式暴力破解方式進行不斷的登陸嘗試,這些驗證碼都是隨著網路安全性要求越來越高而不斷變化,實現的方式也多種多樣。下面由於自己最近在開發中用到(現在就只是簡單實現4位數字),之前也很少研究過,也順便記錄下來,如有不當之處希望各大牛不吝指出,大家一起共勉學習。

  廢話少說,開始進入正題。。。

  一、首先效果圖如下:

  

  二、實現過程:

  1、前端這張圖片是一張背景圖,實現如下:

<i id="VCodeImage" style="background-image: url(../Validate/GetValidateCode);"></i>
<b class="kbq">看不清?<br /><em id="changevcode">換一張</em></b>

  2、後臺輸出分兩個函式實現,一個是生成指定長度的隨機數,一個是生成背景圖,如下:

     1)、生成指定長度的隨機數:

 

        //// <summary>
        /// 生成驗證碼
        /// </summary>
        /// <param name="length">指定驗證碼的長度</param>
        /// <returns>輸出指定長度的隨機數</returns>
        public string CreateValidateCode(int length)
        {
            int[] randMembers = new int[length];
            int[] validateNums = new int[length];
            string validateNumberStr = "";
            //生成起始序列值
            int seekSeek = unchecked((int)DateTime.Now.Ticks);
            Random seekRand = new Random(seekSeek);
            int beginSeek = (int)seekRand.Next(0, Int32.MaxValue - length * 10000);
            int[] seeks = new int[length];
            for (int i = 0; i < length; i++)
            {
                beginSeek += 10000;
                seeks[i] = beginSeek;
            }
            //生成隨機數字
            for (int i = 0; i < length; i++)
            {
                Random rand = new Random(seeks[i]);
                int pownum = 1 * (int)Math.Pow(10, length);
                randMembers[i] = rand.Next(pownum, Int32.MaxValue);
            }
            //抽取隨機數字
            for (int i = 0; i < length; i++)
            {
                string numStr = randMembers[i].ToString();
                int numLength = numStr.Length;
                Random rand = new Random();
                int numPosition = rand.Next(0, numLength - 1);
                validateNums[i] = Int32.Parse(numStr.Substring(numPosition, 1));
            }
            //生成驗證碼
            for (int i = 0; i < length; i++)
            {
                validateNumberStr += validateNums[i].ToString();
            }
            return validateNumberStr;
        }

 

  2)、生成背景圖:

 

        /// <summary>
        /// 建立驗證碼的圖片
        /// </summary>
        /// <param name="validateCode">在圖片上顯示的隨機數</param>
        /// <returns>帶有驗證碼的圖片</returns>
        public byte[] CreateValidateGraphic(string validateCode)
        {
            Bitmap image = new Bitmap((int)Math.Ceiling(validateCode.Length * 25.0), 36);
            Graphics g = Graphics.FromImage(image);
            try
            {
                //生成隨機生成器
                Random random = new Random();
                //清空圖片背景色
                g.Clear(Color.White);
                //畫圖片的干擾線
                for (int i = 0; i < 25; i++) //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 Font("Arial", 24, (FontStyle.Bold | FontStyle.Italic));
                LinearGradientBrush brush = new LinearGradientBrush(new Rectangle(0, 0, image.Width, image.Height),
                 Color.Blue, Color.DarkRed, 1.2f, true);
                g.DrawString(validateCode, font, brush, 3, 2);
                //畫圖片的前景干擾點
                for (int i = 0; i < 100; i++) //i的最終數字越大表示圖片的干擾點越多
                {
                    int x = random.Next(image.Width);
                    int y = random.Next(image.Height);
                    image.SetPixel(x, y, Color.FromArgb(random.Next()));
                }
                //畫圖片的邊框線
                g.DrawRectangle(new Pen(Color.Silver), 0, 0, image.Width - 1, image.Height - 1);
                //儲存圖片資料
                MemoryStream stream = new MemoryStream();
                image.Save(stream, ImageFormat.Jpeg);
                //輸出圖片流
                return stream.ToArray();
            }
            finally
            {
                g.Dispose();
                image.Dispose();
            }
        }

 

  3、呼叫及判斷使用者輸入的驗證碼是否正確:

 

        /// <summary>
        /// 驗證碼
        /// </summary>
        /// <returns></returns>
        public ActionResult GetValidateCode()
        {
            App_Code.Other.ValidateCode vCode = new App_Code.Other.ValidateCode();
            string code = vCode.CreateValidateCode(4);
            Session["ValidateCode"] = code;//關鍵點
            byte[] bytes = vCode.CreateValidateGraphic(code);
            return File(bytes, @"image/jpeg");
        }      

 

   判斷使用者輸入的驗證碼是否正確:

    if (Session["ValidateCode"].ToString() != us.VCode)
       {
          return Json(new App_Code.JsonData(false, msg = "驗證碼不正確!"));
       }

  

  那麼整個實現過程已完畢,過程很簡單,就是把隨機數和圖片結合生成一張背景圖即可。這只是一個簡簡單單的驗證碼實現,還有更復雜的,以後碰到或需要實現的再做記錄,希望和各位大牛一起成長學習。