Supabase Apple Login on Android

前提条件

This guide will help you integrate Apple Sign-In with Supabase Authentication on Android.

• このガイドは、AndroidでApple Sign-InとSupabase Authenticationを統合するのに役立ちます。 the.

重要

重要

Apple Sign-In on Android requires a backend server because Apple doesn’t provide native Android support. We’ll use a Supabase Edge Function as the backend.

Step 1: Deploy the Backend Edge Function

1. ステップ 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. (JWTの署名用のライブラリを含む)

   AppleのOAuthコールバックエンドポイントは、Appleがリダイレクトするため、パブリック（認証不要）でなければなりません。 supabase/config.toml file:

   [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

   見つけることができない場合は、以下の手順に従ってください。

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

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

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

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

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

Function URL

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

1. Apple Login Androidセットアップガイドを参照してください

   Step 2で Apple Login Androidセットアップガイド に:

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

2. Apple Developer PortalでReturn URLを設定する

   Apple Developer Portal (step 6.9) で Return URL を設定する際に、Apple のガイドのステップ 6.9 を参照してください。Capgo の 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 を使用しています。Capgo の Supabase Edge Function URL を使用する必要があります。 厳密な一致が必要です 厳密な一致が必要です

   厳密な一致が必要です

   Return URL は厳密に一致する必要があります。 exactly what you configure here. Apple is very strict about redirect URI matching.

3. Collect all required values

   After completing the Apple setup guide, you should have:

   • APPLE_TEAM_ID: Your Apple Developer Team ID
   • APPLE_KEY_ID: The Key ID from Apple Developer Portal
   • APPLE_PRIVATE_KEY: Your .p8 private key file (needs to be base64 encoded)
   • 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)

   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に設定されている場合、 capgo-demo-app://path.

Step 3:

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

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

   __CAPGO_KEEP_0__をすべてのプレースホルダ値に置き換えてください。

3. Step 2から実際の値を使用します。

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

   1. ダッシュボードを使用する場合は
   2. Supabase プロジェクト ダッシュボードに移動 へ → Edge Functions → 設定
   3. シークレット

Android アプリ設定

Android アプリ設定の設定 Apple Login Android セットアップガイド __CAPGO_KEEP_0__で既に、Androidアプリの設定をカバーしているため

• Step 3で設定したデープリンクスキームを使用する AndroidManifest.xml
• Step 3で設定したデープリンクスキームを使用する onNewIntent Authentication Helperのハンドラを MainActivity.java

Authentication Helperのハンドラを追加する BASE_REDIRECT_URL Step 3で設定したデープリンクスキームを使用する

Step 4: Authentication Helperを使用する

Authentication Helperを使用して、codeで実装する

実装

The complete implementation is available in the example appの 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);
}

Helper関数を更新する

Authentication Helperを使用する場合、以下の値を更新する必要があります。 authenticateWithAppleSupabase 値を更新する必要があります。 は 必要です。

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

   重要

   置き換え 'your.service.id.here' 実際の Apple サービス ID (Step 3 で使用した値と同じ値) に置き換えてください: ANDROID_SERVICE_ID Step 3 で使用した値と同じ値を参照してください:

See the __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 の Return URL が正確に一致していることを確認してください APPLE_REDIRECT_URI 秘密
• デープ リンクが機能しない: 以下を確認してください AndroidManifest.xml 意図フィルターがあなたの BASE_REDIRECT_URL
• シークレットが不足している: 以下を確認してください supabase secrets list
• すべてのシークレットが正しく設定されていることを確認するにはトークン エクスチェンジが失敗した
• : Supabase ダッシュボードのエッジ関数ログを確認して、詳細なエラーメッセージを確認してください: 確認する onNewIntent は MainActivity に適切に実装されているか確認する
• 例として、参考にするための __CAPGO_KEEP_0__ の例アプリを確認する example app code セクション： “How It Works”

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

: プラグインは Service ID とバックエンドのリダイレクト URL で初期化されます

1. OAuth Flow： Apple の OAuth ページにブラウザ/Chrome カスタム タブを開く
2. Section titled “How It Works”On Android, Apple Sign-In uses an OAuth redirect flow:
3. バックエンドコールバック: Appleが認証codeを含むSupabase Edge Functionにリダイレクトします。
4. トークン交換: Appleのトークンエンドポイントを使用してcodeをトークンに交換するエッジ関数
5. ディープリンクリダイレクト: エッジ関数がアイデンティティトークンを含むアプリにリダイレクトします。
6. サプバース認証: アプリがトークンを受け取り、サプバースにサインインします。

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

サプバースAppleログインのAndroidから続けて

サプバースAppleログインのAndroidから続けてのセクション Apple Android の Supabase ログイン 認証とアカウントフローの計画に役立つため、 Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login Using @capgo/capacitor-passkey Using @capgo/capacitor-passkey Using @capgo/capacitor-native-biometric Using @capgo/capacitor-native-biometric 2要素認証 2要素認証