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

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

一个 Supabase 项目
- 创建一个项目在 Supabase 控制台
- 启用 Google OAuth 提供者
- 获取您的 Supabase 项目 URL 和 anon 密钥
Supabase JS SDK
- 在您的项目中安装 Supabase:
  终端窗口
```
npm install @supabase/supabase-js
```
一个 Capacitor 项目
- 一个现有的 Capacitor 应用
- Capacitor 社交登录插件已安装:
  终端窗口
```
npm install @capgo/capacitor-social-login
npx cap sync
```
平台特定Google设置
- 完成目标平台上的Google Sign-In设置:

示例应用

可用的完整工作示例在仓库中:

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 登录 - 通用设置

__CAPGO_KEEP_0__ - 简介和前提条件
Android 配置 - Android 特定配置
iOS 配置 - iOS 特定配置
Web 配置 - Web 特定配置

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 for the implementation detail in @capgo/capacitor-passkey, capgo/capacitor-passkey @capgo/capacitor-native-biometric Capgo __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-biometric