Supabase Integration Introduction

概述

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

What You’ll Learn

• 如何配置 Supabase 认证
• 如何将 Capacitor 社交登录插件与 Supabase Auth 集成
• Android、iOS 和 Web 平台的设置
• 如何安全地处理 Supabase 的非对称性

What You’ll Need

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

1. 一个 Supabase 项目

   • 在 {targetLanguage} 中创建一个项目 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 Sign-In设置:
     • Google登录Android设置
     • Google登录iOS设置
     • Google登录Web设置

示例应用

在仓库中可找到完整工作示例:

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

示例应用演示:

• 使用 Supabase 的电子邮件/密码认证
• Google Sign-In (Android、iOS 和 Web) 集成
• 使用 Supabase PostgreSQL 表格的简单键值存储
• 使用行级安全性 (RLS) 的用户特定数据存储

关键实现细节

无效性处理

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

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

JWT 验证

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

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

平台相关考虑

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

下一步

Supabase Google 登录 - 一般设置

• 下一步 - 简介和前提条件
• Android 配置 - Android 特定配置
• iOS 配置 - iOS 特定配置
• Web 配置 - Web 特定配置

Apple 登录

• Supabase Apple 登录 - 通用配置 - 简介和前提条件
• iOS 配置 - iOS专属配置
• Android设置 - Android专属配置

继续阅读 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的实现细节，并 双因素认证 查看双因素认证的实现细节。