Supabase 拓展：App 接入 Supabase 后端服务（Auth + PostgreSQL + Storage + Edge Function）

« 返回首页

logo Supabase 拓展

Supabase 拓展用于把 Supabase 的 BaaS 能力接入 App Inventor 应用。它提供身份认证、PostgreSQL 数据库（增删改查）、云存储和 Edge Function 能力，适合需要用户体系、云端数据、文件上传下载和后端业务逻辑的 App。

Supabase 是一个开源的 Firebase 替代品，基于 PostgreSQL 构建。

适用场景

  • 需要用户注册、登录、匿名登录、验证码登录
  • 需要 PostgreSQL 表级增删改查
  • 需要上传下载文件，获取文件访问链接
  • 需要调用 Edge Function 执行服务端逻辑
  • 需要从 Firebase 或其他 BaaS 迁移到开源方案

组件组成

导入 cn.fun123.Supabase.aix 后，会出现 4 个可独立拖拽的不可见组件。

组件 作用
SupabaseAuth 身份认证：邮箱/手机/匿名登录、Magic Link、OTP验证码、Token管理
SupabasePgSQL PostgreSQL 数据库：增删改查、Upsert、RPC存储函数调用
SupabaseStorage 云存储：上传、下载、签名URL、删除、列目录、移动、复制
SupabaseFunction Edge Function：调用 Deno 云函数

组件间关系 

SupabaseAuth（核心配置：ProjectUrl + PublishableKey + Token管理）
    ├── SupabasePgSQL（引用 Auth 获取配置）
    ├── SupabaseStorage（引用 Auth 获取配置）
    └── SupabaseFunction（引用 Auth 获取配置）

开发前准备工作

1. 获取 Supabase 配置

登录 Supabase 控制台，进入项目的 Settings > API，获取：

  • Project URL：https://xxxxx.supabase.co
  • anon public key：eyJ...（公钥，可安全嵌入客户端）

2. 配置 Auth 组件

在设计器中拖入 SupabaseAuth，设置属性：

  • ProjectUrl：填入 Project URL
  • PublishableKey：填入 anon public key

3. 使用功能组件

拖入 SupabasePgSQL / SupabaseStorage / SupabaseFunction，在设计器中设置 SupabaseAuth 属性为刚才的 Auth 组件引用。设置后自动获取 ProjectUrl、PublishableKey 和 AccessToken。

跨页面使用提示：扩展组件不能跨页面引用。如果 Auth 在登录页面、其他组件在主页面，无法通过 SupabaseAuth 属性引用。此时应在登录成功后保存 AccessToken（如存入 TinyDB），然后在主页面手动设置 AccessToken、ProjectUrl、PublishableKey 属性。优先级：手动设置的值 > Auth 引用。

SupabaseAuth

Supabase 身份认证组件，支持邮箱/手机号密码注册登录、匿名登录、第三方 ID Token 登录、Magic Link、OTP 验证码、密码重置等功能。登录成功后自动存储 AccessToken、RefreshToken 和 UserId。

Properties

ProjectUrl
Supabase 项目 URL（如 https://xxxxx.supabase.co），在控制台 Settings > API 中获取
PublishableKey
项目公钥（anon/public key），所有请求都需要此密钥
Timeout
HTTP 请求超时时间（毫秒），默认 10000
AccessToken
访问令牌，登录成功后自动存储。跨页面使用时可读取此属性传递给其他组件
RefreshToken
刷新令牌，登录成功后自动存储
UserId
用户 ID，登录成功后自动存储

Events

SignUpSuccess()
注册成功。AccessToken/RefreshToken/UserId 已自动存储
SignInSuccess()
登录成功。AccessToken/RefreshToken/UserId 已自动存储
AnonymousSignInSuccess()
匿名登录成功
MagicLinkSent(responseCode,data)
Magic Link 邮件已发送
OtpSent(responseCode,data)
验证码已发送
OtpVerified(responseCode,data)
验证码校验成功
RefreshAccessTokenSuccess()
Token 刷新成功。AccessToken/RefreshToken 已自动更新
GetUserSuccess(responseCode,data)
获取用户信息成功。data 为用户信息 JSON
UpdateUserSuccess(responseCode,data)
修改用户信息成功
SignOutSuccess(responseCode,data)
退出登录成功
ResetPasswordSent(responseCode,data)
密码重置邮件已发送
RequestFailed(operation,errorCode,errorMessage)
请求失败。operation 为操作名称，errorCode 为错误码，errorMessage 为错误信息

