Supabase Apple 登录 (Web)

前置条件

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

• 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. 用户身份验证：用户在弹出窗口中使用 Apple 进行身份验证
4. 身份令牌：Apple 返回包含用户信息的身份令牌（JWT）
5. Supabase 认证: 使用 Supabase 发送身份令牌 signInWithIdToken()

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

重要说明

服务 ID 配置

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

重定向 URL

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

Supabase 客户端 ID

在 Supabase 中，配置 Apple 提供商：

• 客户端 ID：您的 Apple 服务 ID（例如如果您还在使用 iOS，则需要在 Supabase 的客户端 ID 字段中提供 App ID 和服务 ID（以逗号分隔） com.example.app.service)

更新助手函数

标题：更新助手函数

使用 authenticateWithAppleSupabase 助手函数时，您 必须 更新 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 中配置的相同值）。

故障排除

如果认证失败：

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