Firebase Integration の紹介

概要

このチュートリアルでは、Capacitorのソーシャルログインプラグインと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. Capacitor プロジェクト

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

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

例のアプリケーション

リポジトリに含まれる完全な実行可能な例があります。

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

例のアプリは以下を示しています

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

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

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

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

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のセットアップ - Firebaseプロジェクトの設定
• Androidのセットアップ - Android固有の設定
• iOS設定 - iOS用の設定
• Web設定 - Web用の設定

Firebase統合導入から続けて

Capacitorを使用している場合 Firebase統合導入 認証とアカウントフローの計画に使用し、Capacitorを使用して Using @capgo/capacitor-social-login for the native capability in Using @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要素認証 実装詳細については 2要素認証 に参照してください。