Capgo - Androidアプリのリアルタイム更新
Capgo - Live Updates for Capacitor Apps Capgo

Android用の Supabase Apple ID ログインから続ける

Apple ID ログイン GitHub リポジトリ

前提条件

必要な前提条件

このガイドでは、AndroidでApple Sign-InをSupabase Authenticationと統合する方法について説明します。以下のステップを既に完了していることを前提としています。

ステップ 1: バックエンド エッジ関数をデプロイする

ステップ 1: バックエンド エッジ関数をデプロイする

最初に、Apple OAuthコールバックを処理するためのSupabase Edge Functionをデプロイする必要があります。

  1. プロジェクトディレクトリに移動してください

    ターミナル画面
    cd your-project/supabase

  2. エッジ関数を作成 存在しない場合

    ターミナル画面
    supabase functions new apple-signin-callback

  3. エッジ関数 code をコピー

    完全なエッジ関数実装は、 例のアプリ.

    プロジェクトに次のファイルをコピー

    • supabase/functions/apple-signin-callback/index.ts - メインエッジ関数 code
    • supabase/functions/apple-signin-callback/deno.json - 依存関係のインポートマップ ( jose JWT署名用のライブラリ

  4. JWT検証を設定

    Apple OAuthのコールバックエンドポイントは、Appleがリダイレクトするため、パブリックに設定する必要があります (認証不要)。Apple OAuthのコールバックエンドポイントをパブリックに設定するには、 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を取得

    After deployment, you’ll get a URL like:

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

    If you cannot find it, you can do the following:

    1. Open https://supabase.com/dashboard/project/YOUR_PROJECT_REF/functions
    2. __CAPGO_KEEP_0__をクリック apple-signin-callback function URLをコピー Supabase Functions Apple Sign-In Callback

Step 2: Apple Developer Portalの設定

Step 2: Apple Developer Portalの設定

Apple Developer Portalの設定に必要なのは、バックエンドURLと必要な値を取得することです。

  1. Apple Login Androidの設定ガイドを参照してください。

    Apple Login Androidの設定ガイドを完了してください。 Apple Developer Portalの設定に必要なのは、以下のステップを実行することです。 Service IDを作成する

    • .p8ファイルとしてプライベートキーを生成する
    • Team IDとKey IDを取得する
    • Return URLの設定
    • Configure the Return URL

  2. Apple Developer ポータルで戻り URL を設定してください

    Apple Developer ポータルで戻り URL を設定する際 (Apple ガイドのステップ 6.9 を参照)、Supabase Edge Function URL を使用してください:

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

    重要: Supabase Edge Function URL を使用してください

    使用しないでください Apple Login Android セットアップ ガイドから取得したリダイレクト URL 。そのガイドではカスタムバックエンドサーバー URL を使用しています。Supabase の統合の場合、必ず Supabase Edge Function URL を使用してください。 厳密に一致させる必要があります 厳密に一致させる必要があります

  3. 必要な値をすべて収集する

    Appleのセットアップガイドを完了した後、以下の値を取得する必要があります。

    • APPLE_TEAM_ID: Apple Developer Team ID
    • APPLE_KEY_ID: Apple Developer Portalから取得するKey ID
    • APPLE_PRIVATE_KEY: .p8プライベートキーファイル(ベース64エンコードが必要)
    • ANDROID_SERVICE_ID: Your Apple Service ID (e.g., com.example.app.service)
    • BASE_REDIRECT_URL: Your deep link URL (e.g., capgo-demo-app://path)

Step 3: Supabase Secretsを設定する

Step 3: Supabase Secretsのセクション

ここでは、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

  3. 代替: Supabase ダッシュボードでシークレットを設定

    ダッシュボードを使用する場合は

    1. Supabase プロジェクト ダッシュボードに移動
    2. Navigate to エッジ関数 → 設定 → シークレット
    3. 各シークレット変数と値を追加

セクションのタイトルは “Step 4: Authentication Helper の使用”

Capgo の Authentication Helper をアプリ内で使用できます。

Now you can use the authentication helper in your app code.

__CAPGO_KEEP_0__

実装

完全な実装は、 のファイルにあります。 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);
}

