Supabase Apple Login - General Setup

インストール、同期、ソースマークダウンガイドを含む

概要

Apple Sign-InをSupabase Authenticationに統合するためのガイド

開始する前に、以下を確認してください

1. Supabaseプロジェクトを作成

2. Capgoのスタイルガイドを読みました。 Apple Sign-Inの一般設定 Apple OAuth 認証設定のガイド

3. 各プラットフォームのプラットフォーム固有のガイドを参照して、Apple OAuth 認証設定を実施してください。

   • Android 設定
   • iOS 設定
   • Web 設定

   注意

   Supabase のチュートリアルを開始する前に、使用するプラットフォームごとにクライアント ID を生成する必要があります。

   iOS の場合、クライアント ID はアプリ ID と同じです。Android と Web の場合、クライアント ID はサービス ID と同じです。7 步目のガイドで使用します。

Supabase で Apple OAuth プロバイダーを有効にする

1. Go to your Supabase ダッシュボード

2. プロジェクトを選択する

   

3. ここに移動する Authentication メニュー

   

4. タブをクリックする Providers Supabase プロバイダーのタブ

   

5. プロバイダー Apple Supabase Apple プロバイダー

   

6. Appleログインを有効にします。 Apple プロバイダー

   

7. クライアントIDの設定を入力してください。

   注意

   Appleログインを使用している場合、iOSの場合、クライアントIDはアプリIDと同じです。AndroidまたはWebの場合、クライアントIDはサービスIDと同じです。両方を使用している場合、両方のアプリIDとサービスIDを提供する必要があります。

   

8. ボタンをクリックしてください。 Save Supabase Apple プロバイダーを保存

   

   注意

   あなた 設定する必要はありません。 設定 Secret key (for OAuth)。Capgoは、Appleログインのカスタムバックエンド実装を取り扱います。

Voilà、Supabase認証とApple Sign-Inを有効にしました！

認証ヘルパーを使用する

Apple Sign-Inフローを取り扱うヘルパー関数が含まれます。 authenticateWithAppleSupabase() Apple Sign-Inを初期化し、プラットフォーム固有の構成を取り扱います。

• 認証フローを取り扱います (iOSではネイティブ、Android/WebではOAuthリダイレクト)
• 認証フローを取り扱います (iOSではネイティブ、Android/WebではOAuthリダイレクト)
• AppleのIDトークンを抽出します。
• IDトークンを使用してSupabaseにサインインします。

完全な実装

完全な実装は、 例のアプリの 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);
}

どうやって動くか

プラットフォーム固有の差異を自動的に処理するヘルパー関数があります:

• iOS: Apple Sign-Inを使用します (リダイレクト URL が必要ありません、自動的に bundle ID を使用します)
• Android: バックエンドエッジ関数を使用した OAuth リダイレクトフロー (Service ID が必要です)
• Web: OAuth ポップアップフローを使用します (Service ID と現在のページ URL をリダイレクトとして必要です)

Apple から取得した ID トークンを使用して Supabase に認証します supabase.auth.signInWithIdToken().

Supabase Apple Login - General Setup から続けてください

Supabase Apple Login - General Setup を使用している場合 Supabase Apple Login - General Setup 認証とアカウントフローの計画に役立つため、CloudflareとCapacitorを接続します。 Capacitorの@capgo/capacitor-social-login機能を使用します。 Capacitorの@capgo/capacitor-social-login機能のネイティブ機能を使用します。 Capacitorの@capgo/capacitor-social-login機能を使用します。 Capacitorの@capgo/capacitor-social-login機能の実装詳細を使用します。 Capacitorの@capgo/capacitor-passkey機能を使用します。 Capacitorの@capgo/capacitor-passkey機能の実装詳細を使用します。 Capacitorの@capgo/capacitor-native-biometric機能を使用します。 Capacitorの@capgo/capacitor-native-biometric機能の実装詳細を使用します。 Capacitorの2要素認証機能を使用します。 Capacitorの2要素認証機能の実装詳細を使用します。