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

助手函数自动检测 Web 平台并配置一切

重要注意事项

服务 ID 配置

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

重定向URL

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

Supabase Client ID

在Supabase中，配置Apple提供商时，请使用以下信息:

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

If you’re also using iOS, you’ll need to provide both the App ID and Service ID in Supabase’s Client ID field (comma-separated).

更新助手函数

当使用助手函数时， 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 为使用 @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 的实现细节，以及双因素认证为双因素认证的实现细节