苹果 Supabase 登录 - 通用设置

概述

本指南将帮助您将 Apple Sign-In 与 Supabase 身份验证集成。 Apple Sign-In 提供了一个安全、专注于隐私的身份验证方法，适用于 iOS、Android 和 Web 平台。

先决条件

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

1. 创建了一个 Supabase 项目

2. 已阅读 上下文：HTML 文本片段来自更长的 Capgo UI 字符串（父键 `read_the_style_guide`）。页面/区域：Capgo 市场网站。角色：网站副本句子。见于：contributing.astro 页面。消息键 `read_the_style_guide`（读取样式指南）。 Apple OAuth认证设置指南

3. 按照各自平台的指南，设置Apple OAuth认证以适应您的目标平台:

   • Android设置
   • iOS设置
   • Web设置

   注意

   在开始Supabase教程之前，您需要为计划使用的平台生成客户端ID。

   对于iOS，客户端ID与您的应用ID相同。 对于Android和Web，客户端ID与您的服务ID相同。 您将在本教程第7步中使用它们。

在Supabase中启用Apple OAuth提供者

1. 前往您的 Supabase 控制台

2. 点击您的项目

   

3. 请前往 Authentication 菜单

   

4. 点击 Providers 标签

   

5. 找到 Apple 服务提供商

   

6. 启用该 Apple 提供者

   

7. 填写客户端 ID 配置:

   注意

   如果您正在使用 iOS 的 Apple 登录，客户端 ID 与您的应用 ID 相同。 如果您正在使用 Android 或 Web 的 Apple 登录，客户端 ID 与您的服务 ID 相同。 如果您同时使用两者，则需要提供应用 ID 和服务 ID。

   

8. 点击 Save 按钮

   

   注意

   您 不需要 设置 Secret key (for OAuth)。我们将为您提供一个定制的后端实现来处理Apple登录

Voilà，您现在已经启用了Apple Sign-In与Supabase身份验证

使用身份验证助手

完整的实现包括一个助手函数 authenticateWithAppleSupabase() 该函数处理整个Apple Sign-In流程与Supabase

• 初始化Apple Sign-In
• 处理身份验证流程（iOS原生，Android/Web上的OAuth重定向）
• 从 Apple 中提取身份令牌
• 使用身份令牌登录 Supabase

完整实现

完整实现可在示例应用的 文件中找到。 supabaseAuthUtils.ts 基本使用

基本使用部分

import { authenticateWithAppleSupabase } from './supabaseAuthUtils';

const result = await authenticateWithAppleSupabase();
if (result.success) {
  console.log('Signed in:', result.user);
  // Navigate to your authenticated area
} else {
  console.error('Error:', result.error);
}

如何工作

The helper function automatically handles platform-specific differences:

• iOS: 使用原生 Apple Sign-In (无需重定向 URL, 自动使用 bundle ID)
• Android: 使用 OAuth 重定向流程 (需要 Service ID)
• Web: 使用 OAuth popup 流程 (需要 Service ID 和当前页面 URL 作为重定向)

The function returns an identity token from Apple, which is then used to authenticate with Supabase using supabase.auth.signInWithIdToken().

继续 Supabase Apple 登录 - 通用设置

如果您正在使用 Supabase Apple 登录 - 通用设置 为了计划身份验证和帐户流程，连接它与 使用@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的实现细节，并且 双因素身份验证 为双因素身份验证的实现细节