跳转到正文
Capgo - 构建、发布并更新 Capacitor 应用 Capgo

Supabase 集成简介

GitHub

概览

“概览”章节

本教程将指导你通过 Capacitor Social Login 插件设置 Supabase Authentication。借助此集成，你可以在移动端使用原生社交登录服务商（Google、Apple、Facebook、Twitter），同时用 Supabase Auth 处理后端身份验证，并用 PostgreSQL 存储数据。

学习目标

章节标题“你将学到什么”
  • 如何配置 Supabase 身份验证
  • 如何将 Capacitor Social Login 插件与 Supabase Auth 集成
  • Android、iOS 和 Web 的平台专属配置
  • 如何为 Supabase 安全处理 nonce

准备工作

标题为“准备工作”的章节

开始前，请确保你已准备好：

  1. 一个 Supabase 项目

    • 在以下地址创建项目： Supabase 控制台
    • 启用 Google OAuth 提供商
    • 获取你的 Supabase 项目 URL 和 anon key

  2. Supabase JS SDK

    • 在项目中安装 Supabase：
      终端窗口
      npm install @supabase/supabase-js

  3. 一个 Capacitor 项目

    • 一个现有的 Capacitor 应用
    • 已安装 Capacitor Social Login 插件：
      终端窗口
      npm install @capgo/capacitor-social-login
      npx cap sync

  4. 各平台 Google 配置

示例应用

标题为“示例应用”的章节

仓库中提供了一个完整的可运行示例：

Code 仓库: 您可以在这里找到 code 仓库

示例应用演示了：

  • 使用 Supabase 进行邮箱/密码身份验证
  • Google 登录集成（Android、iOS 和 Web）
  • 使用 Supabase PostgreSQL 表实现简单的键值存储
  • 使用行级安全（RLS）存储用户特定数据

核心实现细节

“关键实现细节”章节

Nonce 处理

标题为“Nonce 处理”的部分

出于安全考虑，Supabase 需要特殊的 nonce 处理。实现流程如下： React Native Google Sign In 文档:

  • 生成一个 rawNonce （URL 安全的随机字符串）
  • 用 SHA-256 哈希后得到 nonceDigest
  • 传入 nonceDigest 传给 Google Sign-In
  • 传入 rawNonce 传给 Supabase（Supabase 会在内部哈希后比对）

JWT 验证

标题为“JWT 验证”的章节

示例实现包含 JWT 验证，以确保：

  • Token 的 audience 与您配置的 Google Client ID 匹配
  • Nonce 与预期的摘要匹配
  • 验证失败时自动重试（对 iOS 尤为重要）

平台差异注意事项

标题为“平台相关注意事项”的章节
  • iOS：Token 缓存可能导致 nonce 问题——实现会自动处理
  • Web 端：必须调用 isLoggedIn() 在挂载时处理 OAuth 重定向
  • Android: 配置 SHA-1 指纹的标准实现

下一步

“后续步骤”章节

继续阅读配置指南：

Apple 登录

“Apple Sign-In”章节

继续阅读 Supabase 集成简介

“从 Supabase Integration Introduction 继续”章节

如果你正在使用 Supabase 集成简介 用来规划身份验证和账户流程，并将它与 使用 @capgo/capacitor-social-login 关于使用 @capgo/capacitor-social-login 的原生能力， @capgo/capacitor-social-login 在 @capgo/capacitor-social-login 中查看实现细节， @capgo/capacitor-passkey 有关 @capgo/capacitor-passkey 的实现细节， @capgo/capacitor-native-biometric 以及 @capgo/capacitor-native-biometric 中的实现细节， 双因素认证 有关双重身份验证的实现细节。