Supabase Apple Login - Android

前提条件

このガイドでは、AndroidでSupabase認証を用いたAppleサインインを統合する方法を説明します。以下の手順を既に完了していることを前提としています:

Supabase Apple Login - 一般設定

ステップ1: バックエンドEdge Functionのデプロイ

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

Supabaseプロジェクトディレクトリに移動
Terminal window
```
cd your-project/supabase
```
Edge Functionを作成(存在しない場合)
Terminal window
```
supabase functions new apple-signin-callback
```
Edge Functionのコードをコピー

完全なEdge Functionの実装は、サンプルアプリで利用可能です。

以下のファイルをプロジェクトにコピーしてください:
- supabase/functions/apple-signin-callback/index.ts - メインのEdge Functionコード
- supabase/functions/apple-signin-callback/deno.json - 依存関係のインポートマップ(joseライブラリを含む)
JWT検証の設定

Apple OAuthコールバックエンドポイントは、Appleがリダイレクトするため、パブリック(認証不要)である必要があります。supabase/config.tomlファイルを更新してください:
```
[functions.apple-signin-callback]
enabled = true
verify_jwt = false  # 重要: パブリックOAuthコールバックのためfalseに設定
import_map = "./functions/apple-signin-callback/deno.json"
entrypoint = "./functions/apple-signin-callback/index.ts"
```
verify_jwt = falseに設定すると、このエンドポイントはパブリックになります。これは、AppleのOAuthリダイレクトにSupabase認証ヘッダーが含まれないため必要です。エンドポイント自体がOAuthフローを検証します。

Functionをデプロイ

supabase functions deploy apple-signin-callback

Function 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 FunctionのURLをクリックしてコピーする
次のステップでApple Developer Portalを設定する際に、このURLが必要になります。

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

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

Apple Login Android設定ガイドに従う

Apple Login Android設定ガイドを完了して、以下を行ってください:
- Service IDを作成
- プライベートキー(.p8ファイル)を生成
- Team IDとKey IDを取得
- Return URLを設定
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を必ず使用してください。

Return URLは、ここで設定したものと完全に一致する必要があります。Appleはリダイレクト URIの一致に非常に厳格です。
必要なすべての値を収集

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

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

Supabase Edge Functionの環境変数(シークレット)を設定する必要があります。

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

まず、Appleプライベートキー(.p8ファイル)をbase64にエンコードします:
Terminal window
```
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. Edge Functions → Settings → Secretsに移動
3. 各シークレット変数を値と共に追加

ステップ4: 認証ヘルパーの使用

アプリコードで認証ヘルパーを使用できるようになりました。

実装

完全な実装は、サンプルアプリのsupabaseAuthUtils.tsファイルで利用可能です。

認証ヘルパーの使用

import { authenticateWithAppleSupabase } from './supabaseAuthUtils';

const result = await authenticateWithAppleSupabase();
if (result.success) {
  console.log('サインイン:', result.user);
  // 認証されたエリアに移動
} else {
  console.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は自動的にバンドルIDを使用
      : 'your.service.id.here', // Android用のApple Service ID
    redirectUrl: redirectUrl,
  },
});

完全な実装については、完全な実装を参照してください。

ステップ5: 統合のテスト

Androidアプリをビルドして実行
Terminal window
```
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. Edge Functionがコードをトークンに交換
6. Edge Functionがyour-app://path?id_token=...&access_token=...にリダイレクト
7. Androidアプリがディープリンクを受信し、IDトークンを処理
8. アプリがIDトークンでSupabaseにサインイン

トラブルシューティング

認証に失敗した場合:

リダイレクトURIの不一致: Apple Developer PortalのReturn URLがAPPLE_REDIRECT_URIシークレットと完全に一致することを確認
ディープリンクが機能しない: AndroidManifest.xmlのインテントフィルターがBASE_REDIRECT_URLと一致することを確認
シークレットが見つからない: supabase secrets listを使用して、すべてのシークレットが正しく設定されていることを確認
トークン交換の失敗: 詳細なエラーメッセージについては、Supabaseダッシュボードのedge functionログを確認
アプリがコールバックを受信しない: MainActivityにonNewIntentが正しく実装されていることを確認
リファレンスについては、サンプルアプリコードを確認

仕組み

AndroidでのAppleサインインは、OAuthリダイレクトフローを使用します:

初期化: プラグインがService IDとバックエンドリダイレクトURLで初期化されます
OAuthフロー: AppleのOAuthページを含むブラウザ/Chrome Custom Tabを開きます
バックエンドコールバック: Appleが認証コードと共にSupabase Edge Functionにリダイレクトします
トークン交換: Edge FunctionがAppleのトークンエンドポイントを使用してコードをトークンに交換します
ディープリンクリダイレクト: Edge FunctionがIDトークンと共にアプリにリダイレクトします
Supabase認証: アプリがトークンを受信し、Supabaseにサインインします

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