2.8 KiB
2.8 KiB
Crushlevel Next.js Application
这是一个基于 Next.js 的现代化Web应用,支持多种社交登录方式。
功能特性
- 🎮 多平台社交登录: 支持Discord、Google登录
- 🔐 完整认证流程: OAuth2.0认证,JWT token管理
- 📱 设备管理: 自动设备ID生成和管理
- 🛡️ 中间件保护: 路由级别的认证保护
快速开始
1. 安装依赖
pnpm 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
- 复制 Application ID 作为
# 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
其他OAuth配置(可选)
# Google OAuth(未来支持)
NEXT_PUBLIC_GOOGLE_CLIENT_ID=your_google_client_id_here
### 3. 启动开发服务器
```bash
pnpm 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并重定向到首页
- 完成整个登录流程
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"
许可证
本项目采用 MIT 许可证。详见 LICENSE 文件。