Supabase Apple 登录 (Web)

GitHub

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

前置条件

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

the Apple Login Web 设置
the Supabase Apple Login - 一般设置.

Implementation

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

Using the Authentication Helper

它 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弹出窗口流程:初始化
:该插件使用您的服务ID和当前页面URL作为重定向URL进行初始化OAuth弹出窗口
:打开一个弹出窗口显示Apple的OAuth页面: 用户在弹出窗口中使用 Apple 进行身份验证
身份令牌: Apple 返回一个包含用户信息的身份令牌 (JWT)
Supabase 身份验证: 使用以下方法将身份令牌发送到 Supabase signInWithIdToken()

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

重要注意事项

服务 ID 配置

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

重定向 URL

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

Supabase 客户端 ID

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

客户端 ID:您的 Apple Service ID（例如， com.example.app.service)

如果您还在使用iOS，您需要在Supabase的Client ID字段中提供App ID和Service ID（以逗号分隔）。

更新助手函数

当使用助手函数时，您必须 authenticateWithAppleSupabase 更新助手函数以匹配您的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 不匹配: 检查您在 Apple Developer Portal 和您的 code 中配置的服务 ID是否匹配
返回 URL 未配置: 确保您的当前页面 URL（含或不含尾随斜杠）在 Apple Developer Portal 中配置
弹出窗口被阻止: 检查浏览器设置 - 某些浏览器默认会阻止弹出窗口
域名不允许: 检查您在 Apple Developer Portal 中添加的域名是否允许
Supabase 配置: 确认您的 Service ID 在 Supabase Apple 提供商设置中正确配置
Review the 示例应用 code 参考

如果您正在使用 Supabase Apple Login on Web 来规划身份验证和帐号流程，连接它与使用 @capgo/capacitor-social-login 为 Using @capgo/capacitor-social-login 原生能力 @capgo/capacitor-social-login for the implementation detail in @capgo/capacitor-social-login, @capgo/capacitor-passkey for the implementation detail in @capgo/capacitor-passkey, @capgo/capacitor-native-biometric for the implementation detail in @capgo/capacitor-native-biometric, and 双因素认证双因素认证