📚 Supabase Examples
Supabase 前端示例合集(登录、上传、下载)。已合并原有文档并清理测试脚本,重点保留可运行页面和关键调试记录。
目录与功能
login.html:邮箱 OTP 登录,登录态保存在supabase.authsession 中。upload.html:TUS 断点续传上传,自动修正 Location,使用 JWT +apikey头,上行路径为<user_id>/<sanitized_filename>,固定 buckettest-public。manage.html:文件管理(单 buckettest-public),支持 1 天签名下载链接、批量下载、批量删除(不可恢复),可跳转至上传页面。index.html/test_frontend_config.html:简单入口与前端配置测试。- 依赖:
supabase.js(本地优先,CDN 兜底)、tus.min.js。
快速使用
- 浏览器打开
login.html,完成邮箱 OTP 登录。 - 进入
upload.html,固定 buckettest-public,上传文件;路径自动带上user_id。 - 打开
manage.html,点击“刷新列表”后对test-public中属于当前用户的文件批量下载/删除(签名链接有效期 1 天)。 - 如需本地预览,可在本目录运行
python3 -m http.server 8000后访问http://localhost:8000/login.html等页面。
配置
SUPABASE_URL = https://amiap.hzau.edu.cn/supaSUPABASE_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)。
const SUPABASE_URL = 'https://amiap.hzau.edu.cn/supa';
const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIs...';
重要: login.html 和 upload.html 必须使用相同的配置,否则 Session 无法正确传递。
🧪 测试清单
使用快速测试脚本验证:
./quick_test.sh
测试内容:
- ✅ Supabase API 连通性
- ✅ 必要文件完整性
- ✅ 配置一致性检查
- ✅ Python 环境检测
🐛 调试技巧
浏览器控制台 (F12)
// 检查当前 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 日志
# Auth 服务日志
docker logs supabase-auth -f
# Storage 服务日志
docker logs supabase-storage -f
# 所有服务
docker-compose logs -f
❓ 常见问题
Q: 收不到验证码邮件?
A: 检查 SMTP 配置或查看垃圾邮件箱
docker logs supabase-auth | grep -i smtp
Q: 上传页面显示"未登录"?
A: Session 已过期,需要重新登录
Q: 上传失败?
A: 检查:
- 是否选择了存储桶
- Storage Policy 是否正确配置
- 查看浏览器控制台错误信息
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 快速上手。