Supabase Apple Web 登录

前提条件

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

• 这个 Apple Login Web 设置
• 这个 Supabase Apple Login - 一般设置.

实施

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

使用身份验证助手

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

原理

Section titled “How It Works”

1. InitializationInitialization
2. :初始化
3. :使用您的 Service ID 和当前页面 URL 作为重定向 URL 初始化插件
4. 身份验证令牌: Apple 返回一个包含用户信息的身份验证令牌 (JWT)
5. Supabase 身份验证: 将身份验证令牌发送到 Supabase signInWithIdToken()

帮助函数

: 帮助函数自动检测 Web 平台并配置所有内容

重要注意事项

• 服务 ID 配置
• Web 需要您的 Apple 服务 ID (与 Android 相同)
• 服务 ID 必须在 Apple 开发者门户中配置正确的返回 URL

重定向 URL

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

Supabase 客户端 ID

在 Supabase 中，配置 Apple 提供商时，请使用以下内容：

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

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

更新助手函数

使用助手函数时， authenticateWithAppleSupabase 您需要 必须 更新到匹配您的Apple服务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,
  },
});

替换

Replace 'your.service.id.here' 使用您的实际 Apple 服务 ID（与您在 Apple 开发者门户中配置的相同值）。

故障排除

如果认证失败:

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

继续使用 Supabase Apple 登录（Web）

如果您正在使用 Supabase Apple 登录（Web） 来规划身份验证和帐户流程，连接它到 使用 @capgo/capacitor-social-login 为使用 @capgo/capacitor-social-login 的原生能力 @capgo/capacitor-社交登录 为 @capgo/capacitor 社交登录实现细节 @capgo/capacitor-passkey 为 @capgo/capacitor-passkey 实现细节 @capgo/capacitor-native-biometric 为 @capgo/capacitor-native-biometric 实现细节，以及 双因素身份验证 为双因素身份验证实现细节。