Supabase Apple Login - General Setup

概述

本指南将帮助您集成 Apple 登录与 Supabase 身份验证。Apple 登录提供了一种安全、注重隐私的身份验证方法，可在 iOS、Android 和 Web 平台上使用。

前置条件

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

1. 创建一个 Supabase 项目

2. 阅读 Apple Login 通用设置 指南以设置 Apple OAuth 凭证

3. 遵循相应的特定于平台的指南为您的目标平台设置 Apple OAuth 凭证：

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

   Note

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

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

在 Supabase 中启用 Apple OAuth 提供商

1. 转到您的 Supabase Dashboard

2. 点击您的项目

   

3. 转到 Authentication 菜单

   

4. 点击 Providers 选项卡

   

5. 查找 Apple 提供商

   

6. 启用 Apple 提供商

   

7. 填充客户端 ID 配置：

   Note

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

   

8. 点击 Save 按钮

   

   Note

   您不必设置 Secret key (for OAuth)。我们将进行自定义后端实现来处理 Apple 登录。

好的，您现在已启用 Supabase 身份验证的 Apple 登录 🎉

使用身份验证助手

完整的实现包括一个 authenticateWithAppleSupabase() 助手函数，该函数处理整个 Apple 登录流程与 Supabase。此函数：

• 使用特定于平台的配置初始化 Apple 登录
• 处理身份验证流程（iOS 上为原生，Android/Web 上为 OAuth 重定向）
• 从 Apple 提取身份令牌
• 使用身份令牌登录到 Supabase

完整实现

完整实现可在 example app 的 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 登录（不需要重定向 URL，自动使用包 ID）
• Android: 使用带有后端 edge function 的 OAuth 重定向流程（需要服务 ID）
• Web: 使用 OAuth 弹出窗口流程（需要服务 ID 和当前页面 URL 作为重定向）

该函数返回来自 Apple 的身份令牌，然后将其用于使用 supabase.auth.signInWithIdToken() 通过 Supabase 进行身份验证。