跳过内容
Capgo - Capacitor 应用程序的实时更新 Capgo

Supabase Integration Introduction

概述

标题为“概述”的部分

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

您将学到什么

标题为“您将学到什么”的部分
  • 如何配置 Supabase 认证
  • 如何将 Capacitor 社交登录插件与 Supabase Auth 进行集成
  • Android、iOS 和 Web 平台的特定设置
  • 如何安全地处理 Supabase 的 nonce

您需要的内容

标题：您需要的内容

开始之前，请确保您有：

  1. 一个 Supabase 项目

    • 在 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 需要特殊的 nonce 处理来确保安全。 实现遵循 React Native Google Sign In 文档:

  • 生成一个 rawNonce (URL-safe 的随机字符串)
  • 使用 SHA-256 哈希得到 nonceDigest
  • 传递 nonceDigest 给 Google Sign-In
  • 传递 rawNonce 给 Supabase (Supabase 内部使用哈希值进行比较)

JWT 验证

标题：JWT 验证

示例实现包括 JWT 验证来确保：

  • The token audience matches your configured Google Client IDs
  • The nonce matches the expected digest
  • 自动重试验证失败（尤其重要的是 iOS）

平台相关考虑

平台相关考虑
  • iOS: 令牌缓存可能会导致 nonce 问题 - 实现会自动处理
  • Web: 必须在挂载时调用 isLoggedIn() Android
  • : 使用 SHA-1 指纹配置的标准实现Android

下一步

下一步

继续按照以下设置指南进行:

Apple 登录

Apple Sign-In

继续 Supabase 集成介绍

继续 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, 和 双因素认证 为实现细节在双因素认证