如何實現頁面登入驗證
阿新 • • 發佈:2018-11-09
現在很多網站在登入的時候都需要輸入驗證碼,現在輸入的驗證碼方式層出不窮有單單是數字的、字母(又分大小寫)的,有數字、字母混合的,有給出運算表示式需要回答結果的,還有的卡片移動組合的...,為什麼要輸入驗證碼呢?其實是為了有效防止對某一個特定註冊/登入使用者用特定程式暴力破解方式進行不斷的登陸嘗試,這些驗證碼都是隨著網路安全性要求越來越高而不斷變化,實現的方式也多種多樣。下面由於自己最近在開發中用到(現在就只是簡單實現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 = "驗證碼不正確!")); }
那麼整個實現過程已完畢,過程很簡單,就是把隨機數和圖片結合生成一張背景圖即可。這只是一個簡簡單單的驗證碼實現,還有更復雜的,以後碰到或需要實現的再做記錄,希望和各位大牛一起成長學習。