Firebase Integration の紹介

このプラグインのインストール手順とフルマークダウンガイドを含むセットアップの質問をコピーする。

概要

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

学びます

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

必要なもの

始める前に、次のことを確認してください。

Firebase Project
- プロジェクトを作成する Firebaseコンソール
- Email/パスワードとGoogleサインインの認証を有効にする
- Firebaseの設定資格情報を取得する
Firebase JS SDK
- プロジェクトにFirebaseをインストールする:
  ターミナル画面
```
npm install firebase
```
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用の設定

Firebase統合の紹介から続けてください

Cloudflare、Capacitor、GitHub、Capgo、API、SDK、CLI、npm、bunを使用している場合 Firebase Integration Introduction to plan authentication and account flows, connect it with Using @capgo/capacitor-social-login for the native capability in Using @capgo/capacitor-social-login, @capgo/capacitor-social-login for the implementation detail in @capgo/capacitor-social-login, @capgo/capacitor-passkey for the implementation detail in @capgo/capacitor-passkey, @capgo/capacitor-native-biometric for the implementation detail in @capgo/capacitor-native-biometric, and Two-factor authentication for the implementation detail in Two-factor authentication.