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

Supabase 集成介绍

GitHub

概述

Section titled “Overview”

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

What You’ll Learn

Section titled “What You’ll Learn”
  • 如何配置 Supabase 认证
  • 如何将 Capacitor 社交登录插件与 Supabase Auth 集成
  • Android、iOS 和 Web 平台的特定设置
  • 如何安全地处理 Supabase 的非对称密钥

What You’ll Need

Section titled “What You’ll Need”

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

  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 文档 生成一个:

  • （URL 安全的随机字符串） rawNonce Email/password authentication with Supabase
  • 使用 SHA-256 进行散列以获得 nonceDigest
  • 通过 nonceDigest 传递给 Google Sign-In
  • 传递给 rawNonce 将传递给 Supabase（Supabase 内部进行散列以进行比较）

JWT 验证

标题为“JWT 验证”的部分

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

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

平台相关注意事项

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

下一步

继续设置指南:

Supabase Google 登录 - 通用设置

Apple Sign-In

Apple Sign-In

从 Supabase Integration 介绍继续

标题：从 Supabase Integration 介绍继续

如果您正在使用 Supabase Integration 介绍 来规划身份验证和帐户流程，连接它到 使用 @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 的实现细节, 和 双因素认证 为双因素认证的实现细节