Supabase Apple Login - 通用设置

简介

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

前提条件

在开始之前，请确保您已经完成以下步骤：

1. 创建了一个 Supabase 项目

2. 阅读了 Apple Login General Setup Apple OAuth 凭证设置指南

3. 遵循了各个平台的指南来为您的目标平台设置 Apple OAuth 凭证：

   • Android Setup
   • 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 按钮

   

   注意

   您 您不需要 setup Secret key (for OAuth)我们将自定义后端实现来处理 Apple 登录。

Voilà,您现在已启用 Apple Sign-In with Supabase Authentication 🎉

使用身份验证助手

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

• 初始化 Apple Sign-In with 平台特定配置
• 处理身份验证流程（native on iOS，OAuth 重定向 on Android/Web）
• 从 Apple 中提取身份令牌
• 使用身份令牌登录 Supabase

Complete Implementation

The complete implementation is available in the example app’s supabaseAuthUtils.ts file.

Basic Usage

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);
}

How It Works

The helper function automatically handles platform-specific differences:

• iOS: Uses native Apple Sign-In (no redirect URL needed, uses bundle ID automatically)
• Android使用 OAuth 重定向流程（需要 Service ID）
• Web使用 OAuth 弹出窗口流程（需要 Service ID 和当前页面 URL 作为重定向）

使用 Apple 的身份令牌，该令牌然后用于使用 Supabase 进行身份验证 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的实现细节 双因素认证 关于双因素认证的实现细节