ASP.NET 實現手機瀏覽器記住帳號密碼功能

在行動裝置網頁開發中，提供「記住帳號密碼」功能能顯著提升使用者體驗。本文說明如何在 ASP.NET 應用程式中結合 Cookie 與前端技術實現此功能，並針對行動瀏覽器的特殊行為提供建議。

核心實作邏輯

1. 登入頁面：提供「記住我」核取方塊，表單送出時檢查是否勾選。
2. 後端處理：若勾選，將加密後的帳號密碼寫入 Cookie，設定較長有效期（如 1 年）；否則刪除或縮短 Cookie 有效期。
3. 頁面載入：偵測 Cookie 存在時，自動填入帳號密碼欄位並勾選「記住我」。

後端程式碼範例 (C#)

// 登入按鈕點擊事件
protected void btnLogin_Click(object sender, EventArgs e)
{
    string username = txtUsername.Text.Trim();
    string password = txtPassword.Text;
    bool rememberMe = chkRememberMe.Checked;
    
    // 驗證邏輯（略）
    if (ValidateUser(username, password))
    {
        if (rememberMe)
        {
            // 建立加密 Ticket（實務上應使用 MachineKey 加密）
            string userData = $"{username}|{Encrypt(password)}";
            FormsAuthenticationTicket ticket = new FormsAuthenticationTicket(
                1, username, DateTime.Now, DateTime.Now.AddYears(1), true, userData);
            
            string encryptedTicket = FormsAuthentication.Encrypt(ticket);
            HttpCookie cookie = new HttpCookie(FormsAuthentication.FormsCookieName, encryptedTicket)
            {
                HttpOnly = true,
                Secure = Request.IsSecureConnection, // HTTPS 環境下啟用
                Expires = DateTime.Now.AddYears(1)
            };
            Response.Cookies.Add(cookie);
        }
        else
        {
            // 清除記住我 Cookie
            HttpCookie cookie = new HttpCookie(FormsAuthentication.FormsCookieName)
            {
                Expires = DateTime.Now.AddDays(-1)
            };
            Response.Cookies.Add(cookie);
        }
        
        Response.Redirect("Default.aspx");
    }
}

// 頁面載入時自動填入
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        HttpCookie authCookie = Request.Cookies[FormsAuthentication.FormsCookieName];
        if (authCookie != null)
        {
            try
            {
                FormsAuthenticationTicket ticket = FormsAuthentication.Decrypt(authCookie.Value);
                string[] userData = ticket.UserData.Split('|');
                txtUsername.Text = userData[0];
                txtPassword.Text = Decrypt(userData[1]);
                chkRememberMe.Checked = true;
            }
            catch { /* Cookie 損毀或解密失敗，忽略 */ }
        }
    }
}

前端配合注意事項

• autocomplete 屬性：在 `
  ` 或 `` 加上 `autocomplete="on"`，協助瀏覽器內建密碼管理器運作。
• input type：密碼欄位務必使用 `type="password"`，否則瀏覽器不會提示儲存密碼。
• 行動瀏覽器差異：iOS Safari 與 Android Chrome 對自動填入的觸發條件不同，建議測試真機確認行為。

安全性強化建議

1. 密碼加密儲存：Cookie 中絕不可存明文密碼，需使用 AES 或機器金鑰加密。
2. HttpOnly 與 Secure 標記：防止 XSS 竊取 Cookie，HTTPS 環境強制 Secure。
3. 裝置綁定：可在 Cookie 中加入裝置指紋（User-Agent、螢幕解析度等），驗證時比對，降低 Cookie 被盜用風險。
4. 定期輪換：建議每次登入重新產生 Cookie，避免長期固定 Token。

替代方案：使用 ASP.NET Core Identity

若專案為 ASP.NET Core，建議直接使用內建的 SignInManager 與 RememberMe 參數，框架已處理加密、Cookie 選項等細節：

var result = await _signInManager.PasswordSignInAsync(
    model.Username, model.Password, model.RememberMe, lockoutOnFailure: false);

正確實作「記住密碼」功能需在便利性與安全性間取得平衡，遵循最小權限原則、加密敏感資料、善用框架內建機制，才能提供既好用又安全的使用者體驗。