Supabase Apple 登录 - 常规设置

概述

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

先决条件

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

1. 创建Supabase项目

2. 阅读 Apple 登录常规设置 指南以设置 Apple OAuth 凭据

3. 按照相应平台特定的指南为您的目标平台设置 Apple OAuth 凭据：

   • Android 设置
   • iOS 设置
   • 网页设置

   :::注意 在开始 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 配置：

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

   

8. 单击 Save 按钮

   

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

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

使用身份验证助手

完整的实现包括一个辅助函数 authenticateWithAppleSupabase()，它使用 Supabase 处理整个 Apple 登录流程。这个功能：

• 使用特定于平台的配置初始化 Apple 登录
• 处理身份验证流程（在 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);
}

它是如何运作的

辅助函数自动处理特定于平台的差异：- iOS：使用本机 Apple 登录（无需重定向 URL，自动使用捆绑包 ID）

• Android：使用 OAuth 重定向流与后端边缘功能（需要服务 ID）
• Web：使用 OAuth 弹出流程（需要服务 ID 和当前页面 URL 作为重定向）

该函数从 Apple 返回一个身份令牌，然后使用 supabase.auth.signInWithIdToken() 向 Supabase 进行身份验证。