Files
labweb/supabase-stack/examples

📚 Supabase Examples

Supabase 前端示例合集(登录、上传、下载)。已合并原有文档并清理测试脚本,重点保留可运行页面和关键调试记录。

目录与功能

  • login.html:邮箱 OTP 登录,登录态保存在 supabase.auth session 中。
  • upload.htmlTUS 断点续传上传,自动修正 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-publictest-httpstest-file-backendtestrustfs(验证于线上)。
  • TUS 修复Location 需强制 /supa/storage/v1/upload/resumableXHR 重新 open 后补回所有请求头,避免 JWT 丢失;元数据由 tus 自动 Base64。
  • 认证修复:统一使用 Authorization: Bearer <token> 搭配 apikey;曾用无效 token 会触发 “Invalid Compact JWS”。
  • 路径说明:上传成功的逻辑路径 bucket/user_id/filenameRustFS 后台会看到版本目录(例如 mlx.py/<uuid>),属于正常版本化存储。
  • SMTP 证书历史问题已通过开启 GOTRUE_SMTP_SKIP_VERIFY=true 规避。
  • 最新验证2025-12-07TUS 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.htmlupload.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: 检查:

  1. 是否选择了存储桶
  2. Storage Policy 是否正确配置
  3. 查看浏览器控制台错误信息

Q: API 调用返回 401

A: 检查 ANON_KEY 是否正确,或 Session 是否有效

📖 更多资源

🤝 贡献

欢迎提交问题和改进建议!

📝 许可

本示例代码遵循项目主许可证。


🎉 开始探索 Supabase 的强大功能吧!

运行 python3 serve.py 启动服务器,或查看 QUICK_START.md 快速上手。