Supabase Apple Android 登录

前提条件

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

• 这个 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 Login Android 设置指南

   完成 Apple Login 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 Login Android 设置指南的重定向 URL .该指南使用自定义后端服务器 URL。对于 Supabase 集成，您必须 使用您的 Supabase 边缘函数 URL。 __CAPGO_KEEP_0__

   必须完全匹配

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

3. 收集所有必需值

   完成苹果设置指南后，您应该有:

   • APPLE_TEAM_ID:您的苹果开发者团队 ID
   • APPLE_KEY_ID:苹果开发者门户中的密钥 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" code android:scheme="capgo-demo-app" 在您的 AndroidManifest.xml, 然后您的深度链接将是 capgo-demo-app://path.

步骤 3: 设置 Supabase 秘密

现在我们需要配置环境变量（秘密）来为 Supabase Edge 功能。

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. alternative: 在 Supabase 控制台中设置机密

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

   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. 终端窗口

   npx cap sync android
   npx cap run android

2. 点击“使用 Apple 登录”按钮

   • 步骤 5：测试集成
   • 您应该在浏览器中看到 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. 安卓应用程序接收深度链接并处理身份令牌
   8. App使用Supabase进行身份令牌登录

故障排除

如果身份验证失败:

• URI重定向不匹配: 检查Apple Developer Portal中的Return URL与 APPLE_REDIRECT_URI 密钥
• 深度链接不工作: 检查 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

如何工作

在 Android 上，Apple Sign-In 使用 OAuth 重定向流:

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

由于 Apple 没有提供 native Android 支持，因此需要此流程

继续使用 Supabase Apple Login on Android

如果您正在使用 Supabase Apple Login on Android 来规划身份验证和帐户流程，连接它与 使用 @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 for the implementation detail in @capgo/capacitor-native-biometric, and Two-factor authentication Capgo