Erste Schritte mit Firebase-Authentifizierung auf Websites

Sie können Firebase-Authentifizierung verwenden, um Benutzern zu ermöglichen, sich bei Ihrer App mit einer oder mehreren Anmeldemethoden anzumelden, einschließlich E-Mail-Adressen- und Kennwortanmeldung sowie Anbieter von verknüpften Identitäten wie Google Sign-in und Facebook Login. Dieses Tutorial zeigt Ihnen, wie Sie die Firebase-Authentifizierung nutzen können, indem es Ihnen zeigt, wie Sie die Anmeldung mit E-Mail-Adresse und Passwort zu Ihrer App hinzufügen.

Verbinden Sie Ihre App mit Firebase

Installieren Sie das Firebase SDK. Stellen Sie sicher, dass Sie den Konfigurationscode wie beschrieben in Ihre Webseite einfügen.

(Optional) Prototyping und Testen mit der Firebase Local Emulator Suite

Bevor wir darüber sprechen, wie Ihre App Benutzer authentifiziert, stellen wir Ihnen eine Reihe von Tools vor, die Sie zum Prototyping und Testen der Authentifizierungsfunktionalität verwenden können:Firebase Local Emulator Suite. Wenn Sie zwischen verschiedenen Authentifizierungstechniken und -anbietern entscheiden, verschiedene Datenmodelle mit öffentlichen und privaten Daten unter Verwendung von Authentifizierung und Firebase-Sicherheitsregeln ausprobieren oder Prototypen von Anmelde-UI-Designs erstellen möchten, kann die Möglichkeit, lokal zu arbeiten, ohne Live-Dienste bereitzustellen, eine großartige Idee sein.

Ein Authentifizierungsemulator ist Teil der Local Emulator Suite, die es Ihrer App ermöglicht, mit emulierten Datenbankinhalten und -konfigurationen sowie optional mit Ihren emulierten Projektressourcen (Funktionen, anderen Datenbanken und Sicherheitsregeln) zu interagieren. Beachten Sie, dass die Local Emulator Suite noch keinen emulierten Speicher unterstützt.

Die Verwendung des Authentifizierungsemulators erfordert nur wenige Schritte:

1. Hinzufügen einer Codezeile in die Testkonfiguration Ihrer Anwendung, um eine Verbindung zum Emulator herzustellen.
2. Aus dem Stammverzeichnis des lokalen Projektverzeichnisses wird firebase emulators:start ausgeführt.
3. Verwendung der Local Emulator Suite UI für interaktives Prototyping oder der Authentifizierungsemulator REST API für nicht-interaktive Tests.

Eine ausführliche Anleitung finden Sie unter Verbinden Sie Ihre App mit dem Authentifizierungsemulator.

Weiter geht’s mit der Authentifizierung von Benutzern.

Neue Benutzer anmelden

Erstellen Sie ein Formular, mit dem sich neue Benutzer mit ihrer E-Mail-Adresse und einem Passwort bei Ihrer App registrieren können. Wenn ein Benutzer das Formular ausfüllt, validieren Sie die E-Mail-Adresse und das Passwort, die der Benutzer angegeben hat, und übergeben Sie sie dann an die MethodecreateUserWithEmailAndPassword:

Bestehende Benutzer anmelden

Erstellen Sie ein Formular, mit dem sich bestehende Benutzer mit ihrer E-Mail-Adresse und ihrem Passwort anmelden können. Wenn ein Benutzer das Formular ausfüllt, rufen Sie die MethodesignInWithEmailAndPassword auf:

Setzen Sie einen Beobachter für den Authentifizierungsstatus und rufen Sie Benutzerdaten ab

Für jede Seite Ihrer Anwendung, die Informationen über den angemeldeten Benutzer benötigt, hängen Sie einen Beobachter an das globale Authentifizierungsobjekt an. Dieser Beobachter wird immer dann aufgerufen, wenn sich der Anmeldestatus des Benutzers ändert.

Fügen Sie den Beobachter mit der Methode onAuthStateChanged hinzu. Wenn sich ein Benutzer erfolgreich anmeldet, können Sie Informationen über den Benutzer im Beobachter abrufen.

Lernen Sie, wie Sie Unterstützung für andere Identitätsanbieter und anonyme Gastkonten hinzufügen:

• Google-Anmeldung
• Facebook-Anmeldung
• Twitter-Anmeldung
• GitHub-Anmeldung
• Anonyme Anmeldung