SupabaseのAppleログイン on Android

インストール

前提条件

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

この Supabase Apple Login - General Setup.

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

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

Supabaseプロジェクトディレクトリに移動してください
ターミナルウィンドウ
```
cd your-project/supabase
```
エッジ関数を作成 (存在しない場合)
ターミナルウィンドウ
```
supabase functions new apple-signin-callback
```
codeのエッジ関数をコピー

完全なエッジ関数実装は、サンプルアプリケーション.

次のファイルをプロジェクトにコピーしてください
- supabase/functions/apple-signin-callback/index.ts - メインエッジ関数code
- supabase/functions/apple-signin-callback/deno.json -依存関係のインポートマップ (含む) jose - JWT署名用のライブラリ
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 関数をデプロイ

ターミナルウィンドウ

supabase functions deploy apple-signin-callback

関数URLを取得

デプロイ後、URLが次のようになります:
```
https://your-project-ref.supabase.co/functions/v1/apple-signin-callback
```
URLを見つけることができない場合は、以下の手順を実行してください。
1. 開く https://supabase.com/dashboard/project/YOUR_PROJECT_REF/functions
2. URLをクリップボードにコピーするには、 apple-signin-callback 関数URLをクリックしてください。
Apple Developer Portalの設定の次のステップで、このURLが必要になります。

Step 2: Apple Developer Portalの設定

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

Apple Login Androidの設定ガイドに従ってください

「Apple Login Androidの設定ガイド」を完了してくださいを参照してくださいサービスIDを作成する
- プライベートキー(.p8ファイル)を生成する
- Function URL
- CapgoのTeam IDとKey IDを取得
- リターンURLを設定
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を使用してください CapgoのEdge Function URLを使用してください

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

Appleの設定ガイドを完了した後、以下の値を取得する必要があります:
- APPLE_TEAM_ID: Apple Developer Team ID
- APPLE_KEY_ID: Apple Developer Portalから取得するKey ID
- APPLE_PRIVATE_KEY: __CAPGO_KEEP_0__ファイル (.p8) (base64エンコードが必要)
- ANDROID_SERVICE_ID: Apple Service ID (例:) com.example.app.service)
- BASE_REDIRECT_URL: 認証後にバックエンドがリダイレクトするURL (例:) capgo-demo-app://path)
は、バックエンドが認証後にリダイレクトするURLのスキームです。 BASE_REDIRECT_URL は、バックエンドが認証後にリダイレクトするURLの値です。 AndroidManifest.xmlの値は、__CAPGO_KEEP_0__に依存します。
__CAPGO_KEEP_0__の値が設定されている場合 android:scheme="capgo-demo-app" codeの値が設定されていない場合 android:scheme="capgo-demo-app" Appleのアプリ内で AndroidManifest.xml, すると深いリンクは capgo-demo-app://path.

ステップ 3: Supabase のシークレットを設定

ここで、Supabase エッジ関数の環境変数（シークレット）を設定する必要があります。

プライベートキーをエンコードする

まず、Apple のプライベートキー (.p8 ファイル) を base64 にエンコードします。
ターミナル画面
```
base64 -i AuthKey_XXXXX.p8
```
出力全体 (1 つの長い文字列) をコピーします。

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

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

ダッシュボードを使用したい場合は
1. Supabase プロジェクトダッシュボードに移動
2. 設定 エッジ関数 → 設定 → シークレット
3. 各シークレット変数に値を追加

Step 3で設定したDeep Linkスキームを使用する必要があります。

今では、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 ヘルパー関数、は以下の値を、自分の設定に合わせて更新する必要があります:

更新 redirectUrl - この値を、自分の Supabase Edge Function URL に設定してください:

const redirectUrl = platform === 'android'
  ? 'https://your-project-ref.supabase.co/functions/v1/apple-signin-callback'
  : undefined;

更新 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の「」の値を使用して

「」を参照してください。実装の完全な例参考用の実装

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

Androidアプリをビルドして実行
ターミナルウィンドウ
```
npx cap sync android
npx cap run android
```
認証フローのテスト
- 「Appleでサインイン」をタップ
- ブラウザでApple OAuth画面が表示されるはずです。
- 認証が完了したら、再びアプリにリダイレクトされるはずです。
- コンソールログを確認してエラーがないか確認してください。
フローを確認してください。

完了したフローは次のようになります。
1. ユーザーが「Appleでサインイン」をタップします。
2. アプリがApple OAuth画面を開きます。
3. ユーザーがAppleで認証します。
4. Appleがリダイレクトします。 https://your-project-ref.supabase.co/functions/v1/apple-signin-callback
5. エッジ関数がcodeをトークンに交換します。
6. エッジ関数がリダイレクトします。 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
: 秘密が正しく設定されていることを確認してください。__CAPGO_KEEP_0__ supabase secrets list
トークン交換が失敗します: Supabase ダッシュボードのエッジ関数ログを確認して、詳細なエラーメッセージを確認してください
アプリがコールバックを受け取っていません: MainActivity にて onNewIntent が正しく実装されていることを確認してください
MainActivity の example app code 例のアプリ __CAPGO_KEEP_0__

を参照してください

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

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

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

Capgoから続けて、SupabaseのAppleログインをAndroidで使用している場合 Capgoから続けて、SupabaseのAppleログインをAndroidで使用 Capgoから続けて、SupabaseのAppleログインをAndroidで使用している場合、認証とアカウントフローの計画に使用するには、Capgoから続けて、SupabaseのAppleログインをAndroidで使用 Capgoから続けて、SupabaseのAppleログインをAndroidで使用している場合、@capgo/capacitor-social-login Capgoから続けて、SupabaseのAppleログインをAndroidで使用している場合、@capgo/capacitor-social-login Capgoから続けて、SupabaseのAppleログインをAndroidで使用している場合、@capgo/capacitor-social-login Capgoから続けて、SupabaseのAppleログインをAndroidで使用している場合、@capgo/capacitor-passkey Capgoから続けて、SupabaseのAppleログインをAndroidで使用している場合、@capgo/capacitor-passkey Capgoから続けて、SupabaseのAppleログインをAndroidで使用している場合、@capgo/capacitor-native-biometric @capgo/capacitor-native-biometric Capgoの実装詳細については@capgo/capacitor-native-biometricのページを参照してください。 2要素認証 Capgoの実装詳細については2要素認証のページを参照してください。