在 Web 上使用 Supabase Apple 登录

复制一个包含安装步骤和本插件的完整 Markdown 指南的配置提示。

前提条件

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

苹果登录 Web 设置 the
the Supabase Apple 登录 - 通用设置.

实现

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

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

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

重要说明

服务 ID 配置

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

重定向 URL

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

Supabase 客户端 ID

在 Supabase 中，配置 Apple 提供商：

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

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

更新助手函数

当使用助手函数时 authenticateWithAppleSupabase helper function 必须更新 以匹配您的 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,
  },
});

标题：“故障排除”

服务 ID 不匹配

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