ヘルパー関数を使用する場合、

する必要があります

__CAPGO_KEEP_0__ authenticateWithAppleSupabase __CAPGO_KEEP_1__ __CAPGO_KEEP_2__ 以下の値をあなたの設定に合わせて更新してください:

  1. 更新 redirectUrl - この値をあなたの Supabase Edge Function URL に設定してください:

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

  2. 更新 clientId - この値をあなたの Apple Service 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,
      },
    });

See the complete implementation for reference.

Step 5:

Section titled “Step 5: Test the Integration”

  1. Androidアプリをビルドして実行

    ターミナル画面
    npx cap sync android
    npx cap run android

  2. 認証フローをテスト

    • Appleサインインボタンをタップ
    • Apple OAuth画面がブラウザで表示されるはずです
    • Appleサインイン後に、ユーザーはアプリにリダイレクトされるはずです
    • コンソールログを確認してエラーがないか

  3. フローの確認

    完了したフローは

    1. ユーザーが「Appleでサインイン」をタップ
    2. アプリがApple OAuthのブラウザを開きます
    3. ユーザーがAppleで認証
    4. Appleがリダイレクト https://your-project-ref.supabase.co/functions/v1/apple-signin-callback
    5. Edge関数がcodeをトークンに交換
    6. Edge関数がリダイレクト your-app://path?id_token=...&access_token=...
    7. Androidアプリがデープリンクを受け取り、アイデンティティトークンを処理
    8. アプリがSupabaseにアイデンティティトークンでサインイン

トラブルシューティング

トラブルシューティング

認証が失敗した場合:

  • リダイレクト URI の一致性が不正: Apple Developer Portal の Return URL が正確に一致していることを確認してください APPLE_REDIRECT_URI secret
  • デープ リンクが機能しない: AndroidManifest.xml intent フィルターが正しく設定されていることを確認してください BASE_REDIRECT_URL
  • シークレットが欠落している: supabase secrets list
  • シークレットが正しく設定されていることを確認してくださいトークン エクスチェンジが失敗した場合:
  • アプリがコールバックを受信しません: 確認する onNewIntent MainActivity にて、正しく実装されていますか
  • 参考のため、例のアプリを確認してください __CAPGO_KEEP_0__ example app code セクション：Capacitor のしくみ

Android では、Apple Sign-In は OAuth リダイレクト フローを使用します：

初期化

: プラグインは、サービス ID とバックエンド リダイレクト URL を使用して初期化されます

  1. OAuth フローOAuth Flow
  2. InitializationAppleのOAuthページにブラウザ/Chromeカスタムタブを開きます。
  3. バックエンドコールバックAppleは、認証用のcodeを含むあなたのSupabase Edge Functionにリダイレクトします。
  4. トークン交換エッジ関数は、Appleのトークンエンドポイントを使用してcodeをトークンに交換します。
  5. ディープリンクリダイレクトエッジ関数は、アイデンティティトークンを含むあなたのアプリにリダイレクトします。
  6. Supabaseへのサインインアプリはトークンを受け取り、Supabaseにサインインします。

このフローは、AppleがSign in with AppleのネイティブAndroidサポートを提供していないため必要です。

Supabase Apple Login on Androidから続けてください。

「Supabase Apple Login on Androidから続けてください。」というセクション

If you are using Supabase Apple Login on Android to plan authentication and account flows, connect it with Using @capgo/capacitor-social-login for the native capability in Using @capgo/capacitor-social-login @capgo/capacitor-social-login for the implementation detail in @capgo/capacitor-social-login @capgo/capacitor-passkey for the implementation detail in @capgo/capacitor-passkey @capgo/capacitor-native-biometric for the implementation detail in @capgo/capacitor-native-biometric, and Two-factor authentication __CAPGO_KEEP_0__の実装詳細については、2要素認証の詳細を参照してください。