oauthx: 一款基于 OAuth2 协议的认证服务

本项目（oauthx）是一个基于 OAuth2 的认证服务，前端核心交互逻辑，覆盖了从用户注册、登录、找回密码，到用户自我管理、开发者应用管理，再到平台最高权限管理的完整闭环，并补充了 OAuth2 流程中最关键的授权同意页面，确保了整个服务的功能完整性和逻辑自洽性。

应用核心逻辑

本项目旨在创建一个基于 OAuth2 的认证服务。以下是核心功能和在开发过程中应该考虑的事项：

我将把所有页面分为四个主要部分：

1. 公共访问页面 (Public Pages)：用户在登录前可以访问的页面。
2. 用户中心 (User Account Center)：用户登录后进行个人信息和安全管理的页面。
3. 开发者中心 (Developer Center)：用户为自己的应用申请和管理 OAuth2 Client 的页面。
4. 平台管理后台 (Admin Panel)：平台管理员用于管理整个服务的页面。

下面详细说明页面设计清单与流程。

---

1. 公共访问页面 (Public Pages)

这些页面是整个服务系统的入口。

1.1. 用户注册页面 (/register)

• 功能描述: 新用户创建账户的入口。
• 核心元素:
  • 使用 Tab 切换邮箱注册和手机号注册。
  • 邮箱注册:
    • 输入框：邮箱地址 (Email)
    • 输入框：密码 (Password)，带强度提示和可见性切换。
    • 输入框：确认密码 (Confirm Password)
    • 输入框：邮箱验证码 (Verification Code)，旁边有发送验证码按钮（带 60 秒倒计时）。
  • 手机号注册:
    • 下拉框+输入框：国家/地区区号 (Country Code) + 手机号 (Phone Number)。
    • 输入框：密码 (Password)，同上。
    • 输入框：确认密码 (Confirm Password)
    • 输入框：短信验证码 (SMS Code)，旁边有发送验证码按钮（带 60 秒倒 ähän）。
  • 复选框：同意《服务条款》和《隐私政策》（链接到相应静态页面）。
  • 按钮：注册 (Register)。
  • 链接：下方提示已有账户？立即登录 (Already have an account? Login)，跳转到登录页面。
• 页面跳转:
  • 点击发送验证码后，后端发送验证码，前端按钮进入倒计时状态。
  • 注册成功后，自动登录并跳转到 用户中心欢迎页 (4.1)，或提示注册成功，请登录。

1.2. 用户登录页面 (/login)

