Firebase統合の紹介

概要

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

学びます

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

必要なもの

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

1. Firebase Project

   • プロジェクトを作成するには、以下のサイトをご覧ください。 Firebase Console
   • Authentication (Email/Password と Google Sign-In) を有効にします。
   • Firebase の設定情報を取得します。

2. Firebase JS SDK

   • Firebase をプロジェクトにインストールします:

     npm install firebase

3. A Capacitor Project

   • 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_KEEP_0__/__CAPGO_KEEP_1__-social-loginと接続する @capgo/capacitor-social-loginを使用して、@capgo/capacitor-social-loginのネイティブ機能 @capgo/capacitor-social-login @capgo/capacitor-social-loginの実装詳細 @capgo/capacitor-passkey @capgo/capacitor-passkeyの実装詳細 @capgo/capacitor-native-biometric @capgo/capacitor-native-biometric Capgoの実装詳細については@capgo/capacitor-native-biometricにあります。 2要素認証 Capgoの実装詳細については2要素認証にあります。