Methods

SignUpWithEmail(email,password)
邮箱密码注册。password 至少 6 位
SignUpWithPhone(phone,password)
手机号密码注册。phone 格式如 +8613000000000，需在控制台配置 SMS Provider
SignInWithEmailPassword(email,password)
邮箱密码登录
SignInWithPhonePassword(phone,password)
手机号密码登录。需在控制台配置 SMS Provider
SignInAnonymously()
匿名登录。需先在控制台 Authentication > Providers > Anonymous 启用
SignInWithIdToken(provider,idToken)
通过第三方 ID Token 登录。provider 如 google、apple，需在控制台启用对应 Provider
发送 Magic Link 邮件，用户点击邮件中的链接即可登录
SendOtp(phone,createUser)
发送手机验证码（OTP）。createUser 为是否自动创建用户。需配置 SMS Provider
SendEmailOtp(email)
发送邮箱验证码（OTP）
VerifyPhoneOtp(phone,token)
验证手机验证码
VerifyEmailOtp(email,token)
验证邮箱验证码
RefreshAccessToken()
用 RefreshToken 刷新 AccessToken
GetUser()
获取当前登录用户信息（需已登录）
UpdateUser(email,password,dataJson)
修改用户信息（需已登录）。参数可为空字符串表示不修改，dataJson 为用户元数据 JSON
SignOut()
退出登录（需已登录）
ResetPasswordForEmail(email)
发送密码重置邮件

SupabasePgSQL

PostgreSQL 数据库组件，基于 PostgREST 提供完整的 CRUD 操作，支持查询、插入、更新、删除、Upsert、RPC 存储函数调用。

查询条件使用 PostgREST 语法，如 name=eq.张三&age=gte.18。

Properties

SupabaseAuth
设置 Auth 组件引用，自动获取 ProjectUrl、PublishableKey 和 AccessToken。跨页面使用时改为手动设置这三个属性
AccessToken
访问令牌。设置 SupabaseAuth 后自动获取；跨页面使用时需手动设置此属性。优先级：手动设置 > Auth 引用

Events

QuerySuccess(responseCode,data,totalCount)
查询/统计成功。responseCode: HTTP 响应码, data: JSON 结果数组, totalCount: 总记录数（来自 Content-Range 头）
InsertSuccess(responseCode,data,affectedRows)
插入成功。responseCode: HTTP 响应码, data: 插入后的数据, affectedRows: 影响行数
UpsertSuccess(responseCode,data,affectedRows)
Upsert 成功。responseCode: HTTP 响应码, data: 结果数据, affectedRows: 影响行数
UpdateSuccess(responseCode,data,affectedRows)
更新成功。responseCode: HTTP 响应码, data: 更新后的数据, affectedRows: 影响行数
DeleteSuccess(responseCode,affectedRows)
删除成功。responseCode: HTTP 响应码, affectedRows: 影响行数
RpcSuccess(responseCode,data)
RPC 调用成功。responseCode: HTTP 响应码, data: 函数返回数据
RequestFailed(operation,errorCode,errorMessage)
请求失败。operation 为操作名称，errorCode 为错误码，errorMessage 为错误信息

Methods

QuerySimple(table,where)
简单查询。table: 表名, where: WHERE 条件（如 name=eq.张三&age=gte.18）
Query(table,where,select,orderBy,limit,offset)
完整查询。table: 表名, where: WHERE 条件, select: 选择字段, orderBy: 排序（如 created_at.desc）, limit: 限制数量, offset: 偏移量
Insert(table,data)
插入记录。table: 表名, data: JSON 数据（对象或数组）
Upsert(table,data)
插入或更新记录。table: 表名, data: JSON 数据。主键冲突则更新已有记录，否则插入新记录
Update(table,where,data)
更新记录。table: 表名, where: WHERE 条件（必须提供）, data: 更新的 JSON 数据
Delete(table,where)
删除记录。table: 表名, where: WHERE 条件（必须提供）
GetOne(table,where,select,orderBy)
取第一条记录。table: 表名, where: WHERE 条件, select: 字段列表, orderBy: 排序
List(table,limit)
获取前 N 条数据。table: 表名, limit: 返回数量，≤0 时不限制
Rpc(functionName,params)
调用 PostgreSQL 存储函数（RPC）。functionName: 函数名, params: JSON 参数（可为空）
Count(table,where)
统计记录数量。table: 表名, where: WHERE 条件（可为空）

