217 lines
5.3 KiB
Markdown
217 lines
5.3 KiB
Markdown
# ✅ 按照官方文档实现 Spotify 授权
|
||
|
||
## 📖 对照官方文档
|
||
|
||
您提到的官方示例：
|
||
```javascript
|
||
var redirect_uri = 'http://127.0.0.1:8888/callback';
|
||
|
||
app.get('/login', function(req, res) {
|
||
var state = generateRandomString(16);
|
||
var scope = 'user-read-private user-read-email';
|
||
|
||
res.redirect('https://accounts.spotify.com/authorize?' +
|
||
querystring.stringify({
|
||
response_type: 'code',
|
||
client_id: client_id,
|
||
scope: scope,
|
||
redirect_uri: redirect_uri,
|
||
state: state
|
||
}));
|
||
});
|
||
```
|
||
|
||
## ✅ 我们的实现（完全对应）
|
||
|
||
### 1. Redirect URI 配置
|
||
|
||
**官方示例：**
|
||
```javascript
|
||
var redirect_uri = 'http://127.0.0.1:8888/callback';
|
||
```
|
||
|
||
**我们的实现：**
|
||
```typescript
|
||
const REDIRECT_URI = window.location.origin + '/callback'
|
||
// 开发环境：http://localhost:5173/callback
|
||
// 生产环境：https://sports.rucky.cn/callback
|
||
```
|
||
|
||
✅ **完全一致**：使用具体的 `/callback` 路径
|
||
|
||
### 2. 授权参数
|
||
|
||
**官方示例：**
|
||
```javascript
|
||
{
|
||
response_type: 'code', // ✅
|
||
client_id: client_id, // ✅
|
||
scope: scope, // ✅
|
||
redirect_uri: redirect_uri, // ✅
|
||
state: state // ⚠️ 我们使用 PKCE，不需要 state
|
||
}
|
||
```
|
||
|
||
**我们的实现（在 spotifyService.ts）：**
|
||
```typescript
|
||
{
|
||
response_type: 'code', // ✅
|
||
client_id: this.config.clientId, // ✅
|
||
scope: scopes.join(' '), // ✅
|
||
redirect_uri: this.config.redirectUri, // ✅
|
||
code_challenge_method: 'S256', // ✅ PKCE（更安全）
|
||
code_challenge: codeChallenge // ✅ PKCE（更安全）
|
||
}
|
||
```
|
||
|
||
✅ **增强版**：使用 PKCE 代替 state，更安全
|
||
|
||
### 3. 回调处理
|
||
|
||
**官方示例：**
|
||
```javascript
|
||
app.get('/callback', function(req, res) {
|
||
var code = req.query.code || null;
|
||
// 使用 code 交换 access_token
|
||
});
|
||
```
|
||
|
||
**我们的实现（SpotifyCallback.vue）：**
|
||
```typescript
|
||
const params = new URLSearchParams(window.location.search)
|
||
const code = params.get('code')
|
||
// 使用 code 交换 access_token
|
||
await spotifyService.handleCallback()
|
||
```
|
||
|
||
✅ **完全一致**：创建专门的 `/callback` 路由处理授权码
|
||
|
||
## 📁 新增文件
|
||
|
||
### src/views/SpotifyCallback.vue
|
||
|
||
专门处理 Spotify 授权回调的页面：
|
||
|
||
**功能：**
|
||
1. ✅ 显示"正在处理授权..."加载状态
|
||
2. ✅ 处理授权码，交换 access token
|
||
3. ✅ 显示成功/失败消息
|
||
4. ✅ 自动跳转回原页面
|
||
5. ✅ 错误处理
|
||
|
||
**对应官方的：**
|
||
```javascript
|
||
app.get('/callback', function(req, res) {
|
||
// 处理回调
|
||
});
|
||
```
|
||
|
||
## 🔄 完整授权流程
|
||
|
||
### 官方示例流程
|
||
|
||
```
|
||
1. 用户访问 /login
|
||
2. 重定向到 Spotify 授权页面
|
||
3. 用户授权
|
||
4. Spotify 重定向到 /callback?code=xxx
|
||
5. 服务器用 code 交换 token
|
||
```
|
||
|
||
### 我们的流程（前端实现）
|
||
|
||
```
|
||
1. 用户点击"连接 Spotify 账号"
|
||
2. 保存返回路径到 localStorage
|
||
3. 重定向到 Spotify 授权页面
|
||
(redirect_uri=/callback)
|
||
4. 用户授权
|
||
5. Spotify 重定向到 /callback?code=xxx
|
||
6. SpotifyCallback.vue 组件加载
|
||
7. 用 code 交换 token（PKCE 方式）
|
||
8. 自动跳转回音乐律动页面
|
||
9. 完成授权！
|
||
```
|
||
|
||
## 📝 Spotify Dashboard 配置
|
||
|
||
在 [你的应用设置](https://developer.spotify.com/dashboard/4ed200672ba1421baa31b9859bd84d39/settings) 中添加：
|
||
|
||
**开发环境：**
|
||
```
|
||
http://localhost:5173/callback
|
||
```
|
||
|
||
**生产环境：**
|
||
```
|
||
https://sports.rucky.cn/callback
|
||
```
|
||
|
||
⚠️ **重要：**
|
||
- ✅ 使用 `/callback` 作为回调路径
|
||
- ✅ 必须完全匹配，包括协议和路径
|
||
- ✅ 不要忘记点击 "Save"
|
||
|
||
## 🆚 与官方示例的区别
|
||
|
||
### 相同点 ✅
|
||
|
||
1. ✅ 使用 `response_type=code`（Authorization Code Flow）
|
||
2. ✅ 使用具体的 `/callback` 路径
|
||
3. ✅ 使用授权码交换 token
|
||
4. ✅ 完整的错误处理
|
||
|
||
### 增强点 🚀
|
||
|
||
1. **PKCE（更安全）**
|
||
- 官方示例：使用 `state` 参数
|
||
- 我们：使用 PKCE（`code_challenge` + `code_verifier`）
|
||
- 优势：不需要 Client Secret，更适合前端应用
|
||
|
||
2. **前端实现**
|
||
- 官方示例：Node.js 后端
|
||
- 我们：纯前端 Vue 3 应用
|
||
- 优势：无需后端服务器
|
||
|
||
3. **用户体验**
|
||
- 加载动画
|
||
- 成功/失败提示
|
||
- 自动跳转回原页面
|
||
|
||
## 🎯 为什么使用 PKCE？
|
||
|
||
PKCE (Proof Key for Code Exchange) 是 OAuth 2.0 的增强版本：
|
||
|
||
**传统方式（需要后端）：**
|
||
```
|
||
Client ID + Client Secret → 交换 token
|
||
```
|
||
|
||
**PKCE 方式（适合前端）：**
|
||
```
|
||
Client ID + code_verifier + code_challenge → 交换 token
|
||
```
|
||
|
||
**优势：**
|
||
- ✅ 不需要 Client Secret（前端无法安全存储）
|
||
- ✅ 防止授权码拦截攻击
|
||
- ✅ Spotify 官方推荐用于前端应用
|
||
- ✅ 符合 OAuth 2.0 最佳实践
|
||
|
||
## 📚 参考文档
|
||
|
||
- [Spotify Authorization Code Flow with PKCE](https://developer.spotify.com/documentation/web-api/tutorials/code-pkce-flow)
|
||
- [OAuth 2.0 PKCE RFC](https://datatracker.ietf.org/doc/html/rfc7636)
|
||
- [Spotify Web API Reference](https://developer.spotify.com/documentation/web-api)
|
||
|
||
## ✅ 总结
|
||
|
||
我们的实现：
|
||
1. ✅ **完全遵循官方文档的结构**（使用 `/callback` 路径）
|
||
2. ✅ **使用更安全的 PKCE 方式**（适合前端应用）
|
||
3. ✅ **完整的错误处理和用户反馈**
|
||
4. ✅ **优秀的用户体验**（加载动画、自动跳转）
|
||
|
||
现在的实现既符合官方文档的精神，又针对前端应用做了最佳优化！🎉
|
||
|