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 Project

   • プロジェクトを作成する Firebase Console
   • 認証を有効にする (Email/Password と Google Sign-In)
   • Firebase の構成資格情報を取得する

2. Firebase JS SDK

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

     npm install firebase

3. A Capacitor Project

   • An existing Capacitor application
   • Capacitor Social Login プラグインがインストールされています:

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

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

リポジトリ内の完全な実行可能なサンプルが用意されています。

Code リポジトリ: code リポジトリの場所をここで確認できます。

サンプルアプリケーションでは、以下の機能を実装しています。

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

FireBaseのSDKをCapacitorで使用する際の注意点

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

ウェブプラットフォームでは、FireBase Auth インスタンスを取得するために getAuth 関数を使用します。

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

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

Capacitorでは、この方法は機能せず、FireBase Authがハングアップする原因となります。 このブログ記事に記載されているように、FireBase Auth インスタンスを初期化するには initializeAuth 関数を使用する必要があります。 この方法は次のようになります。

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統合導入から続けてください

あなたが使用している Firebase統合導入 認証とアカウントフローの計画に使用している場合 Capgoの「@capgo/capacitor-social-login」 Capgoの「@capgo/capacitor-social-login」 Capgoの「@capgo/capacitor-social-login」 Capgoの「@capgo/capacitor-passkey」 Capgoの「@capgo/capacitor-passkey」 Capgoの「@capgo/capacitor-native-biometric」 Capgoの「@capgo/capacitor-native-biometric」 Capgoの「@capgo/capacitor-social-login」 2要素認証 2要素認証の実装詳細について