Supabase Apple 登录 - 通用设置

概述

本指南将帮助您将 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 配置

   注意

   __CAPGO_KEEP_0__

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

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

1. 标题：在 Supabase 中启用 Apple OAuth 提供者 前往您的

2. Supabase 控制台

   

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 流程与 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);
}

它是如何工作的

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

• iOS: 使用本机Apple Sign-In（无需重定向URL，自动使用bundle ID）
• Android: 使用 OAuth 重定向流程与后端边缘函数 (需要服务 ID)
• Web: 使用 OAuth 弹出流程 (需要服务 ID 和当前页面 URL 作为重定向)

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