AndroidでSupabase Appleログイン

前提条件

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

• __CAPGO_KEEP_0__ Supabase Apple Login - General Setup.

重要

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

Step 1: Deploy the Backend Edge Function

最初に、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 - ライブラリ依存関係のインポートマップ (JWT署名用の jose JWT検証の設定

4. 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 __CAPGO_KEEP_0__を公開にする必要があります。これは、AppleのOAuthリダイレクトがSupabase認証ヘッダーを含まないためです。エンドポイントはOAuthフローを検証する必要があります。

5. __CAPGO_KEEP_0__をデプロイ

   supabase functions deploy apple-signin-callback

6. __CAPGO_KEEP_0__のURLを取得

   __CAPGO_KEEP_0__をデプロイした後、URLのようなものが得られます。

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

   __CAPGO_KEEP_0__が見つからない場合は、以下の手順を実行してください。

   1. 開く https://supabase.com/dashboard/project/YOUR_PROJECT_REF/functions
   2. 「{0}」をクリックしてください。 apple-signin-callback URLをコピーするには、{0}をクリックしてください。

   {0}を保存してください。

   Apple Developer Portalの設定で次のステップで必要になるURLを取得してください。

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

Apple Developer Portalの設定に必要な値を取得するために、バックエンド URLを設定してください。

関数 URL

__CAPGO_KEEP_0__を取得する前に、ステップ1のSupabase Edge Function URLが必要です。

1. Apple Developer PortalでReturn URLを設定するには、Apple Login Androidセットアップガイドを参照してください。

   __CAPGO_KEEP_1__を完了する __CAPGO_KEEP_2__を完了する Apple Developer PortalでReturn URLを設定する

   • サービスIDを作成する
   • .p8ファイルを生成する
   • チームIDとキーアイディを取得する
   • Apple Developer PortalでReturn URLを設定する

2. Apple Developer PortalでReturn URLを設定する際(Appleガイドのステップ6.9)、Supabase Edge Function URLを使用してください。

   __CAPGO_KEEP_3__

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

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

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

   Return URL はここで設定したものと完全に一致する必要があります。

   完全な一致が必要です。 Apple はリダイレクト URI の一致が厳密にチェックされるためです。 __CAPGO_KEEP_2__

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

   Appleのセットアップガイドを完了した後、次の値を持っているはずです:

   • __CAPGO_KEEP_0__: Apple Developer Team ID
   • __CAPGO_KEEP_1__: Apple Developer Portalから取得するキーアイデンティティ
   • __CAPGO_KEEP_2__: .p8プライベートキーファイル (base64エンコードが必要)
   • __CAPGO_KEEP_3__: Apple Service ID (例えば com.example.app.service)
   • __CAPGO_KEEP_4__: ディープリンクURL (例えば capgo-demo-app://path)

   Deep Link URL

   この BASE_REDIRECT_URL __CAPGO_KEEP_0__で設定した場合、バックエンドは認証後にリダイレクトするURLスキームです。 AndroidManifest.xml認証後にバックエンドがリダイレクトされるURLは、__CAPGO_KEEP_0__に依存します。

   __CAPGO_KEEP_0__で設定した場合、__CAPGO_KEEP_0__が設定されている場合、Deep Link URLは__CAPGO_KEEP_0__になります。 android:scheme="capgo-demo-app" code. If you have set android:scheme="capgo-demo-app" Step 3: Supabase Secretsを設定する AndroidManifest.xmlSupabase Edge Functionの環境変数（シークレット）を設定する必要があります。 capgo-demo-app://path.

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

   プレースホルダーを置き換える

   ステップ2から実際の値を使用して、すべてのプレースホルダー値を置き換える

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

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

   1. Supabase プロジェクト ダッシュボードに移動してください
   2. 以下の手順に従ってください Edge Functions → 設定 → シークレット
   3. 各シークレット変数に値を追加してください

Android アプリ設定

以下の Apple ログイン Android セットアップ ガイド 既に Android アプリの設定をカバーしているため

• URL インテントフィルタを追加する AndroidManifest.xml
• URL インテントフィルタ onNewIntent ハンドラーを追加する MainActivity.java

ステップ 3 の設定を完了するまでに進む前に、確認してください。設定した URL スキームは、ここで設定したものになります。 BASE_REDIRECT_URL ステップ 3 で

ステップ 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 更新 - この値を、Supabase Edge Function URL に設定してください: __CAPGO_KEEP_0__

1. __CAPGO_KEEP_0__ redirectUrl __CAPGO_KEEP_0__

   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 参考のために、

完全な実装 を参照してください。 __CAPGO_KEEP_0__

ステップ 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. Edge関数がcodeをトークンに交換します。
   6. Edge関数がリダイレクトします: your-app://path?id_token=...&access_token=...
   7. Androidアプリがデープリンクを受け取り、アイデンティティトークンを処理します。
   8. アプリがアイデンティティトークンでSupabaseにサインインします。

トラブルシューティング

認証が失敗した場合:

• リダイレクトURIが一致しません: Apple Developer Portal のリターン URL を正確に確認してください APPLE_REDIRECT_URI __CAPGO_KEEP_0__
• URL が正しくないため、デープ リンクが機能しません: AndroidManifest.xml intent フィルターが正しく設定されていることを確認してください BASE_REDIRECT_URL
• シークレットが不足しているため、機能しません: supabase secrets list
• すべてのシークレットが正しく設定されていることを確認してくださいトークン エクスチェンジが失敗しました
• : Supabase ダッシュボードのエッジ関数ログを確認してくださいコールバックが受信されていません onNewIntent : コールバックが正しく実装されていることを確認してください
• Review the 例として、code というアプリケーションを参照してください。 参考として

How It Works

Android の場合、Apple Sign-In は OAuth リダイレクト フローを使用します。

1. Initialization: プラグインは、サービス ID とバックエンドのリダイレクト URL とともに初期化されます。
2. OAuth Flow: ブラウザ/Chrome カスタム タブを開いて、Apple の OAuth ページにアクセスします。
3. Backend Callback: Apple は、承認情報 code を含む Supabase Edge Function にリダイレクトします。
4. トークン交換: Appleのトークンエンドポイントを使用して、codeをトークンに交換するエッジ関数
5. デープリンクリダイレクト: エッジ関数がアイデンティティトークンを含むアプリに戻す
6. スーパベース認証: アプリがトークンを受け取り、スーパベースにサインインする

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