5.9 KiB

Raw Permalink Blame History

Crushlevel Next.js Application

这是一个基于 Next.js 的现代化Web应用，支持多种社交登录方式。

功能特性

🎮 多平台社交登录: 支持Discord、Google、Apple登录
🔐 完整认证流程: OAuth2.0认证，JWT token管理
📱 设备管理: 自动设备ID生成和管理
🎭 开发环境Mock: 使用MSW进行API模拟
🛡️ 中间件保护: 路由级别的认证保护

快速开始

1. 安装依赖

npm install

2. 环境变量配置

复制 .env.local.example 文件为 .env.local 并配置相应的环境变量：

cp .env.local.example .env.local

Discord OAuth 配置

要启用Discord登录，你需要在Discord开发者平台创建应用：

访问 Discord Developer Portal
点击 "New Application" 创建新应用
在应用设置页面：
- 复制 Application ID 作为 NEXT_PUBLIC_DISCORD_CLIENT_ID
- 在 "OAuth2" 标签页生成 Client Secret 作为 DISCORD_CLIENT_SECRET
- 添加回调URL: http://localhost:3000/api/auth/discord/callback （开发环境）
- 选择 scopes: identify, email

# Discord OAuth 配置
NEXT_PUBLIC_DISCORD_CLIENT_ID=your_discord_client_id_here
DISCORD_CLIENT_SECRET=your_discord_client_secret_here

# 应用URL（生产环境需要修改）
NEXT_PUBLIC_APP_URL=http://localhost:3000

# 开发环境Mock配置
NEXT_PUBLIC_ENABLE_MOCK=true

其他OAuth配置（可选）

# Google OAuth（未来支持）
NEXT_PUBLIC_GOOGLE_CLIENT_ID=your_google_client_id_here
GOOGLE_CLIENT_SECRET=your_google_client_secret_here

# Apple OAuth（未来支持）
NEXT_PUBLIC_APPLE_CLIENT_ID=your_apple_client_id_here
APPLE_CLIENT_SECRET=your_apple_client_secret_here

3. 启动开发服务器

npm run dev

应用将在 http://localhost:3000 启动。

Discord登录流程

1. 用户点击Discord登录按钮

系统生成随机state参数用于安全验证
跳转到Discord授权页面

2. Discord授权

用户在Discord页面授权后，Discord重定向到回调URL并携带授权码

3. 回调处理

API路由 /api/auth/discord/callback 接收授权码
将授权码作为URL参数重定向到前端登录页面

4. 前端登录处理

前端登录页面检测到URL中的discord_code参数
使用授权码调用后端API: POST /web/third/login
后端验证授权码并返回认证token

5. 登录完成

前端保存token并重定向到首页
完成整个登录流程

开发环境Mock

项目使用MSW进行API模拟，在开发环境中：

设置 NEXT_PUBLIC_ENABLE_MOCK=true 启用Mock
所有认证API请求都会被MSW拦截并返回模拟数据
支持Discord、Google、Apple等第三方登录的模拟

Mock功能特性

✅ 设备ID验证
✅ 第三方登录模拟
✅ Token管理
✅ 用户信息管理
✅ 错误场景模拟

项目结构

src/
├── app/                    # Next.js App Router
│   ├── (auth)/            # 认证相关页面
│   ├── (main)/            # 主应用页面
│   └── api/               # API路由
├── components/            # 可复用组件
├── lib/                   # 工具库
│   ├── auth/             # 认证管理
│   ├── http/             # HTTP客户端
│   └── oauth/            # OAuth服务
├── services/             # 业务服务
├── mocks/               # MSW Mock配置
└── types/               # TypeScript类型定义

API文档

认证相关API

第三方登录

POST /web/third/login
Content-Type: application/json

{
  "appClient": "WEB",
  "deviceCode": "设备唯一码",
  "thirdToken": "第三方授权码",
  "thirdType": "DISCORD" | "GOOGLE" | "APPLE"
}

获取用户信息

GET /web/user/base-info
Headers:
  AUTH_TK: "认证token"
  AUTH_DID: "设备ID"

登出

POST /web/user/logout
Headers:
  AUTH_TK: "认证token"
  AUTH_DID: "设备ID"

贡献指南

Fork本项目
创建功能分支 (git checkout -b feature/AmazingFeature)
提交更改 (git commit -m 'Add some AmazingFeature')
推送分支 (git push origin feature/AmazingFeature)
创建Pull Request

许可证

本项目采用 MIT 许可证。详见 LICENSE 文件。

文案清单导出（一次性盘点）

为便于产品/运营统一校对当前所有展示文案，项目提供静态扫描脚本，自动抽取源码中的用户可见与可感知文案并导出为 Excel。

覆盖范围

JSX 文本节点与按钮/链接文案
属性文案：placeholder / title / alt / aria-* / label
交互文案：toast.* / message.* / alert / confirm / Dialog/Tooltip 等常见调用
表单校验与错误提示：form.setError(..., { message })、校验链条中的 { message: '...' }

运行

# 生成 docs/copy-audit.xlsx
npx ts-node scripts/extract-copy.ts   # 若 ESM 运行报错，请改用下行
node scripts/extract-copy.cjs

输出文件：docs/copy-audit.xlsx

Excel 字段说明（Sheet: copy）

route: Next.js App Router 路由（如 (main)/home）或 shared
file: 文案所在文件（相对仓库根路径）
componentOrFn: 组件或函数名（无法解析时为文件名）
kind: 文案类型（text | placeholder | title | alt | aria | label | toast | dialog | error | validation）
keyOrLocator: 定位信息（如 Button.placeholder、toast.success）
text: 实际文案内容
line: 文案起始行号（近似定位）
count: 在同一路由下相同文案出现次数（已聚合）
notes: 预留备注

说明与边界

仅提取可静态分析到的硬编码字符串；运行时拼接（仅变量）无法还原将被忽略
会过滤明显的“代码样”字符串（如过长的标识符）
扫描目录为 src/，忽略 node_modules/.next/__tests__/mocks 等

5.9 KiB Raw Permalink Blame History Unescape Escape