Supabase Apple 网页登录

先决条件

本指南将帮助您将 Apple 登录与 Supabase 网络身份验证集成。假设您已经完成：

实施

完整的实现可在示例应用程序的 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 登录使用 OAuth 弹出流程：

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

帮助程序功能会自动检测网络平台并适当配置所有内容。

重要提示

服务ID配置

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

重定向网址

在网络上，重定向 URL 自动设置为 window.location.href （当前页面 URL）
这必须与 Apple 开发者门户中配置的返回 URL 之一匹配
确保在 Apple 开发者门户中配置带有和不带有尾部斜杠的 URL

Supabase 客户端 ID

在 Supabase 中，配置您的 Apple 提供程序：

客户端 ID：您的 Apple 服务 ID（例如 com.example.app.service）

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

更新辅助函数

使用 authenticateWithAppleSupabase 辅助函数时，您必须更新 clientId 以匹配您的 Apple 服务 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 服务 ID（与您在 Apple 开发者门户中配置的值相同）。 :::

故障排除

如果认证失败：- 服务 ID 不匹配：验证您的服务 ID 在 Apple 开发者门户和您的代码中匹配

未配置返回 URL：确保在 Apple 开发者门户中配置当前页面 URL（带或不带尾部斜杠）
弹出窗口被阻止：检查浏览器设置 - 某些浏览器默认情况下会阻止弹出窗口
不允许域：验证您的域是否已添加到 Apple 开发者门户中允许的域中
Supabase 配置：验证您的服务 ID 是否在 Supabase Apple 提供商设置中正确配置
查看示例应用程序代码以供参考