SupabaseのAppleログインを継続して実行する

前提条件

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

• この Supabase Apple Login - General Setup.

重要

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

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

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

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

   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 の認証ヘッダーを含まないため、ファイルを更新してください: 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"

   設定

   このエンドポイントをパブリックにすることで、機能をデプロイします。このエンドポイントは、Apple の OAuth リダイレクトが Supabase の認証ヘッダーを含まないため、OAuth フローを検証する必要があります。 verify_jwt = false 機能をデプロイ

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. 関数 URLをクリックしてコピーします。 apple-signin-callback Supabase Functions Apple Sign-In Callback

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

   Open

Step 2: Apple Developer Portalの設定

ここで、バックエンドURLと必要な値を取得するためにApple Developer Portalを設定する必要があります。

関数URL

Step 1で取得したSupabase Edge Function URLが必要です。Apple Developer PortalでReturn URLを設定するために使用します。

1. Apple Login Androidのセットアップガイドに従ってください

   「Apple Login Androidのセットアップガイド」を完了してください を参照してください: サービスIDを作成する

   • プライベートキー(.p8ファイル)を生成する
   • Function URL
   • CapgoのTeam IDとKey IDを取得
   • リターンURLを設定

2. Apple Developer PortalでリターンURLを設定

   Apple Developer PortalでリターンURLを設定する際 (Appleガイドのステップ6.9)、Capgoのエッジ関数URLを使用してください:

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

   重要: Capgoのエッジ関数URLを使用してください

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

   完全一致が必要

   リターンURLは完全に一致する必要があります 完全に ここで設定した値と完全に一致する必要があります。AppleはリダイレクトURIのマッチングについて非常に厳格です。

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

   Appleの設定ガイドを完了した後、以下の値を取得する必要があります:

   • APPLE_TEAM_ID: Apple Developer Portalから取得するApple Developer Team ID
   • APPLE_KEY_ID: Apple Developer Portalから取得するKey ID
   • APPLE_PRIVATE_KEY:
   • ANDROID_SERVICE_ID: com.example.app.service)
   • BASE_REDIRECT_URL: capgo-demo-app://path)

   Deep Link URL

   は、 BASE_REDIRECT_URL のデープリンクスキームです。このスキームは、 AndroidManifest.xmlのバックエンドが認証後にリダイレクトする場所です。

   のデープリンクの値は、 android:scheme="capgo-demo-app" code. If you have set android:scheme="capgo-demo-app" あなたの AndroidManifest.xml, するとあなたのdeep linkは 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. ナビゲート エッジ関数 → 設定 → シークレット
   3. 各シークレット変数と値を追加

Android アプリの設定

この Apple ログイン Android セットアップ ガイド すでに

• Android アプリの設定 AndroidManifest.xml
• に追加する onNewIntent に追加する MainActivity.java

を追加する BASE_REDIRECT_URL を追加する

を追加する

今では、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 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 サービス ID (Step 3 で使用した値と同じ値) を使用して ANDROID_SERVICE_ID Step 3 の「」に記載されている値を使用して

を参照してください。 の実装を参照してください。 Step 5: Test the Integration

Step 5: Test the Integration

1. ターミナル画面

   npx cap sync android
   npx cap run android

2. 「Appleでサインイン」をタップしてください

   • Tap the “Sign in with Apple” button
   • 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 Functionがcodeをトークンに交換します。
   6. Edge Functionがリダイレクトします: your-app://path?id_token=...&access_token=...
   7. Androidアプリがデープリンクを受け取り、アイデンティティトークンを処理します。
   8. AppはSupabaseにアイデンティティトークンを使用してサインインします。

トラブルシューティング

認証が失敗した場合:

• リダイレクトURIの不一致: Apple Developer PortalのReturn URLが正確に一致していることを確認してください。 APPLE_REDIRECT_URI 秘密鍵
• デープリンクが機能しない: インテントフィルタがあなたの AndroidManifest.xml 秘密鍵が欠けている BASE_REDIRECT_URL
• : すべての秘密鍵が正しく設定されていることを、使用していることを確認してください。 supabase secrets list
• トークン交換が失敗します: Supabase ダッシュボードのエッジ関数ログを確認して、詳細なエラーメッセージを確認してください
• アプリがコールバックを受け取っていません: MainActivity にて onNewIntent が正しく実装されていることを確認してください
• MainActivity の example app code 例のアプリ __CAPGO_KEEP_0__

を参照してください

コンテキスト: Capgo Builder / ネイティブクラウドビルド製品ページ。役割: セクションまたはページヘッダー。メッセージキー `native_build_how_it_works_title` (ネイティブビルドHow It Works Title)。 | ホームページの問題/解決セクション。役割: 短いUIラベルまたはナビゲーションアイテム。見られるページ: page premium-support.astro。メッセージキー `ps_how_it_works` (Ps How It Works)。 | ライブアップデート製品ページ。役割: セクションまたはページヘッダー。見られるページ: page live-update.astro。メッセージキー `live_update_how_it_works_title` (ライブアップデートHow It Works Title)。

1. 「How It Works」セクションのタイトルです。: Capgoプラグインは、サービスIDとバックエンドリダイレクトURLで初期化されます。
2. OAuthフロー: AppleのOAuthページにブラウザ/Chromeカスタムタブを開きます。
3. バックエンドコールバック: Appleは、認証codeを含むSupabaseエッジ関数にリダイレクトされます。
4. トークン交換: エッジ関数は、Appleのトークンエンドポイントを使用してcodeをトークンに交換します。
5. ディープリンクリダイレクト: エッジ関数は、アイデンティティトークンを含むアプリにリダイレクトされます。
6. Supabase認証: アプリはトークンを受け取り、Supabaseにサインインします。

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

Supabase Apple Android の続きから

あなたが使用している場合 Supabase Apple Android 認証とアカウントフローの計画に使用している場合、Supabase Apple Android を Capacitor の @capgo/capacitor-social-login Capacitor の @capgo/capacitor-social-login Capacitor の @capgo/capacitor-social-login Capacitor の @capgo/capacitor-passkey Capacitor の @capgo/capacitor-passkey Capacitor の @capgo/capacitor-native-biometric Capacitor の @capgo/capacitor-native-biometric Capacitorで@capgo/capacitor-native-biometricの実装詳細について 2要素認証 2要素認証の実装詳細について