Einführung zur Firebase-Integration

Übersicht

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

Was Sie lernen werden

• How Firebase Authentication zu konfigurieren
• Wie Sie den Capacitor Social Login Plugin mit Firebase Auth integrieren
• Plattform-spezifische Einrichtung für Android, iOS und Web

Wat Sie benötigen

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

1. Einen Firebase-Projekt

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

2. Firebase JS SDK

   • Install Firebase in your Projekt:

     npm install firebase

3. Ein Capacitor Projekt

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

Das Beispiel-App demonstriert:

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

Etwas über die Verwendung des Firebase SDK auf Capacitor

Wenn Sie das Firebase JS SDK auf Capacitor verwenden, müssen Sie sich bewusst sein, dass Sie bei der Verwendung der Authentifizierungsmethoden den Firebase Auth-Instanz ein bisschen anders initialisieren müssen.

Auf der Web-Plattform würden Sie die 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 das auf Capacitor nicht und verursacht einen Hängestand bei Firebase auth. Wie in diesem Blogbeitragbeschrieben, initializeAuth funktion

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

In die Zwischenablage kopieren

Abschnitt mit dem Titel “Weitere Schritte”

• Mit der Konfiguration der Setup-Anleitungen fortfahren: Firebase-Konfiguration
• - Konfiguration des Firebase-Projekts - Android-Konfiguration
• iOS-Einrichtung - iOS-spezifische Konfiguration
• Web-Einrichtung - Web-spezifische Konfiguration

Weitergehen von der Einführung zur Firebase-Integration

Wenn Sie Firebase-Integration zur Planung der Authentifizierung und der Kontoflows verwenden, verbinden Sie es mit Mit @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login für die native Fähigkeit in Mit @capgo/capacitor-social-login, @capgo/capacitor-social-login Mit @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 Zweifaktor-Authentifizierung für die Implementierungsdetails in Zweifaktor-Authentifizierung.