143 lines
3.2 KiB
Markdown
143 lines
3.2 KiB
Markdown
# ✅ Spotify 授权错误已修复
|
||
|
||
## 🐛 问题
|
||
|
||
之前遇到的错误：
|
||
```
|
||
#error=unsupported_response_type
|
||
```
|
||
|
||
## 🔧 原因
|
||
|
||
Spotify 已经**不再支持** Implicit Grant Flow（`response_type=token`），这种授权方式已被弃用。
|
||
|
||
## ✨ 解决方案
|
||
|
||
已将授权流程升级为 **Authorization Code Flow with PKCE**：
|
||
|
||
### 主要变更
|
||
|
||
1. **授权方式**
|
||
- ❌ 旧版：`response_type=token`（Implicit Grant）
|
||
- ✅ 新版：`response_type=code` + PKCE
|
||
|
||
2. **回调参数**
|
||
- ❌ 旧版：`#access_token=...`（URL hash）
|
||
- ✅ 新版：`?code=...`（URL query string）
|
||
|
||
3. **Token 获取**
|
||
- ❌ 旧版：直接从 URL 获取 access token
|
||
- ✅ 新版：使用授权码交换 access token
|
||
|
||
### PKCE 流程
|
||
|
||
```
|
||
1. 生成 code_verifier (随机64位字符串)
|
||
↓
|
||
2. 计算 code_challenge (SHA-256 hash + base64)
|
||
↓
|
||
3. 请求授权 (带 code_challenge)
|
||
↓
|
||
4. 获取 authorization_code
|
||
↓
|
||
5. 用 code + code_verifier 交换 access_token
|
||
```
|
||
|
||
## 📝 需要做什么
|
||
|
||
### 1. 确保 Redirect URI 正确配置
|
||
|
||
在 [Spotify Dashboard](https://developer.spotify.com/dashboard/4ed200672ba1421baa31b9859bd84d39/settings) 中添加：
|
||
|
||
**开发环境：**
|
||
```
|
||
http://localhost:5173/
|
||
```
|
||
|
||
**生产环境：**
|
||
```
|
||
https://sports.rucky.cn/
|
||
```
|
||
|
||
⚠️ **重要提示：**
|
||
- 必须包含最后的斜杠 `/`
|
||
- 协议必须匹配（http 或 https）
|
||
- 路径必须完全匹配
|
||
|
||
### 2. 重新构建应用
|
||
|
||
```bash
|
||
# 重新构建
|
||
npm run build
|
||
|
||
# 或启动开发服务器
|
||
npm run dev
|
||
```
|
||
|
||
### 3. 测试授权
|
||
|
||
1. 访问应用
|
||
2. 点击 "连接 Spotify 账号"
|
||
3. 应该能正常跳转到 Spotify 授权页面
|
||
4. 授权后正确返回应用
|
||
|
||
## ✅ 修复后的优势
|
||
|
||
1. **更安全**
|
||
- 不需要暴露 Client Secret
|
||
- 防止授权码拦截攻击
|
||
- 使用动态生成的验证码
|
||
|
||
2. **符合标准**
|
||
- Spotify 官方推荐方式
|
||
- 符合 OAuth 2.0 最佳实践
|
||
- 未来兼容性更好
|
||
|
||
3. **更稳定**
|
||
- 不会再出现 `unsupported_response_type` 错误
|
||
- 不受 Implicit Grant 弃用影响
|
||
|
||
## 🔍 技术细节
|
||
|
||
### 修改的文件
|
||
|
||
1. **src/services/spotifyService.ts**
|
||
- 添加 PKCE 相关方法：
|
||
- `generateRandomString()` - 生成随机字符串
|
||
- `sha256()` - SHA-256 哈希
|
||
- `base64encode()` - Base64 URL 编码
|
||
- `exchangeCodeForToken()` - 交换授权码
|
||
- 更新 `getAuthorizationUrl()` - 生成 PKCE 授权 URL
|
||
- 更新 `handleCallback()` - 处理授权码回调
|
||
|
||
2. **src/views/MusicRhythm.vue**
|
||
- `initSpotify()` 改为异步函数
|
||
- `connectSpotify()` 改为异步函数
|
||
- 回调检测从 hash 改为 query string
|
||
|
||
3. **文档更新**
|
||
- SPOTIFY_SETUP.md
|
||
- QUICK_START.md
|
||
- README_SPOTIFY.md
|
||
|
||
## 📚 参考资料
|
||
|
||
- [Spotify Authorization Guide](https://developer.spotify.com/documentation/web-api/tutorials/code-pkce-flow)
|
||
- [OAuth 2.0 PKCE RFC](https://datatracker.ietf.org/doc/html/rfc7636)
|
||
- [Why PKCE is better](https://developer.spotify.com/documentation/web-api/concepts/authorization)
|
||
|
||
## 🎉 现在可以使用了！
|
||
|
||
授权流程已完全修复，可以正常使用 Spotify 功能了。
|
||
|
||
```bash
|
||
# 启动应用
|
||
npm run dev
|
||
|
||
# 访问
|
||
http://localhost:5173/
|
||
```
|
||
|
||
享受音乐律动吧！🎵
|
||
|