[ASP.NET MVC] 前台會員使用 Cookie 保持登入狀態範例教學

[ASP.NET MVC] 前台會員使用 Cookie 保持登入狀態範例教學 #CH5

在學習 C# 與資料庫的互動方式,有一個常見且實用的教學就是會員登入、註冊與修改會員資料等範例,學習過程中會用到資料庫新增、修改與查詢動作,是理解程式與資料庫互動的常見程式碼。
當學會了這個範例,將來為客戶開發系統的時候,馬上可以派上用場。

此篇文章是繼上一篇文章: 前台會員忘記密碼與重設密碼範例教學 #CH4 接續教學。

此範例展示會員登入時勾選保持登入,程式記錄會員資訊在 Cookie ,等待下次登入時,先從 Cookie檢查是否已登入過。

範例內容主要以 ASP.NET MVC 為核心,前端使用 Vue.js 框架,而後端使用 SQL Server 當資料庫。

文末有提供此操作範例的完整程式碼下載,有需要可以自行下載瀏覽。

增加保持登入勾選

打開登入頁範例 \Views\Member\Login.cshtml 在登入按鈕上方加入勾選。

在執行登入按鈕時會呼叫的 DoLogin() 方法修改一下,加入 KeepLogin 參數傳送到後端。

登入成功寫入 Cookie

接著到 \Controllers\MemberController.cs 的頁面,找到 public ActionResult DoLogin(DoLoginIn inModel) 方法。

在程式碼 outModel.ResultMsg = "登入成功"; 之後繼續加入新程式碼。

此段程式碼是建立一個 Cookie 值放在使用者的瀏覽器上面,記錄著帳號及密碼,等待下次登入時,可以檢查。

Cookie 資安防護機制

當在編寫 Cookie 時要注意資安防護的 XSS 攻擊,尤其是具有登入身份的驗證機制,一定要建立安全檢查,避免駭客利用竊聽偷取你的 Cookie 就可以偽造你的身份。

程式碼中有一行 ckUserKeepLogin.HttpOnly = true; 就是在 Cookie 設定禁止 Javascript 存取 Cookie。

除了設定 HttpOnly 之外,網站還需要啟用 SSL 憑證的 https 協定,兩者加起來才可以有效防止 XSS 攻擊。

調整登入 Model 參數

在 Controller 有增加新參數,所以要在 Model 也加入新參數,開啟 \Models\MemberModel.cs 頁面,在 DoLoginIn 的類別內加入新參數。

檢查是否已登入

假設我們已經成功登入帳號,當再次開啟登入畫面時,我們先在程式檢查 Cookie 是否已登入,如果已登入,就可以跳過登入畫面,直接進入會員專區。

開啟 \Controllers\MemberController.cs 頁面,直接在 public ActionResult Login() 方法內增加語法。

修改後的 public ActionResult Login() 語法如下。

從 Request 裡面取出 Cookie 值,向資料庫驗證身份,當檢查成功之後,就可以回傳參數給 View,View 再依參數導向其他頁面。

View 檢查保持登入參數

開啟 \Views\Member\Login.cshtml 頁面,可以建立 Vue.js 的 mounted 事件來檢查是否已登入參數。
在 Vue.js 的事件加入以下程式碼。

測試保持登入

按 F5 開啟網頁,在登入頁面勾選「保持登入」,輸入帳號密碼執行登入。

登入成功後,會導向修改個人資料範例頁。
這時候可以關閉網頁,再重開瀏覽器,再到登入頁面,如果是過去的狀態,會因為 Session 已改變,造成使用者需要重新登入才可以。
使用 Cookie 記錄帳號密碼之後,就可以從 Cookie 裡面檢查使用者身份,不必讓使用者再次輸入帳號密碼。
這時候再重新回到登入後,就會檢查 Cookie 值內是否已登入過,Cookie 檢查成功,就會出現 alert 訊息。

重點整理

  1. 使用 Cookie 記錄會員身份
  2. 增加保持登入勾選鈕
  3. 登入成功寫入 Cookie
  4. 在需要登入頁面檢查 Cookie

範例下載

此範例包含完整範例內容,連結 GitHub 下載範例

相關學習文章

如果你在學習上有不懂的地方,可以參考專業諮詢或線上家教服務,我想辨法解決你的問題
如果文章內容有錯誤的地方,幫我在下方留言通知我一下,謝謝
喜歡我的文章,請幫我在上方綠色拍手圖示按 5 下,也歡迎按月贊助,鼓勵我繼續創作,謝謝

加入社團一起討論

2 thoughts on “[ASP.NET MVC] 前台會員使用 Cookie 保持登入狀態範例教學 #CH5

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。

four × 1 =