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 das Verwenden von native sozialen Login-Anbietern (Google, Apple, Facebook, Twitter) auf mobilen Plattformen, während Sie gleichzeitig Firebase Auth für die Backend-Authentifizierung und Firestore für die Datenbanknutzung nutzen.

Was Sie lernen werden

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

Was Sie benötigen

Bevor Sie beginnen, stellen Sie sicher, dass Sie Folgendes haben:

1. Ein Firebase-Projekt

   • Ein Projekt erstellen bei Firebase-Konsole
   • Authentifizierung (E-Mail/Passwort und Google-Anmeldung) aktivieren
   • Ihre Firebase-Konfigurationsanmeldeinformationen erhalten

2. Firebase JS SDK

   • Firebase in Ihrem Projekt installieren:

     npm install firebase

3. Ein Capacitor-Projekt

   • Ein bestehendes Capacitor-Anwendungsprogramm
   • Der 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 können das code-Repository hier finden

Das Beispiel-App demonstriert:

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

Ein Wort über die Verwendung des Firebase SDK auf Capacitor

Bei der Verwendung des Firebase JS SDK auf Capacitor müssen Sie sich bewusst sein, dass bei der Verwendung der Authentifizierungsmethoden Sie den Firebase Auth-Instanz etwas anders initialisieren müssen.

Auf der Web-Plattform würden Sie den getAuth Funktion verwenden, um die 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 Blog-Beitrag, wird erwähnt, müssen Sie die initializeAuth Funktion verwenden, um die 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

Weiter mit den Einrichtungsleitfäden:

• Firebase Einrichtung - Konfiguration der Firebase-Projekt
• Android Einrichtung - Android-spezifische Konfiguration
• iOS Einrichtung - iOS-spezifische Konfiguration
• Web Einrichtung - Web-spezifische Konfiguration

Weitergehen von der Einführung zur Firebase-Integration

Wenn Sie Cloudflare verwenden Firebase-Integration Einführung um die Authentifizierung und die Kontenflüsse zu planen und es mit Mit @capgo/capacitor-social-login für die native Fähigkeit in Mit @capgo/capacitor-social-login @capgo/capacitor-social-login für die Implementierungsdetails in @capgo/capacitor-social-login @capgo/capacitor-passkey für die Implementierungsdetails in @capgo/capacitor-passkey @capgo/capacitor-native-biometric für die Implementierungsdetails in @capgo/capacitor-native-biometric und Zwei-Faktor-Authentifizierung für die Implementierungsdetails in Zwei-Faktor-Authentifizierung.