Supabase 集成介绍

概述

本教程将指导您设置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 设置

   • 完成 Google 登录设置：
     • Google 登录 Android 设置
     • Google 登录 iOS 设置
     • Google 登录 Web 设置

示例应用

您可以在仓库中找到一个完整的工作示例：

Code 仓库: 您可以在这里找到 code 仓库

示例应用演示：

• 使用 Supabase 的电子邮件/密码认证
• Google 登录集成（Android、iOS 和 Web）
• A simple key-value store using Supabase PostgreSQL tables
• 用户特定数据存储，带有行级别安全性（RLS）

关键实现细节

随机数处理

Supabase 需要特殊的随机数处理来确保安全性。实现遵循了 React Native Google Sign In 文档:

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

JWT 验证

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

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

平台特定考虑

• iOS: Token 缓存可能会导致 nonce 问题 - 实现会自动处理这个问题
• Web: 必须在挂载时调用 isLoggedIn() Android
• : 使用 SHA-1 指纹配置的标准实现Next Steps

继续设置指南：

- 概述和先决条件

• Android 设置 : Token 缓存可能会导致 nonce 问题 - 实现会自动处理这个问题
• Web Setup - Android-专属配置
• iOS 设置 - iOS-专属配置
• Web 设置 - Web-专属配置

Apple 登录

• Supabase Apple 登录 - 通用设置 - 概述和先决条件
• iOS 设置 - iOS-专属配置
• Android 设置 - Android-specific configuration

继续阅读 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-生物识别 为 @capgo/capacitor-native-生物识别 的实现细节提供信息,并 双因素身份验证 为双因素身份验证的实现细节提供信息,并