Einführung in die Firebase-Integration

Übersicht

In diesem Tutorial lernst du, wie du Firebase Authentication mit dem Capacitor Social Login Plugin einrichtest. Diese Integration ermöglicht die Nutzung nativer Social-Login-Provider (Google, Apple, Facebook, Twitter) auf mobilen Plattformen, während Firebase Auth für die Backend-Authentifizierung und Firestore für die Datenspeicherung genutzt wird.

Was du lernen wirst

• Firebase Authentication konfigurieren
• So integrierst du das Capacitor Social Login Plugin mit Firebase Auth
• Plattformspezifisches Setup für Android, iOS und Web

Was du benötigst

Before you begin, make sure you have:

1. Ein Firebase-Projekt

   • Erstelle ein Projekt unter Firebase Console
   • Authentifizierung aktivieren (E-Mail/Passwort und Google Sign-In)
   • Firebase-Konfigurationsdaten abrufen

2. Firebase JS SDK

   • Firebase in dein Projekt installieren:

     npm install firebase

3. Ein Capacitor Projekt

   • Eine bestehende Capacitor App
   • Capacitor Social Login Plugin installiert:

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

Beispielanwendung

Ein vollständiges, funktionierendes Beispiel findest du im Repository:

Code Repository: Das code Repository findest du hier

Die Beispiel-App zeigt:

• E-Mail/Passwort-Authentifizierung mit Firebase
• Google Sign-In-Integration (Android, iOS und Web)
• Ein einfacher Key-Value-Store via Firebase Firestore Collections
• Benutzerspezifische Datenspeicherung in Firestore Subcollections

Hinweis zur Nutzung des Firebase SDK auf Capacitor

Wenn du das Firebase JS SDK auf Capacitor nutzt, beachte bitte, dass die Firebase Auth Instanz bei der Verwendung der Authentifizierungsmethoden etwas anders initialisiert werden muss.

Auf der Web-Plattform würdest du die getAuth Funktion nutzen, 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 führt dazu, dass Firebase Auth hängen bleibt. Wie in diesem Blogpost, you need to use the initializeAuth Funktion zur Initialisierung der Firebase Auth-Instanz.\nSo sieht das 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 Setup-Guides:

• Firebase-Setup - Firebase-Projekt konfigurieren
• Android-Setup - Android-spezifische Konfiguration
• iOS-Setup - iOS-spezifische Konfiguration
• Web-Setup - Web-spezifische Konfiguration

Weiterlesen: Firebase Integration Introduction

Wenn du es nutzt Einführung in die Firebase-Integration Um Authentifizierungs- und Account-Flows zu planen, verbinde es mit @capgo/capacitor-social-login verwenden für die native Funktion bei der Verwendung von @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 zur Zwei-Faktor-Authentifizierung.