Supabase Apple Login on Web

前提条件

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

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

实现

完整实现可在Capacitor的GitHub仓库中找到。 示例应用 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 Developer Portal 中配置正确的 Return URLs
• 确保您的域名已添加到 Apple Developer Portal 中的允许域名列表中

重定向 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 参见

从 Supabase Apple Login on Web 开始

如果您正在使用 Supabase Apple Login on Web 来规划身份验证和帐户流程，连接它 使用 @capgo/capacitor-social-login 用于在 Using @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 的实现细节， 双因素认证 对于双因素认证的实现细节。