Supabase Apple Android 登录

前提条件

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

• the Supabase Apple 登录 - 通用设置.

重要

Apple Sign-In 在 Android 上需要一个后端服务器，因为 Apple 没有提供 native Android 支持。我们将使用 Supabase Edge Function 作为后端。

步骤 1：部署后端 Edge Function

首先，我们需要部署 Supabase Edge Function 来处理 Apple OAuth 回调。

1. 前往您的 Supabase 项目目录

   cd your-project/supabase

2. 创建边缘功能 (如果不存在)

   supabase functions new apple-signin-callback

3. 复制边缘功能 code

   完整的边缘功能实现可在示例应用中找到 复制以下文件到您的项目:.

   - 主边缘功能 __CAPGO_KEEP_0__

   • supabase/functions/apple-signin-callback/index.ts Copy the edge function code
   • supabase/functions/apple-signin-callback/deno.json - 依赖项导入映射（包含 jose - JWT 签名的库

4. 配置 JWT 验证

   Apple OAuth 回调端点必须是公开的（不需要身份验证），因为 Apple 将重定向到它。更新您的 supabase/config.toml 文件：

   [functions.apple-signin-callback]
   enabled = true
   verify_jwt = false  # Important: Set to false for public OAuth callback
   import_map = "./functions/apple-signin-callback/deno.json"
   entrypoint = "./functions/apple-signin-callback/index.ts"

   重要

   设置 verify_jwt = false 使此端点公开。由于 Apple 的 OAuth 重定向不包含 Supabase 身份验证头，因此这是必需的。端点验证 OAuth 流程本身。

5. 部署函数

   supabase functions deploy apple-signin-callback

6. 获取您的函数 URL

   部署后，您将获得类似于：

   https://your-project-ref.supabase.co/functions/v1/apple-signin-callback

   如果您无法找到它，请尝试以下步骤：

   1. 打开 https://supabase.com/dashboard/project/YOUR_PROJECT_REF/functions
   2. 点击 apple-signin-callback 函数 URL 以复制它。

   保存此 URL

   您将在下一步中在 Apple 开发者门户中配置时需要此 URL。

步骤 2：配置 Apple 开发者门户

现在我们需要在后端 URL 中配置 Apple 开发者门户并获取所需的所有值。

功能 URL

确保您在步骤 1 中获得了 Supabase Edge 功能 URL，才能继续。您需要它来配置 Apple 开发者门户中的 Return URL。

1. 遵循 Apple 登录 Android 设置指南

   完成 Apple 登录 Android 设置指南 到：

   • 创建服务 ID
   • 生成私钥 (.p8 文件)
   • 获取您的团队 ID 和密钥 ID
   • 配置返回 URL

2. 在 Apple 开发者门户中设置返回 URL

   在 Apple 指南 (第 6.9 步) 中配置返回 URL 时，请使用您的 Supabase 边缘函数 URL：

   https://your-project-ref.supabase.co/functions/v1/apple-signin-callback

   重要：使用 Supabase 边缘函数 URL

   不要 使用来自 Apple 登录 Android 设置指南的重定向 URL。该指南使用自定义后端服务器 URL。对于 Supabase 集成，您 必须 使用您的 Supabase 边缘函数 URL 代替。

   必须完全匹配

   返回 URL 必须完全匹配 完全匹配 您在这里配置的内容必须完全匹配。苹果对重定向 URI 匹配非常严格。

3. 收集所有必需值

   完成苹果设置指南后，您应该有以下内容：

   • APPLE_TEAM_ID:您的苹果开发者团队 ID
   • APPLE_KEY_ID:苹果开发者门户中的密钥 ID
   • APPLE_PRIVATE_KEY: 您的 .p8 私钥文件（需要进行 base64 编码）
   • ANDROID_SERVICE_ID: 您的 Apple Service ID（例如， com.example.app.service)
   • BASE_REDIRECT_URL: 您的深度链接 URL（例如， capgo-demo-app://path)

   深度链接 URL

   是您在 BASE_REDIRECT_URL 中配置的深度链接方案。 这是后端在身份验证后将重定向到的位置。 AndroidManifest.xml您的深度链接值取决于

   。 如果您已设置 android:scheme="capgo-demo-app" code android:scheme="capgo-demo-app" 在您的 AndroidManifest.xml然后您的深度链接将是 capgo-demo-app://path.

步骤 3: 设置 Supabase 秘密

现在我们需要配置 Supabase Edge Function 的环境变量（秘密）。

1. 编码您的私钥

   首先，编码您的 Apple 私钥 (.p8 文件) 到 base64:

   base64 -i AuthKey_XXXXX.p8

   复制整个输出（它是一个单独的长字符串）。

