AndroidでSupabase Apple Login

前提条件

このガイドでは、AndroidでApple Sign-InをSupabase Authenticationと連携する方法を説明します。以下はすでに完了している前提です。

• この Supabase Appleログイン - 基本設定.

重要

AppleはAndroid向けのネイティブサポートを提供していないため、AndroidでApple Sign-Inを利用するにはバックエンドサーバーが必要です。ここでは、バックエンドとしてSupabase Edge Functionを使用します。

ステップ 1: バックエンドのEdge Functionをデプロイする

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

1. Supabaseプロジェクトのディレクトリに移動します

   cd your-project/supabase

2. Edge Functionを作成する (存在しない場合)

   supabase functions new apple-signin-callback

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

   エッジ関数の完全な実装はこちらから確認できます： サンプルアプリ.

   以下のファイルをプロジェクトにコピーしてください：

   • supabase/functions/apple-signin-callback/index.ts - メインのエッジ関数 code
   • supabase/functions/apple-signin-callback/deno.json - 依存関係用のimport map（以下を含む） jose JWT署名用ライブラリ

4. JWT検証の設定

   The Apple OAuth callback endpoint must be public (no authentication required) because Apple will redirect to it. Update your 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

   URLが見つからない場合は、以下の手順を試してください：

   1. 開く https://supabase.com/dashboard/project/YOUR_PROJECT_REF/functions
   2. 次の apple-signin-callback URLをコピーするには関数をクリックしてください。

   このURLを保存してください

   次のステップでApple Developer Portalを設定する際に、このURLが必要になります。

ステップ 2: Apple Developer Portalの設定

次に、バックエンドURLを使用してApple Developer Portalを設定し、必要な値をすべて取得する必要があります。

関数URL

先に進む前に、ステップ1で取得した Supabase Edge Function URL を用意してください。Apple Developer Portal で Return URL を設定する際に必要になります。

1. Apple Login Android セットアップガイドに従って、

   次の Apple Login Android セットアップガイド to:

   • Service ID の作成
   • プライベートキー (.p8 ファイル) の生成
   • Team ID と Key ID の取得
   • Return URL の設定

2. Apple Developer Portal で Return URL を設定

   Apple のガイド（ステップ 6.9）に従って Apple Developer Portal で Return URL を設定する際は、Supabase Edge Function URL を使用してください：

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

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

   以下は 使用しないでください: Apple Login Android SetupガイドにあるリダイレクトURLです。このガイドはカスタムバックエンドサーバーのURLを使用しています。Supabaseと連携する場合は、 必ず 代わりにSupabase Edge FunctionのURLを使用してください。

   完全一致が必要です

   Return URLは、 ここで設定した内容と 完全に一致している必要があります。AppleはリダイレクトURIの一致に対して非常に厳格です。

3. 必要な値をすべて用意する

   Appleの設定ガイド完了後、以下の値が手元にあるはずです：

   • APPLE_TEAM_ID: Apple Developer Team ID
   • APPLE_KEY_ID: Apple Developer Portalから取得したKey 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 Secrets の設定

次に、Supabase Edge Function の環境変数（secrets）を設定する必要があります。

1. 秘密鍵のエンコード

   まず、Appleの秘密鍵（.p8ファイル）をbase64形式でエンコードします：

   base64 -i AuthKey_XXXXX.p8

   出力結果をすべてコピーしてください（長い1本の文字列になります）。

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 Dashboard でシークレットを設定する

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

   1. Supabase プロジェクトのダッシュボードへ移動し、
   2. 以下を選択してください： Edge Functions → 設定 → Secrets
   3. 各シークレット変数とその値を設定します

Android アプリの設定

この Apple Login Android Setup ガイド で Android アプリの設定方法を説明しています：

• ディープリンクのintent filterを AndroidManifest.xml
• を追加するには、 onNewIntent ハンドラを MainActivity.java

に、 BASE_REDIRECT_URL ステップ3にて。

ステップ4: Authentication Helperを使用する

これで、アプリ内の code で認証ヘルパーを使用できるようになります。

実装方法

完全な実装は以下にあります： サンプルアプリの supabaseAuthUtils.ts ファイル。

Authentication Helperの使用方法

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

   重要

   置換する 'your.service.id.here' 実際の Apple Service ID を使用します（Step 3 で使用した ANDROID_SERVICE_ID と同じ値です）。

詳細については、 実装の完了 を参考にしてください。

ステップ 5: 連携のテスト

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

   npx cap sync android
   npx cap run android

2. 認証フローをテストする

   • 「Sign in with Apple」ボタンをタップする
   • ブラウザで Apple OAuth ページが表示されます
   • 認証後、アプリにリダイレクトされます
   • コンソールログでエラーがないか確認する

3. フローを確認する

   全体のフローは以下の通りです:

   1. ユーザーが「Sign in with Apple」をタップ
   2. アプリがApple OAuthのブラウザを開く
   3. ユーザーがAppleで認証を行う
   4. Appleから以下へリダイレクト: https://your-project-ref.supabase.co/functions/v1/apple-signin-callback
   5. Edge functionがcodeをトークンに交換
   6. Edge functionから以下へリダイレクト: your-app://path?id_token=...&access_token=...
   7. Androidアプリがディープリンクを受信し、identity tokenを処理
   8. アプリがidentity tokenを使用してSupabaseにサインイン

トラブルシューティング

認証に失敗した場合：

• リダイレクトURIが一致しません: Apple Developer Portal の Return URL が以下と完全に一致しているか確認してください： APPLE_REDIRECT_URI シークレット
• ディープリンクが動作しない: 以下を確認してください： AndroidManifest.xml intent filter があなたの設定と一致するか： BASE_REDIRECT_URL
• secret が不足しています: 以下を使用して、すべての secret が正しく設定されているか確認してください： supabase secrets list
• Token exchange が失敗する: 詳細なエラーメッセージについては、Supabase Dashboard の edge function logs を確認してください
• アプリにコールバックが届かない: 以下を確認してください： onNewIntent MainActivity に正しく実装されていること
• 以下を確認してください: サンプルアプリ code 参考用

仕組み

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

1. 初期化：プラグインをService IDとバックエンドのリダイレクトURLで初期化します
2. OAuthフロー：AppleのOAuthページをブラウザまたはChrome Custom Tabで開きます
3. バックエンドのコールバック：Appleが認証 code を伴って、Supabase Edge Functionへリダイレクトします
4. トークン交換: Edge FunctionがAppleのトークンエンドポイントを使用して、codeをトークンに交換します
5. ディープリンクによるリダイレクト: Edge FunctionがIDトークンを伴ってアプリへリダイレクトします
6. Supabase認証: アプリがトークンを受け取り、Supabaseにサインインします

AppleがAndroid向けの「Sign in with Apple」ネイティブサポートを提供していないため、このフローが必要になります。

AndroidでのSupabase Apple Loginの続き

使用している場合 AndroidでSupabase Apple Login 認証とアカウントフローを計画するには、これを次と連携させてください @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 の実装の詳細、および 2要素認証 二要素認証の実装の詳細については。