苹果 Supabase 登录 - 通用设置

概述

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

前提条件

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

1. 创建了一个Supabase项目

2. 已阅读 上下文：HTML文本片段来自更长的Capgo UI字符串（父键`read_the_style_guide`）。页面/区域：Capgo营销网站。角色：网站副本句子。见于：contributing.astro页面。消息键`read_the_style_guide`（阅读风格指南）。 Apple OAuth 配置指南

3. 按照各个平台的指南配置 Apple OAuth 凭证以便于您的目标平台:

   • Android 配置
   • iOS 配置
   • Web 配置

   注意

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

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

在 Supabase 中启用 Apple OAuth 提供者

1. 前往您的 Supabase 控制台

2. 点击您的项目

   

3. 请前往 Authentication 菜单

   

4. 点击 Providers 选项卡

   

5. 提供者 Apple Supabase Apple 提供者

   

6. 启用该 Apple 服务提供商

   

7. 填写客户端 ID 配置:

   注意

   如果您正在使用 iOS 的 Apple 登录，客户端 ID 与您的应用 ID 相同。 如果您正在使用 Android 或 Web 的 Apple 登录，客户端 ID 与您的服务 ID 相同。 如果您正在使用两者，请提供应用 ID 和服务 ID。

   

8. 点击 Save 按钮

   

   注意

   您 不需要 设置 Secret key (for OAuth).我们将为Apple登录进行自定义后端实现。

Voilà，您现在已经启用了Apple Sign-In与Supabase身份验证

使用身份验证助手

完整的实现包括一个辅助函数 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重定向流程（需要Service ID）
• Web: 使用OAuth弹出流程（需要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-social-login的实现细节 @capgo/capacitor-passkey 为@capgo/capacitor-passkey的实现细节 @capgo/capacitor-native-biometric 为@capgo/capacitor-native-biometric的实现细节，并且 双因素身份验证 为双因素身份验证的实现细节。