Supabase Apple Login - General Setup

概述

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

先决条件

在开始之前，请确保您已经：

1. 创建了一个 Supabase 项目

2. 阅读了 Apple 登录通用设置 Apple OAuth 凭证设置指南

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

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

   注意

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

   For iOS, the client ID is the same as your app ID. For Android and Web, the client ID is the same as your service ID. You will use them in step 7 of this guide.

在 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 按钮

   

   注意

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

Voilà,您现在已启用 Supabase 身份验证的 Apple Sign-In 🎉

使用身份验证助手

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

• 该函数：
• 初始化Apple Sign-In与平台特定的配置
• 处理身份验证流程（iOS原生，Android/Web中的OAuth重定向）
• 从Apple中提取身份令牌

完整实现

完整实现 完整实现可在 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 重定向流程（需要 Service ID）
• Web: 使用 OAuth popup 流程（需要 Service ID 和当前页面 URL 作为重定向）

函数返回 Apple 提供的身份令牌，然后使用 Supabase 进行身份验证 supabase.auth.signInWithIdToken().

从 Supabase Apple Login - General Setup 中继续

如果您正在使用 Supabase Apple Login - General Setup 来规划身份验证和帐户流程，连接它到 使用 @capgo/capacitor-social-login 使用 @capgo/capacitor-social-login 使用 @capgo/capacitor-social-login 使用 @capgo/capacitor-passkey 使用 @capgo/capacitor-native-biometric 使用 @capgo/capacitor-social-login 使用 @capgo/capacitor-passkey 对于 @capgo/capacitor-native-biometric 的实现细节 双因素认证 对于双因素认证的实现细节