Firebase統合の紹介

概要

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

学習すること

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

必要なもの

Firebase Project

1. 必要なもの

   • プロジェクトを作成する Firebaseコンソール
   • 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を使用したメール/パスワード認証
• Android、iOS、Web向けのGoogle Sign-In統合
• Firebase Firestoreコレクションを使用したシンプルなキー値ストア
• Firestoreサブコレクションを使用したユーザー固有のデータストレージ

Firebase SDK を Capacitor 上で使用する際の注意点について

SDK JS SDKを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);

Unfortunately, on Capacitor, this does not work and causes Firebase auth to hang. As stated in を参照してください。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、Capacitor、GitHub、Capgo、API、SDK、CLI、npm、bunを使用している場合 Firebase Integration Introduction バータイトに当前トショナに得を不だされています。トショナを下だしたに送した。 Using @capgo/capacitor-サイショナバータイトを用だ。 for the native capability in Using @capgo/capacitor-サイショナバータイト。 @capgo/capacitor-サイショナバータイトを用だ。 for the implementation detail in @capgo/capacitor-サイショナバータイト。 @capgo/capacitor-コンタイトを用だ。 for the implementation detail in @capgo/capacitor-コンタイト。 @capgo/capacitor-コンタイトを用だ。 for the implementation detail in @capgo/capacitor-コンタイト。。バータイトを用だ。 Two-factor authentication for the implementation detail in Two-factor authentication.