Supabase Apple Login - General Setup

概要

このガイドでは、Apple Sign-Inを使用してSupabase Authenticationを統合する方法を説明します。Apple Sign-Inは、iOS、Android、Webプラットフォームを対象とした安全でプライバシーに配慮した認証方法を提供します。

前提条件

開始する前に、以下の条件を満たしてください。

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

2. Apple Loginの一般設定 read_the_style_guide Apple OAuth 認証設定のガイド

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

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

   注意

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

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

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

1. あなたの Supabase ダッシュボード

2. プロジェクトをクリックしてください

   

3. ここに移動してください Authentication メニュー

   

4. タブをクリックしてください Providers プロバイダー

   

5. Apple プロバイダー 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サインインを有効にしました！🎉

認証ヘルパーを使用する

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

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

完全な実装

完全な実装は、 例のアプリの 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が必要ありません、自動的にバンドル IDを使用します)
• Android: バックエンドエッジ関数を使用したOAuthリダイレクトフロー (Service IDが必要です)
• Web: OAuthポップアップフローを使用します (Service IDと現在のページURLをリダイレクトURLとして必要です)

Appleからアイデンティティトークンを取得し、Supabaseに認証するために使用します。 supabase.auth.signInWithIdToken().

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

「Supabase Apple Login - General Setup」が使用されている場合 「Supabase Apple Login - General Setup」 認証とアカウントフローの計画に役立つため、 Using @capgo/capacitor-social-login 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 for the implementation detail in @capgo/capacitor-native-biometric, and Two-factor authentication ページを編集する