# 用戶認證功能規格文檔 (Web版)

## 📋 功能概述

**功能名稱**: 用戶認證與權限管理系統 (Web端)  
**建立日期**: 2025-09-11  
**最後更新**: 2025-09-11  
**負責團隊**: 前端Web/設計/開發  
**對應Mobile規格**: `../mobile/user-authentication-mobile.md`

### 整合共用規範
> 本規格基於以下共用模組，請參閱對應規格文件：
> - **[共同業務規則](../common/business-rules.md)** - 完整的用戶認證與權限系統
> - **[用戶流程圖](../common/user-flow-diagrams.md)** - 認證流程設計

### 主要功能 (基於共用業務規則)
- **多重認證方式**: Email註冊、第三方登入 (Google、Apple)
- **用戶等級分級**: 免費用戶、試用用戶、訂閱用戶、進階用戶、高價值用戶
- **會話管理**: JWT Token機制、自動續期、多設備登入控制
- **密碼安全**: bcrypt加密、複雜度驗證、歷史記錄防護
- **帳戶安全**: 異地登入驗證、失敗次數限制、帳戶鎖定機制
- **訂閱管理**: 7天免費體驗、月費/年費訂閱、自動續訂

### Web端特色功能
- **多標籤會話**: 同一帳戶支援多個瀏覽器標籤
- **記住登入**: 最長90天的免密碼登入
- **桌面通知**: 帳戶安全事件的桌面提醒
- **密碼管理整合**: 與瀏覽器密碼管理器整合
- **企業登入**: SSO單點登入支援
- **進階安全**: 雙因素認證 (2FA) 選項

### 適用場景
- 桌面環境的安全性要求較高的登入
- 需要長期會話保持的學習環境
- 企業用戶的統一身份認證
- 多設備學習進度同步需求

### 與其他功能的關聯
- **用戶等級系統**: 不同等級用戶的功能權限差異
- **訂閱系統**: 付費用戶的權益管理和自動續訂
- **學習進度**: 跨設備的學習資料同步
- **道具商店**: 購買權限和支付驗證
- **社群功能**: 好友系統和競爭排行榜

## 💻 涉及的Web頁面 (認證系統架構)

### 主要頁面
1. **Page_Login_W** - 登入頁面 (Web版)
2. **Page_Register_W** - 註冊頁面 (Web版)  
3. **Page_Password_Reset_W** - 密碼重設頁面 (Web版)
4. **Page_Profile_Settings_W** - 用戶資料設定頁面 (Web版)
5. **Page_Account_Security_W** - 帳戶安全設定頁面 (Web版)

### Web專用頁面
1. **Page_SSO_Login_W** - 企業單點登入頁面 (Web專用)
2. **Page_Two_Factor_Auth_W** - 雙因素認證設定頁面 (Web專用)
3. **Page_Session_Management_W** - 會話管理頁面 (Web專用)

### 訂閱相關頁面
1. **Page_Subscription_Plans_W** - 訂閱方案頁面 (Web版)
2. **Page_Trial_Activation_W** - 免費體驗啟動頁面 (Web版)
3. **Page_Subscription_Management_W** - 訂閱管理頁面 (Web版)

### 輔助頁面
1. **Modal_Auth_Confirm_W** - 身份驗證確認模態視窗
2. **Modal_Session_Timeout_W** - 會話逾時提醒視窗
3. **Page_Account_Verification_W** - 帳戶驗證頁面

## 🎯 詳細頁面規格 (基於共用業務規則)

### Page_Login_W - 登入頁面

