Supabase Apple Login on Web

前提条件

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

• the Apple Login Web 设置
• the Supabase Apple Login - 一般设置.

实现

完整的实现可以在 示例应用的 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 popup 流程：

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

The helper function automatically detects the web platform and configures everything appropriately.

Important Notes

服务 ID 配置

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

重定向 URL

• 在 Web 上，重定向 URL 将自动设置为 window.location.href (当前页面 URL)
• 此 URL 必须与 Apple 开发者门户中配置的返回 URL 匹配
• 确保 Apple 开发者门户中配置了带有和不带有尾随斜杠的 URL

Supabase 客户端 ID

在 Supabase 中，配置您的 Apple 提供商：

• Client ID: 您的 Apple 服务 ID（例如 com.example.app.service)

如果您还在使用 iOS，则需要在 Supabase 的 Client ID field 中提供 App ID 和 Service ID（以逗号分隔）

更新助手函数

助手函数时，您 authenticateWithAppleSupabase 必须 更新 以匹配您的 Apple 服务 ID： clientId to match your 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 Developer Portal 中配置的实际 Apple Service ID（同一值）。

故障排除

如果身份验证失败：

• Service ID 不匹配: 确认您的 Service ID 在 Apple Developer Portal 和您的 code 中都匹配。
• 返回 URL 未配置: 确认您的当前页面 URL（含和不含尾随斜杠）已在 Apple Developer Portal 中配置。
• 弹出窗口被阻止: 检查浏览器设置 - 某些浏览器默认会阻止弹出窗口
• 域名不允许: 验证您的域名已添加到 Apple Developer Portal 中的允许域名列表
• Supabase 配置: 验证您的 Service ID 已正确配置在 Supabase Apple 提供商设置
• 查看示例应用程序 __CAPGO_KEEP_0__ example app code 从 Supabase Apple Login on Web 继续

标题为“从 Supabase Apple Login on Web 继续”

Capgo 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中实现细节 两因素认证 在两因素认证中实现细节