Firebase統合の導入

概要

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

学ぶこと

• Firebase Authenticationの設定方法
• CapacitorのソーシャルログインプラグインとFirebase Authの統合方法
• Android、iOS、Web用のプラットフォーム固有の設定

必要なもの

始める前に、以下を確認してください:

1. Firebase Project

   • Firebase Consoleでプロジェクトを作成する Firebase Console
   • Email/パスワードと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を使用したメール/パスワード認証
• Google Sign-Inの統合 (Android、iOS、Web)
• Firebase Firestoreコレクションを使用したシンプルなキー値ストア
• ユーザー固有のデータの保存はFirestoreサブコレクション内で行います。

SDKをCapacitor上で使用することについての話

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

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

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

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

Capacitor コピー__CAPGO_KEEP_0__では、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 の特定の設定

__CAPGO_KEEP_0__

あなたが Firebase統合の紹介 を使用して認証とアカウントフローの計画を行っている場合、Cloudflareの @capgo/capacitor-social-login for the native capability in Using @capgo/capacitor-social-login, @capgo/capacitor-social-login は、@capgo/capacitor-social-loginのnative capabilityの実装詳細です。 @capgo/capacitor-social-login は、@capgo/capacitor-social-loginの実装詳細です。 @capgo/capacitor-passkey は、@capgo/capacitor-passkeyの実装詳細です。 2要素認証 2要素認証の実装詳細について