Supabase Apple Login - 常规设置

概览

本指南将帮助您将 Apple Sign-In 与 Supabase Authentication 集成。Apple Sign-In 提供了一种安全且注重隐私的身份验证方式，支持 iOS、Android 和 Web 平台。

前提条件

开始之前，请确保您已具备以下条件：

1. 已创建 Supabase 项目

2. 阅读 Apple 登录基础配置 配置 Apple OAuth 凭据指南

3. 请按照对应平台的指南，为您的目标平台配置 Apple OAuth 凭据：

   • Android 配置
   • iOS 配置
   • Web 端设置

   注意

   在开始 Supabase 教程之前，你需要为你计划使用的平台生成 Client ID。

   对于 iOS，Client ID 与你的 App ID 相同。 对于 Android 和 Web，Client ID 与你的 Service ID 相同。 你将在本指南的第 7 步中使用它们。

在 Supabase 中启用 Apple OAuth 提供商

1. 前往你的 Supabase Dashboard

2. 点击你的项目

   

3. 前往 Authentication 菜单

   

4. 点击 Providers 选项卡

   

5. 找到 Apple 提供方

   

6. 启用 Apple 提供方

   

7. 填写 Client ID 配置：

   注意

   如果您在 iOS 上使用 Apple 登录，Client ID 与您的 App ID 相同。 如果您在 Android 或 Web 上使用 Apple 登录，Client ID 与您的 Service ID 相同。 如果您两者都使用，则需要同时提供 App ID 和 Service ID。

   

8. 点击 Save 按钮

   

   注意

   您 无需 配置 Secret key (for OAuth)。我们将通过自定义后端实现来处理 Apple 登录。

搞定，你现在已经通过 Supabase Authentication 启用了 Apple Sign-In 🎉

使用 Authentication Helper

完整实现包含一个 helper 函数 authenticateWithAppleSupabase() 用于处理整个 Supabase Apple Sign-In 流程。该函数会：

• 使用平台特定配置初始化 Apple Sign-In
• 处理认证流程（iOS 为原生流程，Android/Web 为 OAuth 重定向）
• 从 Apple 提取 identity token
• 使用 identity token 登录 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);
}

工作原理

辅助函数会自动处理平台差异：

• iOS：使用原生 Apple Sign-In（无需重定向 URL，自动使用 bundle ID）
• Android：使用后端 edge function 的 OAuth 重定向流程（需要 Service ID）
• Web 端：使用 OAuth 弹出窗口流程（需要 Service ID 和当前页面 URL 作为重定向地址）

该函数会返回 Apple 的 identity token，然后用它通过以下方式向 Supabase 进行身份验证： supabase.auth.signInWithIdToken().

从 Supabase Apple Login - 常规设置继续

如果你正在使用 Supabase Apple Login - 常规设置 用来规划身份验证和账户流程，并将它与 使用 @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 中的实现细节， 双因素认证 有关双重身份验证的实现细节。