Supabase Apple Login - 一般设置

概述

本指南将帮助您将 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 流程 with Supabase。该函数：

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

Complete Implementation

The complete implementation is available in the example app’s supabaseAuthUtils.ts file.

Basic Usage

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);
}

How It Works

The helper function automatically handles platform-specific differences:

• iOS: Uses native Apple Sign-In (no redirect URL needed, uses bundle ID automatically)
• Android使用 OAuth 重定向流程（需要 Service ID）
• Web使用 OAuth 弹出窗口流程（需要 Service ID 和当前页面 URL 作为重定向）

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

从 Supabase Apple 登录 - 通用设置继续

如果您正在使用 Supabase Apple 登录 - 通用设置 来规划身份验证和帐户流程，连接它到 使用 @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的实现细节, 双因素认证 为双因素认证的实现细节