forked from 77media/video-flow
149 lines
4.3 KiB
Markdown
149 lines
4.3 KiB
Markdown
# Google OAuth 回调页面重构总结
|
||
|
||
## 📋 重构概述
|
||
|
||
根据 `docs/jiekou.md` 接口文档的要求，对 `app/users/oauth/callback/page.tsx` 进行了重构，简化了 Google OAuth 回调处理流程。
|
||
|
||
## 🔄 主要改进
|
||
|
||
### 1. 简化架构
|
||
**之前**：复杂的两步验证流程
|
||
```typescript
|
||
// 第一步：调用 Java 验证接口
|
||
const javaResponse = await fetch(`${javaBaseUrl}/api/auth/google/callback`, {...});
|
||
|
||
// 第二步：调用 Python 注册接口
|
||
const pythonResponse = await fetch(`${pythonBaseUrl}/api/user_fission/register_with_invite`, {...});
|
||
```
|
||
|
||
**现在**：统一的单步流程
|
||
```typescript
|
||
// 直接调用 Python OAuth 接口
|
||
const response = await fetch(`${baseUrl}/api/oauth/google`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
|
||
body: JSON.stringify({ code, state, invite_code })
|
||
});
|
||
```
|
||
|
||
### 2. 标准化环境变量
|
||
**之前**：混合使用多个环境变量
|
||
```typescript
|
||
const javaBaseUrl = 'https://auth.test.movieflow.ai'; // 硬编码
|
||
const smartvideoBaseUrl = process.env.NEXT_PUBLIC_BASE_URL;
|
||
```
|
||
|
||
**现在**：按文档要求使用标准环境变量
|
||
```typescript
|
||
const baseUrl = process.env.NEXT_PUBLIC_SMARTVIDEO_URL ||
|
||
process.env.NEXT_PUBLIC_BASE_URL ||
|
||
'https://77.smartvideo.py.qikongjian.com';
|
||
```
|
||
|
||
### 3. 统一响应格式
|
||
**之前**：处理不同服务的不同响应格式
|
||
```typescript
|
||
// Java 响应格式
|
||
{ success: boolean, data: { email, name, ... } }
|
||
|
||
// Python 响应格式
|
||
{ successful: boolean, data: { user_id, name, ... } }
|
||
```
|
||
|
||
**现在**：按文档标准化响应格式
|
||
```typescript
|
||
interface GoogleOAuthResponse {
|
||
success: boolean;
|
||
data: {
|
||
token: string;
|
||
user: {
|
||
userId: string;
|
||
userName: string;
|
||
name: string;
|
||
email: string;
|
||
authType: "GOOGLE";
|
||
avatar: string;
|
||
isNewUser: boolean;
|
||
};
|
||
message: string;
|
||
};
|
||
}
|
||
```
|
||
|
||
### 4. 改进错误处理
|
||
**之前**：通用错误处理
|
||
```typescript
|
||
throw new Error(result.message || 'OAuth failed');
|
||
```
|
||
|
||
**现在**：按文档分类处理错误
|
||
```typescript
|
||
if (result.message?.includes('GOOGLE_TOKEN_EXCHANGE_FAILED')) {
|
||
throw new Error('Google authorization failed. Please try again.');
|
||
} else if (result.message?.includes('INVALID_ID_TOKEN')) {
|
||
throw new Error('Invalid Google token. Please try again.');
|
||
} else if (result.message?.includes('UPSTREAM_AUTH_ERROR')) {
|
||
throw new Error('Authentication service error. Please try again later.');
|
||
}
|
||
```
|
||
|
||
## 📊 重构对比
|
||
|
||
| 方面 | 重构前 | 重构后 |
|
||
|------|--------|--------|
|
||
| **API 调用** | 2 次（Java + Python） | 1 次（Python） |
|
||
| **代码行数** | ~80 行核心逻辑 | ~40 行核心逻辑 |
|
||
| **硬编码配置** | 多处硬编码 | 使用环境变量 |
|
||
| **错误处理** | 通用处理 | 分类处理 |
|
||
| **类型安全** | 部分类型 | 完整类型定义 |
|
||
| **维护性** | 复杂，难维护 | 简单，易维护 |
|
||
|
||
## ✅ 重构优势
|
||
|
||
1. **简化流程**：从两步验证简化为单步调用
|
||
2. **减少依赖**：不再依赖 Java 认证服务
|
||
3. **提高可靠性**：减少网络调用，降低失败概率
|
||
4. **标准化**：完全按照接口文档实现
|
||
5. **类型安全**：添加完整的 TypeScript 类型定义
|
||
6. **错误处理**：更细致的错误分类和用户提示
|
||
|
||
## 🔧 技术细节
|
||
|
||
### 请求格式
|
||
```typescript
|
||
{
|
||
code: string, // Google 授权码
|
||
state: string, // 状态参数
|
||
invite_code: string | null // 邀请码
|
||
}
|
||
```
|
||
|
||
### 响应处理
|
||
```typescript
|
||
const { token, user } = result.data;
|
||
|
||
// 保存到 localStorage
|
||
localStorage.setItem('currentUser', JSON.stringify({
|
||
userId: user.userId,
|
||
userName: user.userName,
|
||
name: user.name,
|
||
email: user.email,
|
||
authType: user.authType,
|
||
avatar: user.avatar,
|
||
isNewUser: user.isNewUser
|
||
}));
|
||
|
||
localStorage.setItem('token', token);
|
||
```
|
||
|
||
## 🎯 后续建议
|
||
|
||
1. **环境变量配置**：确保生产环境正确配置 `NEXT_PUBLIC_SMARTVIDEO_URL`
|
||
2. **错误监控**：添加错误上报，监控 OAuth 失败率
|
||
3. **用户体验**：考虑添加重试机制
|
||
4. **安全性**：验证 state 参数的 CSRF 防护
|
||
|
||
## 📝 总结
|
||
|
||
这次重构大大简化了 Google OAuth 回调处理逻辑，提高了代码的可维护性和可靠性。新的实现完全符合接口文档要求，为后续的功能扩展和维护奠定了良好基础。
|