コンテンツにジャンプ
Capgo - Capacitor アプリのリアルタイム更新 Capgo

AppleのSupabaseログインをAndroidで

前提条件

前提条件

このガイドでは、AndroidでApple Sign-InとSupabase Authenticationを統合する方法について説明します。Apple Sign-Inを使用するには、Appleが提供するAndroidのネイティブサポートがないため、バックエンドサーバーが必要です。このガイドでは、Supabase Edge Functionを使用してバックエンドサーバーを構築します。

  • Supabase Apple Login - General Setup 重要.

Step 1: Deploy the Backend Edge Function

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

Navigate to your Supabase project directory

  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がリダイレクトするため、パブリック (認証不要) でなければなりません。アップデート 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"

  5. 関数をデプロイ

    ターミナルウィンドウ
    supabase functions deploy apple-signin-callback

  6. 機能URLを取得

    __CAPGO_KEEP_0__のURLが取得されます。

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

    __CAPGO_KEEP_0__が見つからない場合は、以下の手順に従ってください。

    1. Open https://supabase.com/dashboard/project/YOUR_PROJECT_REF/functions
    2. __CAPGO_KEEP_0__をクリックします。 apple-signin-callback Apple Sign-In Callbackの機能URLをコピー __CAPGO_KEEP_1__を保存

Supabase Functions Apple Sign-In Callback

Step 2: Apple Developer Portalの設定

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

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

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

    • プライベートキー(.p8ファイル)を生成する
    • チームIDとキーIDを取得する
    • Apple Login Androidセットアップガイド
    • Return URLを設定

  2. Apple Developer PortalでReturn URLを設定

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

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

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

    使用しないでください Apple Login Android セットアップ ガイドから取得したリダイレクト URL 。そのガイドはカスタム バックエンド サーバー URLを使用しています。Supabase統合の場合、必ずSupabase Edge Function URLを使用してください。 厳密に一致させる必要があります Apple Developer PortalでReturn URLを設定する際 (Appleガイドのステップ 6.9)、Supabase Edge Function URLを使用してください:__CAPGO_KEEP_0__

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

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

    • __CAPGO_KEEP_0__: Apple Developer Team ID
    • : Apple Developer Portal から取得する Key ID: .p8 私的鍵ファイル (base64 エンコードが必要)
    • APPLE_PRIVATE_KEYAPPLE_KEY_ID
    • ANDROID_SERVICE_ID: Apple サービス ID (例えば、 com.example.app.service)
    • BASE_REDIRECT_URL: ディープ リンク URL (例えば、 capgo-demo-app://path)

Step 3: Supabaseのシークレットを設定する

「Step 3: Supabaseのシークレットを設定する」というセクション

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

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

    ダッシュボードを使用したい場合は:

    1. Supabase プロジェクト ダッシュボードに移動
    2. を参照 Edge Functions → 設定 → シークレット
    3. 各シークレット変数と値を追加

Step 4: 認証ヘルパーを使用する

ここで、認証ヘルパーをアプリ内で使用できます。__CAPGO_KEEP_0__。

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

ヘルパー関数を使用する場合

__CAPGO_KEEP_0__

__CAPGO_KEEP_0__ authenticateWithAppleSupabase __CAPGO_KEEP_0__ 必須 __CAPGO_KEEP_0__

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

詳細は 参考実装を参照してください。 Step 5: Androidアプリの統合テスト

タイトル「Step 5: Androidアプリの統合テスト」

Androidアプリをビルドして実行してください。

  1. ターミナル画面

    クリップボードにコピー
    npx cap sync android
    npx cap run android

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

    • Apple OAuth画面がブラウザで表示されます。
    • 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. アプリがアイデンティティトークンでSupabaseにサインインします。

トラブルシューティング

トラブルシューティング

認証が失敗した場合:

  • リダイレクト URI の一致が不正: Apple Developer Portal の Return URL が正確に一致していることを確認してください APPLE_REDIRECT_URI シークレット
  • デープ リンクが機能しない: AndroidManifest.xml intent フィルタが正しく設定されていることを確認してください BASE_REDIRECT_URL
  • シークレットが不足している: supabase secrets list
  • すべてのシークレットが正しく設定されていることを確認してください。使用する方法は「Capgo」で確認してください。: Supabase ダッシュボードでエッジ関数ログを確認して、詳細なエラーメッセージを参照してください
  • Appはコールバックを受信しません: 確認してください onNewIntent MainActivityで正しく実装されていることを確認してください
  • 参考用に例のアプリを __CAPGO_KEEP_0__ example app code 「How It Works」のセクション

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

初期化

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

  1. How It WorksAndroidでは、Apple Sign-InはOAuthリダイレクトフローを使用します。
  2. OAuth フロー: AppleのOAuthページを開くブラウザ/Chromeカスタムタブを開きます
  3. バックエンドコールバック: Appleは認証codeを受け取ったあと、Supabase Edge Functionにリダイレクトします
  4. トークン交換: Edge FunctionはAppleのトークンエンドポイントを使用してcodeをトークンに交換します
  5. ディープリンクリダイレクト: Edge Functionはあなたのアプリにアイデンティティトークンを含むリダイレクトします
  6. Supabase認証: アプリはトークンを受け取り、Supabaseにサインインします

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

続けて、Supabase Apple Login on Androidから進みます

「Supabase Apple Login on Android」から続けて

Capgoを使用している場合 Supabase Apple Login on Android 認証とアカウントフローの計画に使用し、Capgoと接続する Capgoの「@capgo/capacitor-social-login」 Capgoの「@capgo/capacitor-social-login」 Capgoの「@capgo/capacitor-social-login」 Capgoの「@capgo/capacitor-passkey」 Capgoの「@capgo/capacitor-passkey」 Capgoの「@capgo/capacitor-native-biometric」 Capgoの「@capgo/capacitor-native-biometric」 Capgoの「@capgo/capacitor-native-biometric」 2要素認証 2要素認証の実装詳細について