• 功能描述: 已注册用户登录平台。
• 核心元素:
  • 主登录区:
    • 输入框：邮箱或手机号 (Email or Phone)。
    • 输入框：密码 (Password)。
    • 复选框：记住我 (Remember Me)。
    • 链接：忘记密码？ (Forgot Password?)，跳转到 找回密码页面 (1.3)。
    • 按钮：登录 (Login)。
  • 第三方登录区:
    • 标题：或通过以下方式登录 (Or login with)。
    • 按钮组：醒目的 “Login with GitHub”, “Login with Google” 等图标按钮。
  • 链接：下方提示还没有账户？立即注册 (Don't have an account? Register)，跳转到 注册页面 (1.1)。
• 页面跳转:
  • 密码登录成功: 跳转到 用户中心 (4.1)。如果登录是由于访问受保护资源被中断的，则应跳转回原应用（OAuth2 流程）。
  • 第三方登录:
    • 如果该第三方账号已绑定平台账户，登录成功并跳转到 用户中心 (4.1)。
    • 如果该第三方账号未在平台注册，则跳转到 首次第三方登录绑定页面 (1.4)。

1.3. 找回密码页面 (/forgot-password)

• 功能描述: 帮助用户通过已验证的邮箱或手机号重设密码。
• 核心元素 (分两步):
  • 步骤一：验证身份 (/forgot-password)
    • Tab 切换通过邮箱找回和通过手机号找回。
    • 输入框：邮箱或手机号。
    • 输入框：验证码（图形或滑块验证，防止机器人滥用）。
    • 按钮：发送重置链接/验证码 (Send Reset Link/Code)。
  • 步骤二：重置密码 (/reset-password?token=...)
    • 此页面通过用户收到的邮件链接或短信链接访问。
    • 输入框：新密码 (New Password)。
    • 输入框：确认新密码 (Confirm New Password)。
    • 按钮：确认重置 (Reset Password)。
• 页面跳转:
  • 步骤一提交后，提示用户检查邮箱或短信。
  • 步骤二成功后，提示密码重置成功，并自动跳转到 登录页面 (1.2)。

1.4. 首次第三方登录的绑定/注册页面 (/oauth/bind)

• 功能描述: 当用户首次使用第三方账号登录，且该账号的邮箱未在本平台注册时，引导用户完成账户创建或绑定。
• 核心元素:
  • 提示信息：欢迎，[GitHub/Google 用户名]！为了完成设置，请选择以下操作：
  • 选项一：创建新账户
    • 描述：使用邮箱 [user@example.com] 创建一个新账户。
    • （可选）让用户设置一个初始密码，以便后续也能用密码登录。
    • 按钮：创建并登录 (Create and Login)。
  • 选项二：绑定到已有账户
    • 描述：将此第三方账号关联到您已有的平台账户。
    • 输入框：平台账户的邮箱/手机号。
    • 输入框：平台账户的密码。
    • 按钮：绑定并登录 (Bind and Login)。
• 页面跳转:
  • 操作成功后，完成账户的创建/绑定，登录用户并跳转到 用户中心 (4.1)。

1.5. OAuth2 授权同意页面 (/oauth/authorize)

• 这是 OAuth2 流程的核心页面，至关重要！
• 功能描述: 当第三方应用（Client）请求用户授权时，向用户展示该应用请求的权限，并由用户决定是否同意。
• 核心元素:
  • 明确的标题：**[Client App Name]** 正在请求访问您的 **[Our Service Name]** 账户。
  • Client App 的 Logo 和名称。
  • 权限列表（基于 scope 参数）：此应用将能够：
    • 查看您的公开资料（头像、昵称）。
    • 访问您的注册邮箱地址。
    • … (其他所有请求的权限)
  • 用户信息提示：您当前登录的账户是 **[User's Nickname/Email]**。（不是您？[切换账户]）
  • 按钮：授权 (Allow / Authorize)。
  • 按钮/链接：拒绝 (Deny)。
• 页面跳转:
  • 用户必须先登录。如果未登录，会先跳转到 登录页面 (1.2)，成功后再跳回此授权页。
  • 点击授权，页面根据 OAuth2 流程，携带授权码 (code) 重定向回 Client App 的 redirect_uri。
  • 点击拒绝，页面根据 OAuth2 流程，携带错误信息 (access_denied) 重定向回 Client App 的 redirect_uri。

---

2. 用户中心 (User Account Center)

用户登录后，所有个人管理的页面都集合于此，通常采用侧边栏导航+主内容区的布局。

2.1. 用户中心主页/仪表盘 (/account/dashboard)

• 功能描述: 用户登录后的欢迎页面和信息概览。
• 核心元素:
  • 欢迎语：你好，[用户昵称]！
  • 侧边导航栏，包含以下链接：
    • 个人资料 (Profile)
    • 账户安全 (Security)
    • 账号关联 (Connections)
    • 开发者中心 (Developer Center)
    • 登出 (Logout)
  • 主内容区可能显示一些摘要信息，如上次登录时间、已授权的应用数量等。

2.2. 个人资料页面 (/account/profile)

• 功能描述: 管理用户的基本公开和联系信息。
• 核心元素:
  • 头像: 显示当前头像，提供上传新头像按钮，支持裁剪。
  • 昵称: 输入框，用于修改显示名称。
  • 邮箱: 显示当前邮箱（部分打码，如 u***r@example.com），旁边有修改按钮。点击后需要通过旧邮箱或手机验证身份，并验证新邮箱。
  • 手机号: 显示当前手机号（部分打码，如 +86 138****1234），旁边有修改按钮。流程同上。
  • 其他信息: 如地址 (Address)、个人简介/备注 (Bio/Notes) 等文本域。
  • 按钮：保存更改 (Save Changes)。

2.3. 账户安全页面 (/account/security)

• 功能描述: 管理密码、多因素认证等安全设置。
• 核心元素:
  • 修改密码:
    • 输入框：当前密码 (Current Password)。
    • 输入框：新密码 (New Password)。
    • 输入框：确认新密码 (Confirm New Password)。
    • 按钮：更新密码 (Update Password)。
  • 两步验证 (2FA):
    • 显示当前状态（已启用/未启用）。
    • 提供设置入口，支持 Authenticator App (TOTP) 或短信验证。
  • 登录活动:
    • 列表显示最近的登录记录（时间、地点、设备）。
    • 提供登出所有其他设备 (Log out all other sessions) 的按钮。

2.4. 账号关联页面 (/account/connections)

• 功能描述: 管理绑定的所有第三方 OAuth 账号。
• 核心元素:
  • 列表形式展示所有支持的第三方平台（GitHub, Google 等）。
  • 每一行包含：
    • 平台 Logo 和名称。
    • 状态：
      • 已关联: 显示已关联为 [第三方用户名/邮箱]``，旁边有解除绑定 (Disconnect) 按钮。
      • 未关联: 显示未关联，旁边有关联 (Connect) 按钮。
• 页面跳转/逻辑:
  • 点击关联，会发起对该第三方平台的 OAuth 授权流程。
  • 点击解除绑定，会弹出确认框，警告用户如果这是唯一的登录方式将无法登录。

---

3. 开发者中心 (Developer Center)

这是内嵌在用户中心的一部分，专门用于管理 OAuth Client。

3.1. 我的应用 (Client 列表) 页面 (/developer/clients)

• 功能描述: 展示当前用户创建的所有 OAuth 应用 (Clients)。
• 核心元素:
  • 醒目的按钮：创建新应用 (Create New Application)，跳转到 创建应用页面 (3.2)。
  • 应用列表（表格形式）：
    • 列：应用 Logo、应用名称、Client ID、状态（启用/禁用）、创建时间。
    • 操作列：提供管理 (Manage) 按钮，跳转到 应用详情管理页 (3.3)。
• 页面跳转:
  • 从用户中心侧边栏的开发者中心进入此页。

3.2. 创建/修改应用页面 (/developer/clients/new 或 /developer/clients/{clientId}/edit)

• 功能描述: 创建一个新的 OAuth Client 或修改现有 Client 的配置。
• 核心元素:
  • 输入框：应用名称 (Application Name)。
  • 输入框：应用描述 (Application Description)。
  • 上传控件：应用 Logo (Application Logo)。
  • 文本域：回调地址 (Redirect URIs)。这是 OAuth2 的关键配置，支持添加多个，每行一个。
  • (创建时) 显示 Client ID 和 Client Secret。Client Secret 只在创建时完整显示一次，并提示用户妥善保管。
  • (修改时) Client ID 只读显示，Client Secret 隐藏，提供重置 Secret (Reset Secret) 按钮。
  • 按钮：保存 (Save) 或 创建应用 (Create Application)。
  • 危险操作区：提供删除应用 (Delete Application) 按钮，需要二次确认。

3.3. 单个应用的详细管理页面 (/developer/clients/{clientId}/dashboard)

• 功能描述: 对一个具体的 Client 进行全方位的管理，通常使用 Tab 布局。
• 核心元素:
  • Tab 1: 设置 (Settings): 内容与 修改应用页面 (3.2) 基本一致。
  • Tab 2: 团队权限 (Permissions / Team):
    • 邀请成员表单：通过邮箱邀请其他用户。
    • 角色选择：Admin (完全控制), Developer (可查看配置和统计，不能修改关键信息或删除)。
    • 成员列表：显示已加入成员的头像、用户名、角色和加入时间。
    • 操作：修改角色、移除成员。
  • Tab 3: 已授权用户 (Authorized Users):
    • 列表展示所有授权过此应用的用户。
    • 搜索框：按用户名或邮箱搜索。
    • 列表（表格形式）：用户头像、用户名、授权时间。
    • 操作列：
      • 撤销授权 (Revoke Access): 强制让用户对该应用的授权失效。
      • 加入黑名单 (Add to Blacklist): 阻止该用户未来再次授权此应用。
  • Tab 4: 黑名单 (Blacklist):
    • 列表展示被此应用拉黑的所有用户。
    • 操作列：移出黑名单 (Remove from Blacklist)。

---

4. 平台管理后台 (Admin Panel)

只有特殊权限的管理员才能访问，URL 前缀通常为 /admin。

4.1. 管理后台仪表盘 (/admin/dashboard)

• 功能描述: 为管理员提供平台核心数据的概览。
• 核心元素:
  • 统计卡片：总用户数、总应用数、24 小时活跃用户、24 小时新增授权等。
  • 图表：用户增长趋势图、应用增长趋势图等。
  • 侧边导航栏：链接到用户管理、应用管理等页面。

4.2. 用户管理页面 (/admin/users)

• 功能描述: 平台管理员查看和管理所有用户。
• 核心元素:
  • 搜索/筛选器：按用户名、邮箱、手机号、状态（正常/禁用）进行筛选。
  • 用户列表（表格）：
    • 列：ID、头像、用户名、邮箱、手机号、注册时间、最后登录时间、状态。
    • 操作列：详情 (Details)、禁用/启用 (Disable/Enable)。
• 页面跳转:
  • 点击禁用，用户账户被锁定，无法登录。

4.3. 应用(Client)管理页面 (/admin/clients)

• 功能描述: 平台管理员查看和管理所有 Client。
• 核心元素:
  • 搜索/筛选器：按应用名、Client ID、所有者用户名、状态进行筛选。
  • 应用列表（表格）：
    • 列：ID、Logo、应用名、Client ID、所有者、创建时间、状态。
    • 操作列：详情 (Details)、禁用/启用 (Disable/Enable)。
• 页面跳转:
  • 点击禁用，该 Client 将无法发起任何新的 OAuth 流程。

4.4. 指定应用的用户访问控制页面 (/admin/clients/{clientId}/access-control)

• 功能描述: 实现为指定 client 禁用用户的需求。
• 核心元素:
  • 页面标题：管理应用 **[Client App Name]** 的用户访问。
  • 搜索框：搜索平台内的任一用户。
  • 搜索结果会显示该用户对于此应用的状态（如：已授权、未授权、在应用的黑名单中）。
  • 操作按钮：禁用该用户访问此应用 (Disable user for this app) 或 强制撤销并拉黑 (Revoke and Blacklist)。
• 逻辑:
  • 此操作是平台级的强制行为，比开发者自己设置的黑名单优先级更高。