2. 使用 Supabase 设置秘密 CLI

   supabase secrets set APPLE_TEAM_ID=your_team_id
   supabase secrets set APPLE_KEY_ID=your_key_id
   supabase secrets set APPLE_PRIVATE_KEY=your_base64_encoded_key
   supabase secrets set ANDROID_SERVICE_ID=your.service.id
   supabase secrets set BASE_REDIRECT_URL=your-app://path
   supabase secrets set APPLE_REDIRECT_URI=https://your-project-ref.supabase.co/functions/v1/apple-signin-callback

   替换占位符

   将第 2 步中的实际值替换所有占位符值。

3. 如果您更喜欢使用控制台:

   如果您更喜欢使用控制台:

   1. 前往您的 Supabase 项目控制台
   2. 导航到 边缘功能 → 设置 → 机密
   3. 为每个机密变量添加其值

安卓应用配置

The 苹果登录安卓设置指南 已经涵盖了配置您的安卓应用:

• 添加深度链接意图过滤器到 AndroidManifest.xml
• 添加 onNewIntent 处理器到 MainActivity.java

确保您已经完成了这些步骤，深度链接方案在那里配置将在步骤3中使用。 BASE_REDIRECT_URL 步骤4：使用身份验证助手

标题：步骤4：使用身份验证助手

现在您可以在应用程序中使用身份验证助手 code。

实现

完整的实现可在 示例应用程序的 supabaseAuthUtils.ts 文件中找到。

使用身份验证助手

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);
}

更新助手函数

当使用 authenticateWithAppleSupabase 帮助函数, 您 必须 更新以下值以匹配您的配置:

1. 更新 redirectUrl - 将其设置为您的 Supabase 边缘功能 URL:

   const redirectUrl = platform === 'android'
     ? 'https://your-project-ref.supabase.co/functions/v1/apple-signin-callback'
     : undefined;

2. 更新 clientId - 将其设置为您的 Apple 服务 ID:

   await SocialLogin.initialize({
     apple: {
       clientId: isIOS
         ? undefined // iOS uses bundle ID automatically
         : 'your.service.id.here', // Your Apple Service ID for Android
       redirectUrl: redirectUrl,
     },
   });

   重要

   替换 'your.service.id.here' 使用您的实际Apple服务ID（与步骤3中使用的相同值） ANDROID_SERVICE_ID 步骤3中使用的值

参见 完整实现 参考

步骤5：测试集成

1. 步骤5：测试集成

   npx cap sync android
   npx cap run android

2. 复制到剪贴板

   • 测试身份验证流程
   • 您应该在浏览器中看到 Apple OAuth 页面
   • 您成功验证后应该会被重定向回您的应用
   • 检查控制台日志以查看是否有错误

3. 验证流程

   完整的流程应该是：

   1. 用户点击“使用 Apple 登录”
   2. 应用程序打开浏览器并显示 Apple OAuth
   3. 用户使用 Apple 进行验证
   4. Apple 重定向到： https://your-project-ref.supabase.co/functions/v1/apple-signin-callback
   5. 边缘函数用 code 交换令牌
   6. 边缘函数重定向到： your-app://path?id_token=...&access_token=...
   7. Android 应用程序接收深度链接并处理身份令牌
   8. __CAPGO_KEEP_0__

__CAPGO_KEEP_1__

__CAPGO_KEEP_2__

• __CAPGO_KEEP_3__如果身份验证失败: APPLE_REDIRECT_URI URI 重定向不匹配
• : 确认 Apple Developer Portal 中的 Return URL 与以下内容完全匹配密钥 AndroidManifest.xml 深度链接未工作 BASE_REDIRECT_URL
• : 确认意图过滤器与您的 supabase secrets list
• Token exchange fails: 检查 Supabase 控制台中的边缘函数日志以获取详细的错误消息
• App doesn’t receive callback: 确保 onNewIntent is properly implemented in MainActivity
• Review the example app code for reference

How It Works

On Android, Apple Sign-In uses an OAuth redirect flow:

1. Initialization: 使用您的 Service ID 和后端重定向 URL 初始化插件
2. OAuth Flow: 打开 Apple 的 OAuth 页面的浏览器/Chrome 自定义标签
3. Backend Callback: Apple 重定向到您的 Supabase Edge Function 中的授权 code
4. Token Exchange: 使用 Apple 的 token 端点交换 code
5. Deep Link Redirect: Edge Function 重定向回您的应用程序，带有身份令牌
6. Supabase Authentication: 应用程序接收令牌并登录到 Supabase

This flow is necessary because Apple doesn’t provide native Android support for Sign in with Apple.

继续使用 Supabase Apple 登录（Android）

如果您正在使用 Supabase Apple 登录（Android） 来规划身份验证和帐户流程， Using @capgo/capacitor-social-login 使用 @capgo/capacitor 社交登录 为使用 @capgo/capacitor 社交登录的原生能力 @capgo/capacitor 社交登录 为 @capgo/capacitor 社交登录的实现细节 @capgo/capacitor Passkey 为 @capgo/capacitor Passkey 的实现细节 for the implementation detail in @capgo/capacitor-native-biometric, and Two-factor authentication Capgo