# Pdnode Account **如果你还没了解过oauth，[请点这](Oauth.md)** 这是一个支持普通登录注册和OAuth 2.0授权码流程的认证系统，适合自建账号体系和第三方授权。 ## 功能特性 ### 🔐 用户认证 - 用户注册和登录 - JWT令牌认证 - 密码加密存储 ### 🚀 OAuth 2.0 功能 - **Authorization Code Flow** - 完整的授权码流程 - **Access Token** - 访问令牌生成和验证 - **Refresh Token** - 刷新令牌支持 - **Token Revocation** - 令牌撤销功能 - **PKCE Support** - 支持PKCE（Proof Key for Code Exchange） - **Scope Management** - 权限范围管理 ### 🛡️ 安全特性 - 客户端密钥管理 - 令牌过期机制 - 自动清理过期令牌 - 重定向URI验证 - 客户端所有权验证 ### 📊 OAuth客户端管理 - 创建OAuth客户端 - 获取客户端列表 - 获取客户端详情 - 获取客户端密钥 - 重置客户端密钥 - 删除客户端 ## API端点 ### 用户认证 ``` POST /api/auth/register - 用户注册 POST /api/auth/login - 用户登录 GET /api/auth/profile - 获取用户信息 ``` ### OAuth端点 ``` GET /api/oauth/authorize - 授权端点 POST /api/oauth/token - 令牌端点 POST /api/oauth/revoke - 撤销端点 GET /api/oauth/userinfo - 用户信息端点 GET /api/oauth/tokeninfo - 令牌信息端点 ``` ### OAuth客户端管理 ``` POST /api/oauth/clients - 创建客户端 GET /api/oauth/clients - 获取客户端列表 GET /api/oauth/clients/:clientId - 获取客户端详情 GET /api/oauth/clients/:clientId/secret - 获取客户端密钥 POST /api/oauth/clients/:clientId/reset-secret - 重置客户端密钥 DELETE /api/oauth/clients/:clientId - 删除客户端 ``` ### 发现端点 ``` GET /.well-known/oauth-authorization-server - OAuth发现端点 ``` ## 安装和运行 ### 1. 安装依赖 ```bash npm install ``` ### 2. 配置环境变量 创建 `.env` 文件： ```env DB_HOST=localhost DB_PORT=5432 DB_NAME=your_database DB_USER=your_username DB_PASSWORD=your_password JWT_SECRET=your_jwt_secret_key PORT=3000 ``` ### 3. 启动服务 ```bash # 开发模式 npm run dev # 生产模式 npm start ``` ## 前端界面 本项目包含两个前端版本： ### 🚀 React + Material-UI 版本（推荐） 现代化的React应用，使用Material-UI组件库。 #### 安装和运行 ```bash # 安装前端依赖 npm install # 启动前端开发服务器 npm run dev:frontend # 构建生产版本 npm run build:frontend ``` #### 功能特性 - ✅ **响应式设计** - 适配各种屏幕尺寸 - ✅ **现代化UI** - Material-UI设计语言 - ✅ **路由管理** - React Router - ✅ **状态管理** - Context API - ✅ **表单验证** - 实时验证和错误提示 - ✅ **加载状态** - 优雅的加载动画 - ✅ **错误处理** - 友好的错误提示 #### 页面说明 1. **登录页面** (`/login`) - 用户名/密码登录 - 密码可见性切换 - 表单验证 - 自动跳转到注册 2. **注册页面** (`/register`) - 用户注册表单 - 密码确认验证 - 邮箱格式验证 - 自动跳转到登录 3. **个人中心** (`/dashboard`) - 用户信息展示 - OAuth客户端管理 - 创建/删除客户端 - 退出登录 4. **OAuth授权页面** (`/oauth/authorize`) - 第三方应用授权 - 权限范围展示 - 用户信息确认 - 授权/拒绝操作 ### 📄 HTML + Bootstrap 版本 简单的HTML版本，使用Bootstrap样式。 #### 使用方法 ```bash # 直接打开HTML文件 open public/index.html ``` #### 功能特性 - ✅ **轻量级** - 无需构建工具 - ✅ **Bootstrap样式** - 美观的界面 - ✅ **原生JavaScript** - 简单易懂 - ✅ **登录/注册切换** - 单页面应用 - ✅ **表单验证** - 客户端验证 ## 使用示例 ### 1. 启动后端服务 ```bash # 启动后端API服务 npm start ``` ### 2. 启动前端服务 ```bash # 启动React前端 npm run dev:frontend ``` ### 3. 访问应用 - **React版本**: http://localhost:3001 - **HTML版本**: 直接打开 `public/index.html` ### 4. 测试OAuth流程 #### 方法一：使用前端界面 1. 注册/登录用户 2. 在个人中心创建OAuth客户端 3. 访问授权页面：`http://localhost:3001/oauth/authorize?client_id=YOUR_CLIENT_ID&redirect_uri=http://localhost:3001/callback&scope=read%20write&state=test123` 4. 在授权页面查看应用信息和请求的权限 5. 选择"同意授权"或"拒绝授权" 6. 系统会重定向到第三方应用并附带授权码或错误信息 #### 方法二：使用第三方应用示例 1. 启动后端和前端服务 2. 在个人中心创建OAuth客户端 3. 打开第三方应用示例：`http://localhost:3001/third-party-app.html` 4. 填入客户端ID和密钥 5. 点击"开始OAuth授权"按钮 6. 完成授权流程并查看API响应 #### 方法三：使用测试脚本 ```bash # 运行完整的OAuth流程测试 npm run test:oauth-flow ``` ### 5. OAuth 2.0 授权流程详解 #### 完整的授权码流程 (Authorization Code Flow) **步骤 1: 获取授权信息** ``` GET /api/oauth/authorize?response_type=code&client_id=YOUR_CLIENT_ID&redirect_uri=http://localhost:3001/callback&scope=read%20write&state=test123 ``` **响应示例：** ```json { "success": true, "message": "授权信息获取成功", "data": { "client": { "id": "YOUR_CLIENT_ID", "name": "应用名称", "description": "应用描述" }, "scopes": ["read", "write"], "state": "test123", "redirect_uri": "http://localhost:3001/callback" } } ``` **步骤 2: 用户同意/拒绝授权** 用户在前端授权页面选择同意或拒绝授权： **同意授权：** ``` POST /api/oauth/authorize/consent Content-Type: application/json Authorization: Bearer USER_JWT_TOKEN { "client_id": "YOUR_CLIENT_ID", "redirect_uri": "http://localhost:3001/callback", "scope": "read write", "state": "test123", "approved": true } ``` **拒绝授权：** ``` POST /api/oauth/authorize/consent Content-Type: application/json Authorization: Bearer USER_JWT_TOKEN { "client_id": "YOUR_CLIENT_ID", "redirect_uri": "http://localhost:3001/callback", "scope": "read write", "state": "test123", "approved": false } ``` **步骤 3: 获取授权码或错误** - **同意授权**：重定向到 `redirect_uri` 并附带授权码 ``` http://localhost:3001/callback?code=AUTH_CODE&state=test123 ``` - **拒绝授权**：重定向到 `redirect_uri` 并附带错误信息 ``` http://localhost:3001/callback?error=access_denied&error_description=用户拒绝授权&state=test123 ``` **步骤 4: 使用授权码交换访问令牌** ``` POST /api/oauth/token Content-Type: application/x-www-form-urlencoded grant_type=authorization_code&client_id=YOUR_CLIENT_ID&client_secret=YOUR_CLIENT_SECRET&code=AUTH_CODE&redirect_uri=http://localhost:3001/callback ``` ## 前端技术栈 ### React版本 - **React 18** - 用户界面库 - **Material-UI 5** - 组件库 - **React Router 6** - 路由管理 - **Axios** - HTTP客户端 - **Vite** - 构建工具 ### HTML版本 - **Bootstrap 5** - CSS框架 - **Font Awesome** - 图标库 - **原生JavaScript** - 交互逻辑 ## 开发说明 ### 目录结构 ``` ├── src/ # React源代码 │ ├── components/ # 组件 │ ├── contexts/ # 上下文 │ ├── pages/ # 页面 │ ├── App.jsx # 主应用 │ └── main.jsx # 入口文件 ├── public/ # 静态资源 │ └── index.html # HTML版本 ├── index.html # React入口 ├── vite.config.js # Vite配置 └── package.json # 项目配置 ``` ### 开发命令 ```bash # 开发模式 npm run dev:frontend # 构建生产版本 npm run build:frontend # 预览生产版本 npm run preview:frontend ``` ### 环境配置 前端会自动代理API请求到后端： ```javascript // vite.config.js server: { port: 3001, proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true } } } ``` ## 安全特性 ### 前端安全 - ✅ **JWT令牌管理** - 自动存储和刷新 - ✅ **路由保护** - 私有路由验证 - ✅ **表单验证** - 客户端和服务器端验证 - ✅ **错误处理** - 友好的错误提示 - ✅ **CORS配置** - 跨域请求处理 ### 用户体验 - ✅ **响应式设计** - 移动端适配 - ✅ **加载状态** - 优雅的加载动画 - ✅ **错误提示** - 清晰的错误信息 - ✅ **表单验证** - 实时验证反馈 - ✅ **自动跳转** - 智能路由管理 ## 数据库结构 ### 用户表 (users) ```sql CREATE TABLE users ( id SERIAL PRIMARY KEY, username VARCHAR(50) UNIQUE NOT NULL, email VARCHAR(100) UNIQUE NOT NULL, password_hash VARCHAR(255) NOT NULL, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); ``` ### OAuth客户端表 (oauth_clients) ```sql CREATE TABLE oauth_clients ( id SERIAL PRIMARY KEY, client_id VARCHAR(100) UNIQUE NOT NULL, client_secret VARCHAR(255) NOT NULL, name VARCHAR(100) NOT NULL, description TEXT, redirect_uris TEXT[] NOT NULL, scopes TEXT[] DEFAULT ARRAY['read', 'write'], user_id INTEGER NOT NULL, is_active BOOLEAN DEFAULT TRUE, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); ``` ### OAuth授权码表 (oauth_auth_codes) ```sql CREATE TABLE oauth_auth_codes ( id SERIAL PRIMARY KEY, code VARCHAR(255) UNIQUE NOT NULL, client_id VARCHAR(100) NOT NULL, user_id INTEGER NOT NULL, redirect_uri VARCHAR(255) NOT NULL, scopes TEXT[] NOT NULL, expires_at TIMESTAMP NOT NULL, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); ``` ### OAuth访问令牌表 (oauth_access_tokens) ```sql CREATE TABLE oauth_access_tokens ( id SERIAL PRIMARY KEY, token VARCHAR(255) UNIQUE NOT NULL, client_id VARCHAR(100) NOT NULL, user_id INTEGER NOT NULL, scopes TEXT[] NOT NULL, expires_at TIMESTAMP NOT NULL, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); ``` ### OAuth刷新令牌表 (oauth_refresh_tokens) ```sql CREATE TABLE oauth_refresh_tokens ( id SERIAL PRIMARY KEY, token VARCHAR(255) UNIQUE NOT NULL, access_token_id INTEGER REFERENCES oauth_access_tokens(id) ON DELETE CASCADE, client_id VARCHAR(100) NOT NULL, user_id INTEGER NOT NULL, is_revoked BOOLEAN DEFAULT FALSE, expires_at TIMESTAMP NOT NULL, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); ``` ## 安全特性 ### 🔒 令牌安全 - 访问令牌有效期：1小时 - 刷新令牌有效期：30天 - 授权码有效期：10分钟 - 自动清理过期令牌 ### 🛡️ 客户端安全 - 客户端密钥加密存储 - 重定向URI验证 - 客户端所有权验证 - 支持客户端密钥重置 ### 🔐 认证安全 - JWT令牌认证 - 密码bcrypt加密 - 输入验证和清理 - CORS配置 ## 测试 ### 运行OAuth测试 ```bash npm run test:oauth ``` ### 运行基础API测试 ```bash npm run test ``` ## 生产环境建议 ### 1. 安全配置 - 使用强密码策略 - 启用HTTPS - 配置CORS策略 - 设置适当的令牌过期时间 ### 2. 性能优化 - 使用Redis缓存令牌 - 数据库连接池优化 - 定期清理过期数据 ### 3. 监控和日志 - 添加请求日志 - 监控令牌使用情况 - 错误追踪和告警 ### 4. 扩展功能 - 支持多种授权类型 - 添加OAuth客户端应用管理界面 - 实现OAuth 2.1标准 - 支持OpenID Connect ## 许可证 MIT License