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

Supabase 集成介绍

概述

标题为“概述”

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

您将学到什么

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

您需要什么

您需要的内容

开始之前，请确保您有：

  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 需要特殊的随机数处理。实现遵循了 React Native Google Sign In 文档:

  • 生成一个 rawNonce __CAPGO_KEEP_0__
  • 使用 SHA-256 进行散列得到 nonceDigest
  • 传递给 Google Sign-In nonceDigest 传递给 Supabase (Supabase 内部对其进行散列以进行比较)
  • JWT 验证 rawNonce 标题： JWT 验证

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

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

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

  • 令牌受众与您的配置的 Google 客户端 ID 匹配
  • The nonce matches the expected digest
  • 验证失败时自动重试（尤其重要于 iOS）

平台相关注意事项

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

iOS

下一步

继续使用设置指南:

Apple 登录

Apple 登录