__CAPGO_KEEP_0__

Ü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
   • Authentifizierung (E-Mail/Passwort und Google-Anmeldung) aktivieren
   • Rufen Sie Ihre Firebase-Konfigurationsdaten ab

2. Firebase JS SDK

   • Installieren Sie Firebase in Ihrem Projekt:

     npm install firebase

3. Ein Capacitor-Projekt

   • Ein bestehendes Capacitor-Anwendungsprojekt
   • Capacitor Soziales 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)
• Ein einfaches Schlüssel-Wert-Speicher mit Firebase Firestore-Sammlungen
• Benutzerdatenspeicherung in Firestore-Unterkollektionen

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

Weitere Schritte

Fahren Sie mit den Einrichtungshilfen fort:

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

Fortsetzen von der Einführung zur Firebase-Integration

Wenn Sie Firebase-Integration-Einführung zur Planung der Authentifizierung und der Kontenflüsse 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 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 Wenn Sie Firebase-Integration-Einführung verwenden, um die Authentifizierung und die Kontenflüsse zu planen, verbinden Sie es mit @capgo/capacitor-social-login, @capgo/capacitor-passkey und @capgo/capacitor-native-biometric. Zweifaktor-Authentifizierung für die Implementierungsdetails in Zweifaktor-Authentifizierung.