Firebase-Integration-Einführung

Übersicht

Diese Anleitung führt Sie durch die Einrichtung der Firebase-Authentifizierung mit dem Capacitor-Social-Login-Plugin. Diese Integration ermöglicht Ihnen, native soziale Anmeldeanbieter (Google, Apple, Facebook, Twitter) auf mobilen Plattformen zu verwenden, während Sie gleichzeitig Firebase Auth für die Backendauthentifizierung und Firestore für die Datenspeicherung nutzen.

Wat ihr lernen werdet

• Wie Firebase-Authentifizierung konfigurieren
• Wie das Capacitor-Social-Login-Plugin mit Firebase Auth integrieren
• Plattform-spezifische Einrichtung für Android, iOS und Web

Wat ihr benötigt

Stellen Sie sicher, dass Sie folgendes haben:

1. A Firebase Projekt

   • Erstelle ein Projekt bei Firebase-Konsolen
   • Authentifizierung (E-Mail/Passwort und Google-Anmeldung) aktivieren
   • Ermittle deine Firebase-Konfigurationsanmeldeinformationen

2. Firebase JS SDK

   • Installiere Firebase in deinem Projekt:

     npm install firebase

3. Ein Capacitor-Projekt

   • Ein bestehendes Capacitor-Anwendungsprojekt
   • Capacitor-Social-Login-Plugin installiert:

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

Beispielanwendung

Ein vollständiges funktionierendes Beispiel ist im Repository verfügbar:

Code Repository: Sie finden das code Repository hier

Das Beispiel-App demonstriert:

• E-Mail-/Passwort-Authentifizierung mit Firebase
• Google-Sign-In-Integration (Android, iOS und Web)
• Ein einfaches Schlüssel-Wert-Speicher mit Firebase Firestore-Sammlungen
• Benutzer-spezifische Daten-Speicherung in Firestore-Untersammlungen

Ausführliche Informationen zum Einsatz des Firebase SDK auf Capacitor

Beim Einsatz des Firebase JS SDK auf Capacitor müssen Sie sich bewusst sein, dass bei der Verwendung der Authentifizierungsmethoden eine Initialisierung des Firebase Auth-Instanzen etwas anders erfolgen muss.

Bei der Verwendung der Web-Plattform würden Sie die getAuth Funktion verwenden, um den Firebase Auth-Instanz zu erhalten.

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

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

Leider funktioniert dies auf Capacitor nicht und verursacht einen Hängestand bei Firebase Auth. Wie in diesem Blogbeitragbeschrieben, müssen Sie die initializeAuth Funktion verwenden, um den Firebase Auth-Instanz zu initialisieren. Dies sieht wie folgt aus:

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();

Nächste Schritte

Mit den Einrichtungsleitfäden fortfahren:

• Firebase-Einrichtung - Konfiguration des Firebase-Projekts
• Android-Einrichtung - Android-spezifische Konfiguration
• iOS-Einrichtung - iOS-spezifische Konfiguration
• Web-Einrichtung - Web-spezifische Konfiguration

Weitergehen von der Firebase-Integration-Einführung

Wenn Sie Firebase verwenden Firebase-Integration-Einführung um die Authentifizierung und die Kontenflüsse zu planen, verbinden Sie es mit Mithilfe von @capgo/capacitor-social-login für die native Fähigkeit in Mithilfe von @capgo/capacitor-social-login Mithilfe von @capgo/capacitor-social-login für die Implementierungsdetails in @capgo/capacitor-Social-Login, @capgo/capacitor-Passkey Mithilfe von @capgo/capacitor-native-biometric @capgo/capacitor-native-biometrisch für die Implementierungsdetails in @capgo/capacitor-native-biometrisch, und Zweifaktor-Authentifizierung Für die Implementierungsdetails in der Zwei-Faktor-Authentifizierung.