SupabaseStorage

云存储组件，支持文件上传下载、签名 URL、公开 URL、删除、列目录、移动和复制操作。

Properties

SupabaseAuth
设置 Auth 组件引用，自动获取 ProjectUrl、PublishableKey 和 AccessToken。跨页面使用时改为手动设置这三个属性
AccessToken
访问令牌。设置 SupabaseAuth 后自动获取；跨页面使用时需手动设置此属性。优先级：手动设置 > Auth 引用

Events

UploadSuccess(responseCode,data)
文件上传成功。responseCode: HTTP 响应码, data: 上传结果（含 path）
DownloadSuccess(responseCode,cloudPath,localFilePath,bytesWritten)
文件下载成功。responseCode: HTTP 响应码, cloudPath: 云端路径, localFilePath: 本地保存路径, bytesWritten: 写入字节数
GetUrlSuccess(responseCode,url)
获取文件链接成功。responseCode: HTTP 响应码, url: 文件访问链接
DeleteFileSuccess(responseCode,data)
删除文件成功。responseCode: HTTP 响应码, data: 删除结果
ListFilesSuccess(responseCode,data)
列出文件成功。responseCode: HTTP 响应码, data: 文件列表 JSON
MoveFileSuccess(responseCode,data)
移动文件成功。responseCode: HTTP 响应码, data: 结果
CopyFileSuccess(responseCode,data)
复制文件成功。responseCode: HTTP 响应码, data: 结果
RequestFailed(operation,errorCode,errorMessage)
请求失败。operation 为操作名称，errorCode 为错误码，errorMessage 为错误信息

Methods

UploadFile(bucket,cloudPath,filePath)
上传本地文件到云存储。bucket: 存储桶名, cloudPath: 云端路径（如 folder/file.jpg）, filePath: 手机本地文件路径
DownloadFile(bucket,cloudPath,localFilePath)
下载云文件到手机。bucket: 存储桶名, cloudPath: 云端路径, localFilePath: 本地保存路径
GetFileUrl(bucket,cloudPath,expiresIn)
获取文件签名 URL，可在 Image 组件中直接使用。bucket: 存储桶名, cloudPath: 云端路径, expiresIn: 过期时间（秒，默认 60）
GetPublicUrl(bucket,cloudPath)
获取文件公开 URL（仅对公开桶有效，不需要登录）
DeleteFile(bucket,cloudPath)
删除云文件。bucket: 存储桶名, cloudPath: 云端路径
ListFiles(bucket,prefix,limit,offset)
列出存储桶中的文件。bucket: 存储桶名, prefix: 文件夹前缀（如 folder/）, limit: 返回数量, offset: 偏移量
MoveFile(bucket,sourcePath,destPath)
移动/重命名文件。bucket: 存储桶名, sourcePath: 原路径, destPath: 目标路径
CopyFile(bucket,sourcePath,destPath)
复制文件。bucket: 存储桶名, sourcePath: 原路径, destPath: 目标路径

SupabaseFunction

Edge Function 组件，用于调用 Supabase 的 Deno 云函数。

Properties

SupabaseAuth
设置 Auth 组件引用，自动获取 ProjectUrl、PublishableKey 和 AccessToken。跨页面使用时改为手动设置这三个属性
AccessToken
访问令牌。设置 SupabaseAuth 后自动获取；跨页面使用时需手动设置此属性。优先级：手动设置 > Auth 引用

Events

FunctionSuccess(responseCode,data)
Edge Function 调用成功。responseCode: HTTP 响应码, data: 函数返回的数据
RequestFailed(operation,errorCode,errorMessage)
请求失败。operation 为操作名称，errorCode 为错误码，errorMessage 为错误信息

Methods

Invoke(functionName,params)
调用 Edge Function。functionName: 函数名, params: JSON 参数（可为空）

拓展下载

收费拓展，请联系客服购买，会员享受五折优惠~

文档反馈

在线
客服

扫码添加客服咨询

我要
分享

扫码分享到朋友圈

App Inventor 2 中文网

Android|HarmonyOS|iOS
关注公众号，
精彩不错过！