123 lines
4.6 KiB
Markdown
123 lines
4.6 KiB
Markdown
# 📚 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) 快速上手。
|