Firebase統合の紹介

概要

このチュートリアルでは、Firebase AuthenticationとCapacitor Social Login プラグインを設定する方法を紹介します。この統合により、モバイルプラットフォームでネイティブのソーシャルログインプロバイダー（Google、Apple、Facebook、Twitter）を使用し、バックエンドの認証とデータストレージのためにFirebase AuthとFirestoreを活用できます。

学びます

• Firebase Authenticationを設定する方法
• Firebase AuthとCapacitor Social Login プラグインを統合する方法
• Android、iOS、Web向けのプラットフォーム固有の設定

必要なもの

始める前に、以下のことを確認してください。

1. Firebase Project

   • プロジェクトを作成するには Firebase Console
   • 認証を有効にする (メール/パスワードとGoogleサインイン)
   • Firebaseの設定資格情報を取得する

2. Firebase JS SDK

   • プロジェクトにFirebaseをインストールする:

     npm install firebase

3. Capacitor プロジェクト

   • 既存の Capacitor アプリケーション
   • Capacitor ソーシャルログインプラグインがインストールされている:

     npm install @capgo/capacitor-social-login
     npx cap sync

例のアプリケーション

リポジトリ内に実行可能な完全な例が用意されています：

Code リポジトリ: code リポジトリはこちらで見つけることができます

この例アプリでは、以下の機能を実装しています

• Firebaseを使用したEmail/パスワード認証
• Google Sign-Inの統合（Android、iOS、Web）
• Firebase Firestoreコレクションを使用したシンプルなキー値ストア
• ユーザー固有のデータのストレージ（Firestoreサブコレクション）

Firebase SDKをCapacitorで使用することについての注意

Firebase JS SDKをCapacitorで使用する場合、認証方法を使用する際には、Firebase Auth インスタンスを少し異なる方法で初期化する必要があります。

ウェブプラットフォームでは、 getAuth __CAPGO_KEEP_0__で、Firebase Auth インスタンスを取得するために使用する

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

Capacitorでは、この機能を使用すると、Firebase Auth が停止します。 この問題については、__CAPGO_KEEP_0__で説明されています。 initializeAuth Firebase Auth インスタンスを初期化するために使用する

import { initializeApp } from 'firebase/app';
import { initializeAuth } from 'firebase/auth';

const app = initializeApp(firebaseConfig);

function whichAuth() {
  let auth;
  if (Capacitor.isNativePlatform()) {
    auth = initializeAuth(app, {
      persistence: indexedDBLocalPersistence,
    });
  } else {
    auth = getAuth(app);
  }
  return auth;
}

export const auth = whichAuth();

次のステップ

セットアップガイドを続けてください：

• Firebase セットアップ - Firebase プロジェクトの設定
• Android の設定 - Android に特有の設定
• iOS の設定 - iOS に特有の設定
• Web の設定 - Web に特有の設定