Catch up on everything we announced at this year's Firebase Summit. Learn more

Erste Schritte mit der Firebase-Authentifizierung auf Websites

Sie können Firebase Authentication verwenden, um Benutzern zu ermöglichen, sich bei Ihrer App mit einer oder mehreren Anmeldemethoden anzumelden, einschließlich E-Mail-Adresse und Kennwortanmeldung, und Verbundidentitätsanbietern wie Google Sign-in und Facebook Login. In diesem Tutorial erfahren Sie, wie Sie Ihrer App eine E-Mail-Adresse und ein Passwort hinzufügen, um mit Firebase Authentication zu beginnen.

Verbinden Sie Ihre App mit Firebase

Installieren Sie das SDK Firebase . Achten Sie darauf, den Konfigurationscode wie beschrieben in Ihre Webseite einzufügen.

(Optional) Prototyp und Test mit Firebase Local Emulator Suite

Bevor wir darüber sprechen, wie Ihre App Benutzer authentifiziert, stellen wir eine Reihe von Tools vor, mit denen Sie die Authentifizierungsfunktionalität testen und testen können: Firebase Local Emulator Suite. Wenn Sie sich zwischen Authentifizierungstechniken und -anbietern entscheiden, verschiedene Datenmodelle mit öffentlichen und privaten Daten mithilfe von Authentifizierungs- und Firebase-Sicherheitsregeln ausprobieren oder Prototypen von Anmelde-UI-Designs erstellen, kann es eine gute Idee sein, lokal zu arbeiten, ohne Live-Dienste bereitzustellen .

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, andere Datenbanken und Sicherheitsregeln) zu interagieren.

Die Verwendung des Authentifizierungsemulators umfasst nur wenige Schritte:

  1. Hinzufügen einer Codezeile zur Testkonfiguration Ihrer App, um eine Verbindung zum Emulator herzustellen.
  2. Von der Wurzel Ihrer lokalen Projektverzeichnis, laufen firebase emulators:start .
  3. Verwenden der Local Emulator Suite-Benutzeroberfläche für interaktives Prototyping oder der Authentifizierungsemulator-REST-API für nicht interaktive Tests.

Eine detaillierte Anleitung finden Sie unter Connect Ihre App auf die Authentifizierung Emulator . Weitere Informationen finden Sie in der Local Emulator Suite Einführung .

Fahren wir nun mit der Authentifizierung von Benutzern fort.

Registrieren Sie neue Benutzer

Erstellen Sie ein Formular, das es neuen Benutzern ermöglicht, sich mit ihrer E-Mail-Adresse und einem Passwort bei Ihrer App zu registrieren. Wenn ein Benutzer das Formular ausfüllt, bestätigt die E - Mail - Adresse und das Passwort durch den Benutzer zur Verfügung gestellt und sie dann zum Pass createUserWithEmailAndPassword Methode:

Webversion 9

import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();
createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ..
  });

Webversion 8

firebase.auth().createUserWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in 
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    // ..
  });

Vorhandene Benutzer anmelden

Erstellen Sie ein Formular, mit dem sich vorhandene Benutzer mit ihrer E-Mail-Adresse und ihrem Kennwort anmelden können. Wenn ein Benutzer das Formular ausfüllt, rufen Sie die signInWithEmailAndPassword Methode:

Webversion 9

import { getAuth, signInWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();
signInWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
  });

Webversion 8

firebase.auth().signInWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
  });

Stellen Sie einen Authentifizierungszustandsbeobachter ein und rufen Sie Benutzerdaten ab

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

Befestigen der Beobachter die Verwendung onAuthStateChanged Methode. Wenn sich ein Benutzer erfolgreich anmeldet, können Sie im Beobachter Informationen über den Benutzer abrufen.

Webversion 9

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth();
onAuthStateChanged(auth, (user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/firebase.User
    const uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});

Webversion 8

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/firebase.User
    var uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});

Nächste Schritte

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