Supabase 集成简介

概览

本教程将指导你如何使用 Capacitor Social Login 插件配置 Supabase Authentication。通过此集成，你可以在移动端使用原生社交登录提供商（Google、Apple、Facebook、Twitter），同时利用 Supabase Auth 进行后端身份验证，并使用 PostgreSQL 进行数据存储。

学习目标

• 如何配置 Supabase Authentication
• 如何将 Capacitor Social Login 插件与 Supabase Auth 集成
• Android、iOS 和 Web 的平台特定配置
• 如何为 Supabase 安全地处理 nonce

准备工作

在开始之前，请确保你已具备：

1. 一个 Supabase 项目

   • 在以下地址创建项目： Supabase Dashboard
   • 启用 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 配置

   • 完成目标平台的 Google Sign-In 配置：
     • Google Login Android 配置
     • Google Login iOS 配置
     • Google Login Web 配置

示例应用

可以在仓库中找到完整的运行示例：

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

示例应用展示了：

• 使用 Supabase 的邮箱/密码认证
• Google Sign-In 集成（Android、iOS 和 Web）
• 基于 Supabase PostgreSQL 表的简单键值存储
• 使用行级安全（RLS）实现用户级数据存储

核心实现细节

Nonce 处理

出于安全考虑，Supabase 需要特殊的 nonce 处理。实现方式遵循 React Native Google Sign In 文档:

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

JWT 验证

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

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

平台特定注意事项

• iOS: Token 缓存可能导致 nonce 问题 - 实现中已自动处理
• Web: 必须调用 isLoggedIn() 在组件挂载时处理 OAuth 重定向
• Android: 使用 SHA-1 指纹配置的标准实现

下一步

请继续阅读以下配置指南：

• Supabase Google Login - 常规设置 - 概览与前置条件
• Android 配置 - Android 专属配置
• iOS 配置 - iOS 专属配置
• Web 端配置 - Web 专属配置

Apple 登录

• Supabase Apple Login - 常规设置 - 概览与前置条件
• iOS 配置 - iOS 专属配置
• Android 配置 - Android 专属配置

从 Supabase 集成简介继续

如果你正在使用 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 中的实现细节，以及 双重身份验证 了解双因素认证中的实现细节。