Web 端 Supabase Apple 登录

前提条件

本指南将帮助你在 Web 端将 Apple Sign-In 与 Supabase Authentication 进行集成。前提是你已完成以下步骤：

• 这个 Apple Login Web 配置
• 这个 Supabase Apple Login - 常规设置.

实现

完整实现位于 示例应用的 supabaseAuthUtils.ts 文件。本指南介绍其核心概念及使用方法。

使用 Authentication Helper

本指南中介绍的 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. 初始化：使用你的 Service ID 和当前页面 URL 作为重定向 URL 来初始化插件
2. OAuth 弹窗：打开包含 Apple OAuth 页面的弹窗
3. 用户身份验证：用户在弹窗中通过 Apple 进行身份验证
4. 身份令牌（Identity Token）：Apple 返回包含用户信息的身份令牌（JWT）
5. Supabase 身份验证：使用以下方式将身份令牌发送到 Supabase signInWithIdToken()

该辅助函数会自动检测 Web 平台并完成相应配置。

重要注意事项

Service ID 配置

• Web 端需要配置 Apple Service ID（与 Android 端相同）
• 必须在 Apple Developer Portal 中配置 Service ID，并填写正确的 Return URLs
• 请确保您的域名已添加到 Apple Developer Portal 的允许域名列表中

重定向 URL

• 在 Web 端，重定向 URL 会自动设置为 window.location.href (当前页面 URL)
• 此 URL 必须与 Apple Developer Portal 中配置的某个 Return URL 匹配
• 请确保在 Apple Developer Portal 中同时配置带斜杠和不带斜杠的 URL

Supabase Client ID

在 Supabase 中，用以下信息配置 Apple provider：

• Client ID: 你的 Apple Service ID（例如， com.example.app.service)

如果你同时使用 iOS，需要在 Supabase 的 Client ID 字段中同时提供 App ID 和 Service ID（用逗号分隔）。

更新 Helper Function

当使用 authenticateWithAppleSupabase helper function，你 必须 更新 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 不匹配: 请确保 Apple Developer Portal 与您的 code 中的 Service ID 一致
• 未配置 Return URL: 请确保已在 Apple Developer Portal 中配置当前页面的 URL（包括带和不带末尾斜杠的情况）
• 弹出窗口被拦截: 请检查浏览器设置 - 部分浏览器默认会拦截弹出窗口
• 域名未授权: 请确认您的域名已添加到 Apple Developer Portal 的允许域名列表中
• Supabase 配置: 请检查 Supabase Apple provider 设置中的 Service ID 是否配置正确
• 请查阅 示例应用 code 供参考

从 Web 端 Supabase Apple Login 继续

如果你正在使用 Web 端 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 中的实现细节， 双因素认证 有关双重身份验证的实现细节。