Skip to content
Capgo - Live Updates for Capacitor Apps Capgo

Supabase 集成介绍

GitHub

概述

标题为“概述”的部分

本教程将指导您设置Supabase身份验证与Capacitor社交登录插件。该集成允许您在移动平台上使用本机社交登录提供者（Google、Apple、Facebook、Twitter），同时利用Supabase Auth进行后端身份验证和PostgreSQL进行数据存储。

您将学到什么

您将学到的内容
  • 如何配置 Supabase 身份验证
  • 如何将 Capacitor 社交登录插件与 Supabase Auth 集成
  • Android、iOS 和 Web 平台的设置
  • 如何安全地处理 Supabase 的非一次性值

您需要的内容

您需要的内容

开始之前，请确保您有：

  1. 一个 Supabase 项目

    • 在这里创建一个项目 Supabase 控制台
    • 启用 Google OAuth 提供者
    • 获取您的 Supabase 项目 URL 和 anon 密钥

  2. Supabase JS SDK

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

  3. 一个 Capacitor 项目

    • 一个现有的 Capacitor 应用
    • Capacitor 社交登录插件已安装:
      终端窗口
      npm install @capgo/capacitor-social-login
      npx cap sync

  4. 平台特定的 Google 设置

示例应用

标题：示例应用

可用的完整工作示例在仓库中：

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

示例应用演示：

  • 使用 Supabase 的电子邮件/密码身份验证
  • Google Sign-In 集成（Android、iOS 和 Web）
  • 使用 Supabase PostgreSQL 表的简单键值存储
  • 用户特定数据存储与行级安全性 (RLS)

关键实现细节

关于“关键实现细节”

随机数处理

关于“随机数处理”

Supabase 需要特殊的随机数处理来确保安全性。实现遵循了 React Native Google Sign In 文档:

  • 生成一个 rawNonce (URL 安全的随机字符串)
  • 使用 SHA-256 进行散列得到 nonceDigest
  • 传递 nonceDigest 到 Google Sign-In
  • 通过 Supabase (内部以此为比较) rawNonce JWT 验证

确保以下内容：

令牌受众与您的 Google Client ID 配置匹配

令牌的 nonce 与预期的摘要匹配

  • 验证失败时自动重试（尤其是在 iOS 上很重要）
  • 平台特定注意事项
  • iOS

:令牌缓存可能会导致 nonce 问题 - 实现会自动处理此问题

JWT 验证
  • 平台特定注意事项iOS
  • Web: 必须在挂载时调用 isLoggedIn() on mount to handle OAuth redirects
  • Android: 使用 SHA-1 指纹配置的标准实现

Next Steps

继续设置指南：

Supabase Google 登录 - 通用设置

Apple 登录

Apple 登录

继续从 Supabase Integration Introduction

Section titled “继续从 Supabase Integration Introduction”

如果您正在使用 Supabase Integration Introduction 来规划身份验证和帐号流程，连接它与 使用 @capgo/capacitor-social-login 为 native capability 在使用 @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 的实现细节 双因素认证 对于双因素认证的实现细节