Supabase Apple 登录 Android

先决条件

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

• Supabase Apple 登录 - 常规设置。

:::注意[重要的] Apple 登录 Android 需要后端服务器，因为 Apple 不提供本机 Android 支持。我们将使用 Supabase Edge Function 作为后端。 :::

步骤1：部署后端边缘功能

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

1. 导航到您的 Supabase 项目目录

   cd your-project/supabase

2. 创建边缘函数（如果不存在）

   supabase functions new apple-signin-callback

3. 复制边缘功能代码

   示例应用程序 中提供了完整的边缘函数实现。

   将以下文件复制到您的项目中：

   • supabase/functions/apple-signin-callback/index.ts - 主沿功能代码
   • supabase/functions/apple-signin-callback/deno.json - 导入依赖关系映射（包括用于 JWT 签名的 jose 库）

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

   部署后，您将获得如下 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 进行复制。

   :::注意[保存此网址] 在下一步配置 Apple 开发者门户时，您将需要此 URL。 :::

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

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

:::注意[函数地址] 在继续之前，请确保您拥有步骤 1 中的 Supabase Edge Function URL。您需要它来在 Apple 开发者门户中配置返回 URL。 :::

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

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

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

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

   在 Apple 开发者门户中配置返回 URL 时（Apple 指南的步骤 6.9），请使用您的 Supabase 边缘函数 URL：

   https://your-project-ref.supabase.co/functions/v1/apple-signin-callback
   ```:::警告[重要：使用 Supabase 边缘函数 URL]
   **请勿**使用 [Apple 登录 Android 设置指南](/docs/plugins/social-login/apple/android/) 中的重定向 URL。该指南使用自定义后端服务器 URL。对于 Supabase 集成，您**必须**使用 Supabase 边缘函数 URL。
   :::
   
   :::警告[需要完全匹配]
   返回 URL 必须与您在此处配置的**完全**匹配。 Apple 对于重定向 URI 匹配非常严格。
   :::

3. 收集所有必需的值

   完成 Apple 设置指南后，您应该：

   • APPLE_TEAM_ID：您的 Apple 开发者团队 ID
   • APPLE_KEY_ID：来自 Apple 开发者门户的密钥 ID
   • APPLE_PRIVATE_KEY：您的.p8私钥文件（需要进行base64编码）
   • ANDROID_SERVICE_ID：您的 Apple 服务 ID（例如 com.example.app.service）
   • BASE_REDIRECT_URL：您的深层链接 URL（例如 capgo-demo-app://path）

   :::注意[深层链接 URL] BASE_REDIRECT_URL 是在 AndroidManifest.xml 中配置的深层链接方案。这是后端在身份验证后重定向的位置。

   深层链接的值取决于 android:scheme="capgo-demo-app" 代码。如果您在 AndroidManifest.xml 中设置了 android:scheme="capgo-demo-app"，那么您的深层链接将为 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. 替代方案：在 Supabase 仪表板中设置机密

   如果您更喜欢使用仪表板：

   1. 转到您的 Supabase 项目仪表板
   2. 导航至 边缘功能 → 设置 → 秘密
   3. 添加每个秘密变量及其值

Android应用程序配置

Apple 登录 Android 设置指南 已涵盖配置您的 Android 应用程序：

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

请确保您已完成这些步骤，然后再继续。您配置的深层链接方案将是步骤 3 中的 BASE_REDIRECT_URL。

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

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

实施

完整的实现可在 示例应用程序的 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：
   
   ```typescript
   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 的值相同）。 :::

请参阅完整实现 以供参考。

步骤 5：测试集成

1. 构建并运行您的 Android 应用程序

   npx cap sync android
   npx cap run android

2. 测试身份验证流程

   • 点击“使用 Apple 登录”按钮
   • 您应该在浏览器中看到 Apple OAuth 页面
   • 身份验证后，您应该被重定向回您的应用程序
   • 检查控制台日志是否有任何错误

3. 验证流程

   完整的流程应该是：

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

故障排除

如果认证失败：

• 重定向 URI 不匹配：验证 Apple 开发者门户中的返回 URL 与 APPLE_REDIRECT_URI 秘密完全匹配
• 深层链接不起作用：检查 AndroidManifest.xml 意图过滤器是否与您的 BASE_REDIRECT_URL 匹配
• 缺少机密：使用“supabase 机密列表”验证所有机密是否设置正确
• 令牌交换失败：检查 Supabase 仪表板中的边缘功能日志以获取详细的错误消息
• 应用程序未收到回调：确保 onNewIntent 在 MainActivity 中正确实现
• 查看示例应用程序代码以供参考

它是如何工作的

在 Android 上，Apple 登录使用 OAuth 重定向流：

1. 初始化：插件使用您的 Service ID 和后端重定向 URL 进行初始化
2. OAuth 流程：打开带有 Apple 的 OAuth 页面的浏览器/Chrome 自定义选项卡
3. 后端回调：Apple 使用授权码重定向到您的 Supabase Edge Function
4. 令牌交换：边缘函数使用 Apple 的令牌端点交换令牌的代码
5. 深层链接重定向：边缘功能使用身份令牌重定向回您的应用程序
6. Supabase 身份验证：应用程序收到令牌并登录 Supabase

此流程是必要的，因为 Apple 不提供对使用 Apple 登录的本机 Android 支持。