Firebase統合の紹介

概要

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

学習すること

• 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 プロジェクト

   • An existing Capacitor application
   • Capacitor Social Login plugin installed:

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

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

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

Code Repository: You can find the code repository here

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

• Firebase でのメール/パスワード認証
• Google Sign-In の統合 (Android、iOS、Web)
• A simple key-value store using Firebase Firestore collections
• User-specific data storage in Firestore subcollections

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

When using the Firebase JS SDK on Capacitor, you need to be aware that when using the authentication methods, you need to initialize the Firebase Auth instance a bit differently.

Webプラットフォームでは、 functionを使用して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 を参照してください。functionを使用して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統合の導入から続けてを使用している場合 Firebase統合の導入から続けて Firebase統合の導入から続けてを使用して、認証とアカウントフローの計画を実施し、 「@capgo/capacitor-social-login」 「@capgo/capacitor-social-login」 「@capgo/capacitor-social-login」 「@capgo/capacitor-passkey」 「@capgo/capacitor-passkey」 「@capgo/capacitor-native-biometric」 @capgo/capacitor-social-login Capgoの実装詳細については@capgo/capacitor-native-biometricに記載されています。 2要素認証 Capgoの実装詳細については2要素認証に記載されています。