Firebase統合の紹介

概要

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

学びます

• Firebase Authenticationを設定する方法
• Firebase AuthとCapacitor Social Login プラグインを統合する方法
• 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プラットフォームでは、Firebase Auth インスタンスを取得するために使用する getAuth function

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

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

残念ながら、Capacitorでは、この方法は機能せず、Firebase Authがハングすることになります。 このブログ記事に記載されているように、Firebase Auth インスタンスを取得するには、 initializeAuth functionを使用する必要があります。 この方法は次のようになります:

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統合の導入から続けて 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 Capgoの実装詳細については@capgo/capacitor-native-biometricのページを参照してください。 2要素認証 Capgoの実装詳細については2要素認証のページを参照してください。