#### 功能說明 (整合共用規範)
- **頁面目的**: 用戶安全登入和身份驗證
- **認證規則**: 參考 [共同業務規則 - 用戶認證](../common/business-rules.md#🔑-用戶註冊與認證規則)
- **會話管理**: 參考 [共同業務規則 - 會話管理](../common/business-rules.md#br-auth-03-會話管理規則)

#### 登入方式支援
基於共用業務規則的多重認證機制：
- **Email + 密碼**: 傳統登入方式
- **Google 登入**: OAuth 2.0 整合
- **Apple ID 登入**: Sign in with Apple
- **記住登入**: 最長90天免密碼登入
- **企業SSO**: 單點登入整合 (Web專用)

#### 安全機制整合
基於 [共同業務規則 - 密碼安全](../common/business-rules.md#br-auth-02-密碼安全規則)：
- **失敗限制**: 連續5次錯誤鎖定15分鐘
- **異地驗證**: 異常登入地點的安全驗證
- **會話控制**: 最多3個設備同時登入

#### 頁面欄位細節

| 欄位名稱 | 資料類型 | 必填 | 預設值 | 驗證規則 | 顯示條件 |
|---------|---------|------|--------|----------|----------|
| Email輸入框 | String | 是 | - | Email格式 | 始終顯示 |
| 密碼輸入框 | String | 是 | - | 8-128字符 | 始終顯示 |
| 記住登入選項 | Boolean | 否 | false | true/false | 複選框 |
| 登入失敗計數 | Number | 是 | 0 | 0-5 | 錯誤時顯示 |
| 異地登入警示 | Boolean | 否 | false | true/false | 檢測到異地時 |
| 會話有效期 | Number | 是 | 7 | 1-90天 | 記住登入時 |
| 雙因素認證碼 | String | 否 | - | 6位數字 | 開啟2FA時 |
| 登入地點資訊 | Object | 是 | {} | 地點物件 | 安全記錄 |

#### Web版互動元素

| 元素名稱 | 元素類型 | 操作方式 | 快捷鍵 | 狀態變化 | 備註 |
|---------|---------|----------|--------|----------|------|
| Email輸入框 | 輸入框 | 點擊/Tab | Tab | 空白→輸入中 | 自動填入支援 |
| 密碼輸入框 | 密碼框 | 點擊/Tab | Tab | 空白→輸入中 | 顯示/隱藏切換 |
| 顯示密碼按鈕 | 按鈕 | 點擊/Ctrl+H | Ctrl+H | 隱藏↔顯示 | 密碼可見性 |
| 記住登入勾選 | 複選框 | 點擊/空白鍵 | Space | 未勾↔已勾 | 持久會話 |
| 登入按鈕 | 按鈕 | 點擊/Enter | Enter | 正常→處理中 | 主要行動 |
| Google登入按鈕 | 按鈕 | 點擊/Ctrl+G | Ctrl+G | 正常→跳轉中 | OAuth跳轉 |
| Apple ID登入 | 按鈕 | 點擊/Ctrl+A | Ctrl+A | 正常→跳轉中 | OAuth跳轉 |
| 忘記密碼連結 | 連結 | 點擊/Alt+F | Alt+F | - | 密碼重設 |
| 註冊連結 | 連結 | 點擊/Alt+R | Alt+R | - | 新用戶註冊 |

### Page_Register_W - 註冊頁面

#### 功能說明 (整合帳戶唯一性)
- **頁面目的**: 新用戶帳戶註冊和初始設定
- **唯一性規則**: 參考 [共同業務規則 - 帳戶註冊](../common/business-rules.md#br-auth-01-帳戶註冊規則)
- **密碼規則**: 參考 [共同業務規則 - 密碼安全](../common/business-rules.md#br-auth-02-密碼安全規則)

#### 註冊驗證機制
- **Email唯一性**: 一個Email只能註冊一個帳戶
- **第三方整合**: Google、Apple帳戶不能與已註冊Email重複
- **用戶名檢查**: 即時檢查用戶名可用性
- **密碼強度**: 大小寫字母+數字，最少8字符

#### 初始化獎勵
基於 [共同業務規則 - 鑽石消費](../common/business-rules.md#br-pay-02-鑽石消費規則)：
- **註冊贈送**: 新用戶註冊贈送1500鑽石
- **初始命條**: 新用戶獲得5個命條
- **體驗引導**: 自動啟動新手教學

#### 頁面欄位細節

| 欄位名稱 | 資料類型 | 必填 | 預設值 | 驗證規則 | 顯示條件 |
|---------|---------|------|--------|----------|----------|
| 用戶名稱 | String | 是 | - | 3-20字符 | 始終顯示 |
| Email地址 | String | 是 | - | Email格式 | 始終顯示 |
| 密碼 | String | 是 | - | 8-128字符 | 始終顯示 |
| 確認密碼 | String | 是 | - | 與密碼相同 | 始終顯示 |
| 用戶名可用性 | Boolean | 是 | false | true/false | 即時檢查 |
| Email唯一性 | Boolean | 是 | false | true/false | 即時檢查 |
| 密碼強度等級 | Number | 是 | 0 | 1-4級 | 強度指示器 |
| 服務條款同意 | Boolean | 是 | false | true/false | 必須同意 |
| 隱私政策同意 | Boolean | 是 | false | true/false | 必須同意 |
| 行銷通知同意 | Boolean | 否 | false | true/false | 可選項 |

### Page_Subscription_Plans_W - 訂閱方案頁面

#### 功能說明 (整合訂閱系統)
- **頁面目的**: 展示訂閱方案和免費體驗
- **訂閱規則**: 參考 [共同業務規則 - 付費用戶分級](../common/business-rules.md#br-user-01-付費用戶分級規則)
- **體驗機制**: 7天免費體驗訂閱

#### 訂閱方案架構
基於共用業務規則的用戶等級系統：

**試用用戶**：
- 期限：7天免費體驗訂閱
- 權益：完整功能體驗
- 轉換：試用期結束後需選擇訂閱或取消

**訂閱用戶**：
- 定價：NT$600/月 或 NT$6,000/年 (8.3折優惠)
- 權益：無限制學習次數，進階統計報告
- 特權：每日3次免費限時挑戰，命條恢復加速

**進階用戶** (第二階段)：
- 定價：NT$900/月 或 NT$9,000/年 (8.3折優惠)
- 權益：訂閱用戶功能 + 進階自訂學習功能 + 優質TTS
- 特權：更多命條上限，更快回復速度，專屬學習模式

#### 頁面欄位細節

| 欄位名稱 | 資料類型 | 必填 | 預設值 | 驗證規則 | 顯示條件 |
|---------|---------|------|--------|----------|----------|
| 當前用戶等級 | String | 是 | "免費用戶" | 用戶等級 | 頁面頂部 |
| 體驗資格狀態 | Boolean | 是 | false | true/false | 是否已使用體驗 |
| 選中方案 | String | 否 | - | 方案ID | 用戶選擇時 |
| 計費週期 | String | 是 | "月付" | 月付/年付 | 價格切換 |
| 自動續訂設定 | Boolean | 是 | true | true/false | 訂閱選項 |
| 付款方式 | String | 否 | - | 支付類型 | 確認訂閱時 |
| 優惠代碼 | String | 否 | - | 0-20字符 | 優惠折扣 |
| 試用剩餘天數 | Number | 否 | - | 0-7天 | 試用期間顯示 |

### Page_Account_Security_W - 帳戶安全設定頁面

#### 功能說明 (整合安全機制)
- **頁面目的**: 管理帳戶安全設定和隱私控制
- **安全功能**: 密碼變更、雙因素認證、登入記錄
- **隱私控制**: 資料匯出、帳戶刪除、隱私設定

#### 安全設定選項
- **密碼管理**: 密碼變更、強度檢查、歷史防重複
- **雙因素認證**: TOTP應用程式、SMS驗證
- **登入記錄**: 登入歷史、異常活動監控
- **設備管理**: 已登入設備列表、遠程登出
- **隱私控制**: 資料下載、帳戶刪除申請

#### 頁面欄位細節

| 欄位名稱 | 資料類型 | 必填 | 預設值 | 驗證規則 | 顯示條件 |
|---------|---------|------|--------|----------|----------|
| 當前密碼 | String | 否 | - | 當前密碼 | 密碼變更時 |
| 新密碼 | String | 否 | - | 密碼規則 | 密碼變更時 |
| 雙因素認證狀態 | Boolean | 是 | false | true/false | 安全設定 |
| 登入通知 | Boolean | 是 | true | true/false | 通知設定 |
| 異常活動警報 | Boolean | 是 | true | true/false | 安全警報 |
| 已登入設備列表 | Array | 是 | [] | 設備陣列 | 設備管理 |
| 最後密碼變更 | Date | 是 | - | 日期時間 | 安全指標 |
| 資料匯出請求 | Object | 否 | null | 請求物件 | 隱私管理 |

## 🌐 Web端技術特點 (整合安全規範)

### 響應式設計
- **桌面優先**: 1200px以上寬度的完整認證流程
- **表單優化**: 大螢幕友善的表單設計
- **多步驟引導**: 清晰的註冊和設定流程
- **無障礙設計**: 完整的鍵盤導航和螢幕閱讀器支援

### 安全技術整合
基於共用業務規則的安全實現：
- **JWT Token**: 安全的會話管理機制
- **OAuth 2.0**: 第三方登入整合
- **bcrypt加密**: 密碼安全儲存
- **HTTPS強制**: 所有認證流程加密傳輸
- **CSRF防護**: 跨站請求偽造防護
- **XSS防護**: 跨站腳本攻擊防護

### Web專用功能
- **瀏覽器整合**: 密碼管理器、自動填入
- **桌面通知**: Web Notifications API整合
- **離線檢測**: Network API狀態監控
- **會話儲存**: SessionStorage安全管理
- **Cookie管理**: 安全的Cookie設定

## ⌨️ Web版快捷鍵一覽

### 認證操作快捷鍵
- `Tab` - 在表單欄位間切換
- `Enter` - 確認登入/註冊
- `Esc` - 取消當前操作
- `Ctrl+H` - 顯示/隱藏密碼
- `Ctrl+G` - Google登入
- `Ctrl+A` - Apple ID登入

### 安全設定快捷鍵
- `Ctrl+P` - 開啟密碼變更
- `Ctrl+S` - 儲存設定變更
- `Ctrl+D` - 下載個人資料
- `F5` - 重新整理登入記錄
- `Delete` - 刪除選中的設備會話

### 頁面導航快捷鍵
- `Alt+L` - 跳轉登入頁面
- `Alt+R` - 跳轉註冊頁面  
- `Alt+F` - 忘記密碼
- `Alt+S` - 安全設定
- `Alt+P` - 用戶資料設定

## 📊 Web版業務邏輯差異

### 認證管理增強
基於共用業務規則的Web端實現：
- **多設備同步**: 跨設備的登入狀態同步
- **會話延長**: 付費用戶的會話有效期延長
- **企業整合**: SSO單點登入支援
- **進階安全**: 雙因素認證選項

### 訂閱管理優化
- **自動續訂**: 智能的續訂提醒和管理
- **升級降級**: 彈性的方案變更機制
- **發票管理**: 企業用戶的發票開立
- **退款處理**: 簡化的退款申請流程

### 用戶等級整合
基於 [共同業務規則 - 用戶角色分級](../common/business-rules.md#👥-用戶角色分級系統)：
- **等級特權**: 不同等級的功能權限差異
- **升級機制**: 基於購買行為的自動升級
- **VIP服務**: 高價值用戶的專屬服務
- **權限控制**: 細粒度的功能權限管理

## 🧪 Web版測試要點

### 認證流程測試
- [ ] Email註冊和登入流程完整
- [ ] 第三方OAuth登入正常
- [ ] 密碼重設流程無誤
- [ ] 會話管理機制有效

### 安全機制測試
- [ ] 失敗次數限制機制
- [ ] 異地登入檢測準確
- [ ] 雙因素認證功能正常
- [ ] 密碼安全規則執行

### 訂閱系統測試
- [ ] 免費體驗啟動正常
- [ ] 訂閱方案切換無誤
- [ ] 自動續訂機制有效
- [ ] 取消訂閱流程完整

### 響應式測試
- [ ] 1920x1080 認證表單最佳化
- [ ] 1366x768 訂閱頁面適配
- [ ] 快捷鍵功能完整
- [ ] 無障礙設計符合標準

## 📝 Web端開發注意事項

### 前端開發
- 整合OAuth 2.0第三方登入SDK
- 實現安全的JWT Token管理
- 設計友善的多步驟表單流程
- 確保認證頁面的載入速度和安全性

### 業務邏輯整合
- 嚴格遵循 [共同業務規則](../common/business-rules.md) 的認證和訂閱系統
- 整合用戶等級系統和權限控制
- 實現與學習系統的無縫整合
- 確保跨平台的用戶資料同步

### 安全性要求
- 實現完整的OWASP安全標準
- 用戶敏感資料的加密保護
- 實時安全威脅檢測和防護
- 認證記錄的安全存儲和稽核

### 用戶體驗設計
- 簡潔直觀的認證流程設計
- 清楚的錯誤提示和解決方案
- 個人化的訂閱推薦和優惠
- 完善的幫助文檔和客服支援

---

**文檔狀態**: 🟢 已完成 (基於共用規範更新)  
**最後更新**: 2025-09-11  
**版本**: v2.0 - 整合完整用戶認證與訂閱系統  
**相關文檔**: 
- `../common/business-rules.md` - 共同業務規則  
- `../common/user-flow-diagrams.md` - 用戶流程圖
- `../mobile/user-authentication-mobile.md` - 對應的Mobile版規格