Supabase Apple Login - General Setup

概要

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

前提条件

__CAPGO_KEEP_0__を開始する前に、以下のことを確認してください:

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

2. Apple Login General Setup Apple OAuth認証の設定方法を読んでください Apple OAuth認証の設定方法を読んでください。

3. Androidの設定方法

   • iOSの設定方法
   • Webの設定方法
   • 注意

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

   __CAPGO_KEEP_1__

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

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

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

2. あなたのプロジェクトをクリック

   

3. メニューに移動 Authentication Supabase認証メニュー

   

4. メニュー Providers タブ

   

5. を探してください Apple プロバイダ

   

6. を有効にします Apple プロバイダ

   

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

   注意

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

   

8. クリックしてください Save ボタン

   

   注意

   あなた あなたは設定する必要がありません。 私たちはカスタムバックエンド実装を実行して、Appleログインを処理します。 Secret key (for OAuth)Voilà,あなたはSupabase AuthenticationでApple Sign-Inを有効にしました 🎉

Authentication Helperを使用する

「Authentication Helperを使用する」のセクション

完全な実装には、サポートベースのヘルパー関数が含まれます。 authenticateWithAppleSupabase() この関数は、SupabaseでApple Sign-Inフローを完全に処理します。

• Apple Sign-Inをプラットフォーム固有の構成で初期化します。
• iOSではネイティブで、Android/WebではOAuthリダイレクトで認証フローを処理します。
• Appleからアイデンティティトークンを抽出します。
• アイデンティティトークンを使用して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);
}

どうやって動くか

__CAPGO_KEEP_0__はプラットフォーム固有の差異を自動的に処理します。

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

__CAPGO_KEEP_1__からAppleが発行したIDトークンを取得し、それをSupabaseと認証します supabase.auth.signInWithIdToken().

Supabase Apple Login - General Setup

Supabase Apple Login - General Setupの場合 Supabase Apple Login - General Setup 認証とアカウントフローの計画に使用し、 @capgo/capacitor-social-login @capgo/capacitor-social-loginのネイティブ機能 @capgo/capacitor-social-login @capgo/capacitor-social-loginの実装詳細 @capgo/capacitor-passkey @capgo/capacitor-passkeyの実装詳細 @capgo/capacitor-passkey 実装詳細については @capgo/capacitor-native-biometric に参照してください。 2要素認証 実装詳細については 2要素認証 に参照してください。