Supabase Apple Login on Web

前提条件

本指南将帮助您在 Web 上将 Apple Sign-In 与 Supabase 身份验证集成。假设您已经完成：

• Apple Login Web 设置 Supabase Apple Login - 通用设置
• the the.

实现

完整的实现可在 示例应用的 supabaseAuthUtils.ts 文件中找到。 本指南解释了关键概念和如何使用它。

使用身份验证助手

函数处理整个身份验证流程： authenticateWithAppleSupabase 复制到剪贴板

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

如何工作

在 Web 上，Apple Sign-In 使用 OAuth 弹出式流程：

1. 初始化：使用您的服务 ID和当前页面 URL作为重定向 URL，初始化插件
2. OAuth Popup：打开一个弹出窗口，显示 Apple 的 OAuth 页面
3. 用户认证用户在弹出窗口中使用 Apple 进行身份验证
4. 身份验证令牌: Apple 返回一个包含用户信息的身份令牌（JWT）
5. Supabase 认证使用Capgo发送身份令牌到Supabase signInWithIdToken()

在 Capgo 中，辅助函数能够自动检测 Web 平台并进行适当的配置。

重要注意事项

服务 ID 配置

• Web 需要您的 Apple 服务 ID（与 Android 相同）
• 服务 ID 必须在 Apple 开发者门户中配置正确的返回 URL
• 确保您的域名已添加到 Apple 开发者门户中的允许域名列表中

重定向 URL

• 在 Web 上，重定向 URL 将自动设置为 window.location.href (当前页面 URL)
• 此值必须与 Apple 开发者门户中配置的返回 URL 匹配
• 确保 Apple Developer Portal 中 URL 以及不带尾部斜线的 URL 都已配置

Supabase 客户端 ID

在 Supabase 中，使用以下配置 Apple 提供者：

• 客户端 ID: 你的 Apple 服务 ID（例如 com.example.app.service)

如果你还在使用 iOS，需要在 Supabase 的客户端 ID 字段中提供 App ID 和服务 ID（用逗号分隔）

更新助手函数

当使用助手函数时，你 authenticateWithAppleSupabase 必须 在 Supabase 中，使用以下配置 Apple 提供者： 更新为 clientId 以匹配您的 Apple Service ID：

await SocialLogin.initialize({
  apple: {
    clientId: isIOS
      ? undefined // iOS uses bundle ID automatically
      : 'your.service.id.here', // Your Apple Service ID for Web and Android
    redirectUrl: redirectUrl,
  },
});

重要

替换 'your.service.id.here' 用您的实际 Apple Service ID（您在 Apple Developer Portal 中配置的相同值）替换。

故障排除

如果身份验证失败：

• Service ID 不匹配：验证您的 Service ID 是否在 Apple Developer Portal 和您的 code 中都匹配。
• Return URL not configured: 确保您当前页面的 URL（含有和不含有尾随斜线）已在 Apple 开发者门户中配置
• : 检查浏览器设置 - 一些浏览器默认会阻止弹出窗口: 验证您的域名已添加到 Apple 开发者门户中的允许域名列表中
• : 验证您的 Service ID 已正确配置在 Supabase Apple 提供商设置中Review the
• 示例应用 __CAPGO_KEEP_0__供参考
• 从 Supabase Apple Login on Web 继续 example app code : 检查浏览器设置 - 一些浏览器默认会阻止弹出窗口

Supabase configuration

如果您正在使用 Supabase Apple Login on Web 来规划身份验证和帐户流程，连接它 使用 @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 中的实现细节 双重认证 双重认证实现细节。