Supabase 前端示例合集（登录、上传、下载）

2025-12-08 10:45:16 +08:00
parent 7f74b41a40
commit 95f91fe970
10 changed files with 2018 additions and 543 deletions
--- a/supabase-stack/examples/README.md
+++ b/supabase-stack/examples/README.md
@@ -0,0 +1,122 @@
+# 📚 Supabase Examples
+
+Supabase 前端示例合集（登录、上传、下载）。已合并原有文档并清理测试脚本，重点保留可运行页面和关键调试记录。
+
+## 目录与功能
+- `login.html`：邮箱 OTP 登录，登录态保存在 `supabase.auth` session 中。
+- `upload.html`：TUS 断点续传上传，自动修正 Location，使用 JWT + `apikey` 头，上行路径为 `<user_id>/<sanitized_filename>`，固定 bucket `test-public`。
+- `manage.html`：文件管理（单 bucket `test-public`），支持 1 天签名下载链接、批量下载、批量删除（不可恢复），可跳转至上传页面。
+- `index.html` / `test_frontend_config.html`：简单入口与前端配置测试。
+- 依赖：`supabase.js`（本地优先，CDN 兜底）、`tus.min.js`。
+
+## 快速使用
+1. 浏览器打开 `login.html`，完成邮箱 OTP 登录。
+2. 进入 `upload.html`，固定 bucket `test-public`，上传文件；路径自动带上 `user_id`。
+3. 打开 `manage.html`，点击“刷新列表”后对 `test-public` 中属于当前用户的文件批量下载/删除（签名链接有效期 1 天）。
+4. 如需本地预览，可在本目录运行 `python3 -m http.server 8000` 后访问 `http://localhost:8000/login.html` 等页面。
+
+## 配置
+- `SUPABASE_URL = https://amiap.hzau.edu.cn/supa`
+- `SUPABASE_ANON_KEY`：从 `supabase-stack/.env` 读取；当前页面内置同一值，保持与后端一致。
+- Storage 路径：物理上在 RustFS 的 `stub/test-public/<user_id>/...`（`GLOBAL_S3_BUCKET=stub`）；逻辑上通过 Supabase Storage API 读写。
+- 文件名已做 ASCII 清理和小写化，避免 TUS 校验错误。
+
+## 调试记录（精简自历史 MD）
+- Bucket 健康：可用 bucket 列表 `test-public`、`test-https`、`test-file-backend`、`testrustfs`（验证于线上）。
+- TUS 修复：Location 需强制 `/supa/storage/v1/upload/resumable`；XHR 重新 `open` 后补回所有请求头，避免 JWT 丢失；元数据由 tus 自动 Base64。
+- 认证修复：统一使用 `Authorization: Bearer <token>` 搭配 `apikey`；曾用无效 token 会触发 “Invalid Compact JWS”。
+- 路径说明：上传成功的逻辑路径 `bucket/user_id/filename`，RustFS 后台会看到版本目录（例如 `mlx.py/<uuid>`），属于正常版本化存储。
+- SMTP 证书历史问题已通过开启 `GOTRUE_SMTP_SKIP_VERIFY=true` 规避。
+- 最新验证（2025-12-07）：TUS PATCH 204 成功，文件可通过签名 URL 下载；直传降级逻辑仍保留备用。
+
+## 注意
+- 只保留最终版 `upload.html`；旧上传示例和测试 py/sh 已移除。
+- 签名下载链接默认有效期 1 天，如需调整修改 `download.html` 中的 `createSignedUrl(..., 86400)`。
+
+```javascript
+const SUPABASE_URL = 'https://amiap.hzau.edu.cn/supa';
+const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIs...';
+```
+
+**重要**: `login.html` 和 `upload.html` 必须使用相同的配置，否则 Session 无法正确传递。
+
+## 🧪 测试清单
+
+使用快速测试脚本验证：
+```bash
+./quick_test.sh
+```
+
+测试内容：
+- ✅ Supabase API 连通性
+- ✅ 必要文件完整性
+- ✅ 配置一致性检查
+- ✅ Python 环境检测
+
+## 🐛 调试技巧
+
+### 浏览器控制台 (F12)
+```javascript
+// 检查当前 session
+const { data } = await supabase.auth.getSession();
+console.log(data);
+
+// 列出存储桶
+const { data: buckets } = await supabase.storage.listBuckets();
+console.log(buckets);
+
+// 查看 token
+console.log(localStorage.getItem('supabase.auth.token'));
+```
+
+### Docker 日志
+```bash
+# Auth 服务日志
+docker logs supabase-auth -f
+
+# Storage 服务日志  
+docker logs supabase-storage -f
+
+# 所有服务
+docker-compose logs -f
+```
+
+## ❓ 常见问题
+
+### Q: 收不到验证码邮件？
+**A**: 检查 SMTP 配置或查看垃圾邮件箱
+```bash
+docker logs supabase-auth | grep -i smtp
+```
+
+### Q: 上传页面显示"未登录"？
+**A**: Session 已过期，需要重新登录
+
+### Q: 上传失败？  
+**A**: 检查：
+1. 是否选择了存储桶
+2. Storage Policy 是否正确配置
+3. 查看浏览器控制台错误信息
+
+### Q: API 调用返回 401？
+**A**: 检查 ANON_KEY 是否正确，或 Session 是否有效
+
+## 📖 更多资源
+
+- **Supabase 官方文档**: https://supabase.com/docs
+- **TUS 协议说明**: https://tus.io/
+- **Supabase JS SDK**: https://github.com/supabase/supabase-js
+
+## 🤝 贡献
+
+欢迎提交问题和改进建议！
+
+## 📝 许可
+
+本示例代码遵循项目主许可证。
+
+---
+
+**🎉 开始探索 Supabase 的强大功能吧！**
+
+运行 `python3 serve.py` 启动服务器，或查看 [QUICK_START.md](QUICK_START.md) 快速上手。