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

Supabase Integration 介绍

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 登录集成（Android、iOS 和 Web）
  • 使用 Supabase PostgreSQL 表格的简单键值存储
  • 使用行级安全性 (RLS) 的用户特定数据存储

关键实现细节

标题：关键实现细节

随机数处理

标题：随机数处理

由于安全原因，Supabase 需要特殊的随机数处理。实现遵循 React Native Google Sign In 文档:

  • 生成一个 rawNonce （URL 安全的随机字符串）
  • 使用 SHA-256 进行散列得到 nonceDigest
  • 传递 nonceDigest 到 Google Sign-In
  • Pass rawNonce 到 Supabase (Supabase 内部以比较方式哈希)

JWT 验证

JWT 验证部分

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

  • 令牌受众与您的配置 Google 客户端 ID 匹配
  • 随机数匹配预期摘要
  • 验证失败时自动重试（尤其重要于 iOS）

平台特定考虑

平台特定考虑部分
  • iOS: Token caching 可能会导致 nonce 问题 - 实现会自动处理这个问题
  • Web: 必须在 mount 时调用 isLoggedIn() on mount 来处理 OAuth 重定向
  • Android: 使用 SHA-1 指纹配置的标准实现

Next Steps

继续设置指南：

Supabase Google 登录 - 通用设置

Apple Sign-In

Apple Sign-In

继续阅读 Supabase Integration 介绍

标题：继续阅读 Supabase Integration 介绍

如果您正在使用 Supabase Integration 介绍 来规划身份验证和帐号流程，连接它到 使用 @capgo/capacitor-social-login for the native capability in Using @capgo/capacitor-social-login, 使用 @capgo/capacitor-social-login 来实现 @capgo/capacitor-social-login 的详细信息 使用 @capgo/capacitor-passkey 来实现 @capgo/capacitor-passkey 的详细信息 @capgo/capacitor-native-生物识别 对于 @capgo/capacitor-native-生物识别 的实现细节, 双因素认证 对于双因素认证 的实现细节,