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

Supabase 集成介绍

概述

概述

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

您将学到什么

您将学到什么
  • 如何配置 Supabase 认证
  • 如何将 Capacitor 社交登录插件与 Supabase Auth 集成
  • Android、iOS 和 Web 平台的设置
  • 如何安全地处理 Supabase 的 nonce

您需要什么

在开始之前，请确保您有：

Section titled “How to configure Supabase Authentication”

  1. A Supabase Project

    • 在 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-safe random string)
  • 使用 SHA-256 进行散列以获得 nonceDigest
  • 通过 nonceDigest 传递给 Google Sign-In
  • 传递给 Supabase (Supabase 内部使用散列进行比较) rawNonce JWT 验证

标题为“JWT 验证”

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

令牌受众与配置的 Google 客户端 ID 匹配

  • 随机数匹配预期的摘要
  • 验证失败时自动重试（尤其重要于 iOS）
  • __CAPGO_KEEP_0__

平台相关注意事项

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

下一步

继续使用设置指南：

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

Apple 登录

标题为“Apple 登录”