crush-level-web/README.md

# Crushlevel Next.js Application

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

## 功能特性

- 🎮 **多平台社交登录**: 支持Discord、Google登录
- 🔐 **完整认证流程**: OAuth2.0认证，JWT token管理
- 📱 **设备管理**: 自动设备ID生成和管理
- 🛡️ **中间件保护**: 路由级别的认证保护

## 快速开始

### 1. 安装依赖

```bash
pnpm install
```

### 2. 环境变量配置

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

```bash
cp .env.local.example .env.local
```

#### Discord OAuth 配置

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

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

```env
# 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配置（可选）

````env
# 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](LICENSE) 文件。