コンテンツにスキップ
Capgo - Capacitor アプリのリアルタイム更新 Capgo

Social Login __CAPGO_KEEP_0__ リポジトリ

GitHub

前提条件

「前提条件」

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

重要

重要

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

  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/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 を取得

    デプロイ後、次のようになります:

    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 この URL を保存してください

Step 2: Apple Developer Portalの設定

「Step 2: Apple Developer Portalの設定」

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

  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のEdge Function URLを使用してください:

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

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

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

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

    Appleのセットアップガイドを完了した後、以下の値を取得する必要があります:

    • APPLE_TEAM_ID: Apple Developer Team ID
    • APPLE_KEY_ID: Apple Developer Portalから取得するKey ID
    • APPLE_PRIVATE_KEY: __CAPGO_KEEP_0__ファイル (base64エンコードが必要)
    • 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

    コピーする必要があるのは、出力全体（長い単一の文字列）です。

  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. ナビゲート エッジ関数 → 設定 → シークレット
    3. 各シークレット変数に値を追加

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

Step 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 ヘルパー関数、 は 以下の値を更新する必要があります。

  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: インテグレーションのテスト

Step 5: インテグレーションのテスト

Androidアプリをビルドして実行する

  1. ターミナルウィンドウ

    コピー
    npx cap sync android
    npx cap run android

  2. 「Appleでサインイン」をタップします

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

__CAPGO_KEEP_1__

トラブルシューティング

__CAPGO_KEEP_2__

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

「しくみ」

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

初期化

  1. しくみ: 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 を使用している場合 Supabase Apple Android 認証とアカウントフローの計画に使用している場合、Supabase Apple Android を 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 @capgo/capacitor-social-login Capgoの実装詳細については@capgo/capacitor-native-biometricのページを参照してください。 2要素認証 Capgoの実装詳細については2要素認証のページを参照してください。