Appleログイン

前提条件

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

• the Appleサインイン - 一般設定.

重要

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

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

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

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

   cd your-project/supabase

2. エッジ関数を作成 (if it doesn’t exist)

   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 ライブラリを含む）

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

   __CAPGO_KEEP_0__

   1. __CAPGO_KEEP_1__ https://supabase.com/dashboard/project/YOUR_PROJECT_REF/functions
   2. __CAPGO_KEEP_2__ apple-signin-callback __CAPGO_KEEP_3__

   __CAPGO_KEEP_6__

   __CAPGO_KEEP_7__

__CAPGO_KEEP_8__

__CAPGO_KEEP_10__

Function URL

__CAPGO_KEEP_0__

1. Cloudflareのエッジ関数URLがStep 1で取得したものであることを確認してください。Apple Developer PortalでReturn URLを設定するには必要です。

   Apple Developer PortalでReturn URLを設定するには、Step 1で取得したCloudflareのエッジ関数URLが必要です。 Apple Login Androidのセットアップガイドを参照してください。 Apple Login Androidのセットアップガイドを完了してください。

   • Apple Login Androidのセットアップガイドを完了してください。
   • Service IDを作成する
   • Apple Developer Portalで.p8ファイルを生成するためのプライベートキーを作成する
   • Team IDとKey IDを取得する

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

   Apple Developer PortalでReturn URLを設定する際に、Cloudflareのエッジ関数URLを使用してください。

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

   __CAPGO_KEEP_1__

   注意: __CAPGO_KEEP_2__ __CAPGO_KEEP_3____CAPGO_KEEP_4__ __CAPGO_KEEP_5__ __CAPGO_KEEP_6__

   __CAPGO_KEEP_8__

   __CAPGO_KEEP_9__ __CAPGO_KEEP_10__ ここで設定する値はこちらです。Appleはリダイレクト URI の一致について非常に厳格です。

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

   Apple設定ガイドを完了した後、以下の値を持っているはずです。

   • APPLE_TEAM_IDApple Developer Team ID
   • APPLE_KEY_IDApple Developer Portal から取得する Key ID
   • APPLE_PRIVATE_KEYApple Developer Portal から取得する .p8 秘密鍵ファイル（base64 エンコードが必要）
   • ANDROID_SERVICE_IDApple Service ID（例えば com.example.app.service)
   • BASE_REDIRECT_URL: URLを指定してください (例えば、 capgo-demo-app://path)

   URL

   URLは BASE_REDIRECT_URL は、サーバーが認証後にリダイレクトするURLです。 AndroidManifest.xmlURLの値は、

   __CAPGO_KEEP_0__ android:scheme="capgo-demo-app" code. If you have set android:scheme="capgo-demo-app" に設定されている場合、 AndroidManifest.xmlStep 3: Supabase Secretsを設定する capgo-demo-app://path.

セクション「Step 3: Supabase Secrets」

Now we need to configure the environment variables (secrets) for the Supabase Edge Function.

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 ダッシュボードでシークレットを設定

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

   1. CapgoアカウントのSupabaseプロジェクトダッシュボードに移動
   2. に移動してください Edge Functions → 設定 → シークレット
   3. 各シークレット変数と値を追加してください

Android アプリ設定

の Apple ログイン Android セットアップ ガイド すでにAndroidアプリの設定をカバーしているので、

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

Step 3で設定したDeep Linkスキームを使用する前に、 BASE_REDIRECT_URL Step 3で設定したDeep Linkスキームを使用する前に、

Step 4: Authentication Helperを使用する

Now you can use the authentication helper in your app 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 次の値を、設定に合わせて更新する必要があります: 更新 Copy to clipboard

1. Update the Helper Function 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 See the

complete implementation See the __CAPGO_KEEP_0__ complete implementation for reference.

Step 5: テストの統合

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

   npx cap sync android
   npx cap run android

2. 認証フローのテスト

   • 「Appleでサインイン」をタップ
   • Apple OAuth画面がブラウザで表示されるはずです
   • 認証後、ブラウザから戻ってきます
   • コンソールログを確認してエラーがないか

3. フローの検証

   The complete flow should be:

   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 intent フィルターがあなたの BASE_REDIRECT_URL
• シークレットが欠落している: 以下のシークレットが正しく設定されていることを確認してください supabase secrets list
• トークン エクスチェンジが失敗: Supabase ダッシュボードのエッジ関数ログを確認して詳細なエラーメッセージを確認してください
• アプリがコールバックを受け取っていない: 確認してください onNewIntent MainActivityに正しく実装されています
• Review the 例としてはcodeのアプリを参照してください 参考として

How It Works

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

1. Initialization: プラグインはService IDとバックエンドのリダイレクトURLで初期化されます
2. OAuth Flow: ブラウザ/Chrome Custom TabでAppleのOAuthページを開きます
3. バックエンドのコールバック: Appleをリダイレクトして、Supabase Edge Functionに認証code
4. Token Exchange: エッジ関数は、Appleのトークンエンドポイントを使用してcodeをトークンに交換します
5. Deep Link Redirect: エッジ関数は、アイデンティティトークンを含めてアプリに戻ります
6. Supabase Authentication: アプリはトークンを受け取り、Supabaseにサインインします

This flowは必要です。なぜなら、AppleはSign in with AppleのネイティブAndroidサポートを提供していないからです。

Keep going from Supabase Apple Login on Android

If you are using Supabase Apple Login on Android 認証とアカウントフローの計画に役立つ機能です。__CAPGO_KEEP_0__/__CAPGO_KEEP_1__と接続してください。 Using @capgo/capacitor-social-login 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 2要素認証 2要素認証の実装詳細