Capgo でアプリを ship する

このプラグインのインストール手順と全マークダウンガイドを含む設定プロンプトをコピーできます。

前提条件

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

the Supabase Apple ログイン - 一般設定.

Step 1: Supabase Edge Functionをデプロイする

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

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

実装は例のアプリケーションにあります example app.

- メインエッジ関数
- supabase/functions/apple-signin-callback/index.ts - メインエッジ機能 code
- supabase/functions/apple-signin-callback/deno.json - 依存関係のインポートマップ (includes jose JWT署名用ライブラリ)
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"
```
設定 verify_jwt = false このエンドポイントをパブリックに公開することで、AppleのOAuthリダイレクトがSupabaseの認証ヘッダーを含まないため、必要です。エンドポイントはOAuthフローを検証する必要があります。
関数をデプロイ
ターミナルウィンドウ
```
supabase functions deploy apple-signin-callback
```
URLを取得する

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

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

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

Apple Login Androidの設定ガイドを参照してください

Apple Login Androidの設定ガイドを完了してくださいを参照してくださいサービスIDを作成する
- プライベートキー(.p8ファイル)を生成する
- チームIDとキーIDを取得する
- Section titled “Step 2: Apple Developer Portalの設定”
- URLを設定
Apple Developer PortalでURLを設定

Apple Developer PortalでURLを設定する際(Appleガイドのステップ6.9)、Supabase Edge Function URLを使用してください:
```
https://your-project-ref.supabase.co/functions/v1/apple-signin-callback
```
重要: Supabase エッジ関数 URL を使用してください
しないでください 使用しないでください Apple Login AndroidセットアップガイドからURL must 必須

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

Appleの設定ガイドを完了した後、次の値を取得する必要があります:
- APPLE_TEAM_ID: Apple Developer Team ID
- APPLE_KEY_ID: Apple Developer Portalから取得するキーアイディ
- APPLE_PRIVATE_KEY: .p8プライベートキーファイル (base64エンコードが必要)
- ANDROID_SERVICE_ID: Apple サービス ID (例えば、 com.example.app.service)
- BASE_REDIRECT_URL: 認証後にバックエンドがリダイレクトするためのデープリンク URL (例えば、 capgo-demo-app://path)
は、 BASE_REDIRECT_URL で構成されたデープリンクスキームです。このスキームは、認証後にバックエンドがリダイレクトする場所です。 AndroidManifest.xmlの値は、
__CAPGO_KEEP_0__ android:scheme="capgo-demo-app" code. AppleのSocial Login機能を使用するには、Capacitorを使用してCapacitor Social Loginプラグインを設定する必要があります。 android:scheme="capgo-demo-app" の AndroidManifest.xml次に、深いリンクは capgo-demo-app://path.

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

環境変数（シークレット）を設定するために、Supabase Edge Function を構成する必要があります。

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

最初に、Apple のプライベートキー (.p8 ファイル) を base64 にエンコードします。
ターミナルウィンドウ
```
base64 -i AuthKey_XXXXX.p8
```
コピーする

Set secrets using 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. 各シークレット変数と値を追加

ステップ 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 コピー必須以下の値を、設定に合わせて更新してください。

アップデート redirectUrl - Supabase エッジ関数 URL を設定します。

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

アップデート clientId クリップボードにコピー
```
await SocialLogin.initialize({
  apple: {
    clientId: isIOS
      ? undefined // iOS uses bundle ID automatically
      : 'your.service.id.here', // Your Apple Service ID for Android
    redirectUrl: redirectUrl,
  },
});
```
Replace 'your.service.id.here' Apple サービス ID を使用します (実際の Apple サービス ID の値と同じ値を使用します) ANDROID_SERVICE_ID Step 3) を参照してください。

See the 完全実装 for reference.

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

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

完了したフローは次のようになります。
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 秘密鍵が欠落している BASE_REDIRECT_URL
: 正しく設定されていることを確認するにはトークン交換が失敗 supabase secrets list
__CAPGO_KEEP_0__: Supabase ダッシュボードでエッジ関数ログを確認して、詳細なエラーメッセージを参照してください。
アプリがコールバックを受信しない: Ensure onNewIntent は適切に実装されていることを確認してください。
を確認してください。例として、参考にすることができる code アプリがあります。を参照してください。

「How It Works」

「How It Works」セクション

Initialization初期化
OAuth Flow: AppleのOAuthページを開くブラウザ/Chromeカスタムタブを開きます
バックエンドコールバック: Appleは、認証codeを含むSupabase Edge Functionにリダイレクトします
トークン交換: Edge Functionは、Appleのトークンエンドポイントを使用してcodeをトークンに交換します
ディープリンクリダイレクト: Edge Functionは、アイデンティティトークンを含むアプリにリダイレクトします
サプバース認証: アプリはトークンを受け取り、Supabaseにサインインします

Apple サインインのためのネイティブアンドロイドサポートは提供されていないため、このフローは必要です。

あなたが使用している 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 Using @capgo/capacitor-native-biometric Using @capgo/capacitor-native-biometric 2要素認証 2要素認証の実装詳細について

Capacitorアプリを配信ページ/エリア: Capgo マーケティングウェブサイト。役割: ショート UI ラベルまたはナビゲーションアイテム。見つける: component doc/SignupCta.astro, component Hero.astro。メッセージキー `hero_title_line1` (Hero Title Line1)。

ページ/エリア: Capgo マーケティングウェブサイト。役割: ウェブサイトコピー文句。見つける: component doc/SignupCta.astro, component Hero.astro。メッセージキー `hero_subtitle_v2` (Hero Subtitle V2)。無料で始めます