跳过内容
Capgo - Capacitor实时更新 Capgo

苹果 Supabase 登录 (Android)

GitHub

前提条件

前提条件

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

步骤 1：部署后端 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 - Main edge function code
    • supabase/functions/apple-signin-callback/deno.json Copy to clipboard 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"

  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 以复制它。 Supabase Functions Apple Sign-In 回调

步骤 2：配置 Apple Developer Portal

Section titled “第二步：配置Apple开发者门户”

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

  1. 遵循Apple Login Android设置指南

    完成 Apple Login 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 Login Android 设置指南中的重定向 URL .该指南使用自定义后端服务器 URL。对于 Supabase 集成，您必须 must 精确匹配要求

  3. 收集所有必需的值

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

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

步骤 3：设置 Supabase 秘密

关于 Capgo 页面

步骤 3：设置 Supabase 秘密

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

    编码您的私钥

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

    复制到剪贴板

  2. Set secrets using Supabase CLI

    首先，编码您的 Apple 私钥 (.p8 文件) 到 base64:
    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

  3. 替代方案：在 Supabase 控制台中设置机密

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

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

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

当使用助手函数时，

targetLanguage

Simplified Chinese authenticateWithAppleSupabase pagePath 必须 更新以下值以匹配您的配置:

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

参见 完整的实现 以供参考。

步骤 5：测试集成

关于 Capgo 页面的部分标题：步骤 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. 边缘函数以code为令牌进行交换
    6. 边缘函数重定向到： your-app://path?id_token=...&access_token=...
    7. Android应用程序接收深度链接并处理身份令牌
    8. 应用程序使用身份令牌登录Supabase

Troubleshooting

解决问题

如果认证失败：

  • 认证失败:Redirect URI mismatch APPLE_REDIRECT_URI 重定向 URI 不匹配
  • : Verify the Return URL in Apple Developer Portal matches exactly with: 在 Apple Developer Portal 中确认 Return URL 与 AndroidManifest.xml secret BASE_REDIRECT_URL
  • secretDeep link not working supabase secrets list
  • : 检查是否有深度链接问题：: 检查 Supabase 控制台中的边缘功能日志以获取详细的错误消息
  • App 未接收到回调: 确保 onNewIntent 已在 MainActivity 中正确实现
  • Review example app code 如何工作

区域/页面: Capgo Builder / 原生云构建产品页面。角色: 小节或页面标题。见于：页面 premium-support.astro。角色：短 UI 标签或导航项。|区域/页面：Capgo Builder / 原生云构建产品页面。角色：小节或页面标题。|区域/页面：Live Updates 产品页面。角色：小节或页面标题。

小节标题 “如何工作”

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

  1. 初始化: 使用您的 Service ID 和后端重定向 URL 初始化插件
  2. OAuth 流程: 打开 Apple 的 OAuth 页面的浏览器/Chrome 自定义标签
  3. 后端回调：苹果重定向到您的 Supabase 边缘函数中进行授权 code
  4. 令牌交换：边缘函数使用Apple的token端点将code替换为令牌
  5. 深度链接重定向: 边缘函数重定向到您的应用程序
  6. Supabase 身份验证: 应用程序接收令牌并登录到 Supabase

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

继续使用 Supabase Apple Android 登录

继续使用 Supabase Apple Login on Android

如果您正在使用 苹果 Supabase 登录 (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 为 @capgo/capacitor-native-biometric 的实现细节 双因素认证 双因素认证的实现细节。