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 Backend-Authentifizierung und Firestore für die Datenspeicherung nutzen.

Was Sie lernen werden

• Wie Sie Firebase-Authentifizierung konfigurieren
• 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

   • Erstellen Sie ein Projekt bei Firebase-Konsole
   • Aktivieren Sie die Authentifizierung (E-Mail/Passwort und Google-Anmeldung)
   • Holen Sie sich Ihre Firebase-Konfigurationsanmeldeinformationen

2. Firebase JS SDK

   • Installieren Sie Firebase in Ihrem 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

Die Beispielanwendung demonstriert:

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

A word about using the Firebase SDK on 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.

Bei der Verwendung des Firebase-Firestore 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 dies auf Capacitor nicht und verursacht einen Hängestand von Firebase auth. Wie in diesem Blog-Beitragbeschrieben, 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

Mit den Einrichtungsleitfäden fortfahren:

• Firebase-Einrichtung - Konfigurieren Sie das Firebase-Projekt
• Android-Einrichtung - Android-spezifische Konfiguration
• iOS-Einrichtung - iOS-spezifische Konfiguration
• Web-Einrichtung - Web-spezifische Konfiguration

Fortschrittlich von Firebase Integration Einführung fortsetzen

Wenn Sie Firebase Integration Einführung verwenden Firebase Integration Einführung um die Authentifizierung und die Kontenflüsse zu planen und es mit Verwenden Sie @capgo/capacitor-social-login zur nativen Fähigkeit in Verwenden Sie @capgo/capacitor-social-login @capgo/capacitor-social-login zur Implementierungsdetail in @capgo/capacitor-social-login @capgo/capacitor-passkey zur Implementierungsdetail in @capgo/capacitor-passkey @capgo/capacitor-native-biometric zur Implementierungsdetail in @capgo/capacitor-native-biometrisch, und Zwei-Faktor-Authentifizierung zur Implementierungsdetail in Zwei-Faktor-Authentifizierung.