Firebase連携の概要

概要

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

学習内容

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

必要なもの

開始前に、以下が用意されていることを確認してください：

1. Firebase プロジェクト

   • プロジェクトを作成： Firebase Console
   • 認証機能（メール/パスワードおよびGoogleログイン）を有効にする
   • Firebaseの設定情報を取得する

2. Firebase JS SDK

   • プロジェクトにFirebaseをインストールします：

     npm install firebase

3. Capacitor プロジェクト

   • 既存の Capacitor アプリケーション
   • Capacitor Social Login プラグインがインストール済みであること：

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

サンプルアプリケーション

動作確認済みの完全なサンプルがリポジトリに用意されています：

Code リポジトリ: code リポジトリはこちらから確認できます

このサンプルアプリでは以下を実演しています：

• Firebaseを使用したメールアドレス/パスワード認証
• Google Sign-Inの統合 (Android, iOS, Web)
• Firebase Firestoreコレクションを使用したシンプルなKey-Valueストア
• Firestoreサブコレクションへのユーザー固有データの保存

Capacitor で Firebase SDK を使用する場合の注意点

Capacitor で Firebase JS SDK を使用する場合、認証メソッドを利用する際に Firebase Auth インスタンスの初期化方法が通常と少し異なる点に注意してください。

Webプラットフォームでは、 getAuth を使用してFirebase Authインスタンスを取得します。

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

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

しかし残念ながら、Capacitor ではこれは動作せず、Firebaseの認証がハングしてしまいます。 こちらのブログ記事にある通り、 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 特有の設定

Firebase Integration Introduction の続き

使用している場合 Firebase連携の概要 認証とアカウントフローを計画するには、これを次と連携させてください @capgo/capacitor-social-login の使用 「@capgo/capacitor-social-login の使用」のネイティブ機能のために、 @capgo/capacitor-social-login @capgo/capacitor-social-login の実装の詳細については、 @capgo/capacitor-passkey @capgo/capacitor-passkey の実装詳細については、 @capgo/capacitor-native-biometric @capgo/capacitor-native-biometric の実装の詳細、および 2要素認証 二要素認証の実装の詳細については。