Supabase Apple Login on Web

前置条件

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

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

Implementation

完整的实现可在 示例应用程序的 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);
}

如何工作

如何工作

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

助手函数自动检测 Web 平台并配置一切

重要注意事项

服务 ID 配置

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

重定向 URL

• 在 Web 上，重定向 URL 将自动设置为 window.location.href (当前页面 URL)
• 必须与 Apple Developer Portal 中配置的 Return URLs 匹配
• 确保在 Apple Developer Portal 中配置了带有和不带有尾随斜杠的 URL

Supabase Client ID

在 Supabase 中，配置 Apple 提供商如下:

• 客户端 ID:您的 Apple Service ID（例如， com.example.app.service)

If you’re also using iOS, you’ll need to provide both the App ID and Service ID in Supabase’s Client ID field (comma-separated).

更新助手函数

当使用 authenticateWithAppleSupabase 助手函数 必须 更新到匹配您的 Apple Service ID: clientId 复制到剪贴板

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

替换

context 'your.service.id.here' 使用您的实际 Apple 服务 ID（您在 Apple Developer Portal 中配置的相同值）。

故障排除

如果认证失败：

• 服务 ID 不匹配: 检查您的服务 ID 是否在 Apple Developer Portal 和您的 code 中匹配。
• 返回 URL 未配置: 确保您的当前页面 URL（含有和不含有尾随斜杠）在 Apple Developer Portal 中配置。
• 弹出窗口被阻止: 检查浏览器设置 - 一些浏览器默认会阻止弹出窗口。
• 域名不允许: 检查您的域名是否在 Apple Developer Portal 中添加到允许的域名列表中。
• Supabase 配置: 确认您的 Service ID 在 Supabase Apple 提供商设置中正确配置
• Review the 示例应用 code 供参考

继续使用 Supabase Apple Login on Web

如果您正在使用 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 的实现细节，以及 双因素认证 为双因素认证的实现细节