Save the date - Google I/O returns May 18-20. Register to get the most out of the digital experience: Build your schedule, reserve space, participate in Q&As, earn Google Developer profile badges, and more. Register now
Diese Seite wurde von der Cloud Translation API übersetzt.
Switch to English

Erste Schritte mit der Firebase-Authentifizierung auf Websites

Mithilfe der Firebase-Authentifizierung können Benutzer sich mit einer oder mehreren Anmeldemethoden, einschließlich E-Mail-Adresse und Kennwortanmeldung, sowie mit Verbundidentitätsanbietern wie Google Sign-In und Facebook Login bei Ihrer App anmelden. In diesem Tutorial erfahren Sie, wie Sie Ihrer App eine E-Mail-Adresse und ein Kennwort 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) Prototyp und Test mit Firebase Local Emulator Suite

Bevor wir darüber sprechen, wie Ihre App Benutzer authentifiziert, stellen wir Ihnen eine Reihe von Tools vor, mit denen Sie die Authentifizierungsfunktionen prototypisieren und testen können: Firebase Local Emulator Suite. Wenn Sie sich für Authentifizierungstechniken und -anbieter entscheiden, verschiedene Datenmodelle mit öffentlichen und privaten Daten mithilfe von Authentifizierungs- und Firebase-Sicherheitsregeln auszuprobieren oder Anmelde-UI-Designs als Prototyp zu erstellen, kann es eine gute Idee sein, lokal zu arbeiten, ohne Live-Dienste bereitzustellen .

Ein Authentifizierungsemulator ist Teil der Local Emulator Suite, mit der Ihre App mit dem emulierten Datenbankinhalt und der Konfiguration sowie optional mit Ihren emulierten Projektressourcen (Funktionen, andere Datenbanken und Sicherheitsregeln) interagieren kann. Beachten Sie, dass die Local Emulator Suite emulierten Cloud-Speicher noch nicht unterstützt.

Die Verwendung des Authentifizierungsemulators umfasst nur wenige Schritte:

  1. Hinzufügen einer Codezeile zur Testkonfiguration Ihrer App, um eine Verbindung zum Emulator herzustellen.
  2. Führen Sie im Stammverzeichnis Ihres lokalen Projektverzeichnisses firebase emulators:start .
  3. Verwenden der Benutzeroberfläche der Local Emulator Suite für interaktives Prototyping oder der REST-API des Authentifizierungsemulators für nicht interaktive Tests.

Eine ausführliche Anleitung finden Sie unter Verbinden Sie Ihre App mit dem Authentifizierungsemulator . Weitere Informationen finden Sie in der Einführung zur Local Emulator Suite .

Fahren wir nun mit der Authentifizierung von Benutzern fort.

Neue Benutzer anmelden

Erstellen Sie ein Formular, mit dem sich neue Benutzer mit ihrer E-Mail-Adresse und einem Kennwort bei Ihrer App registrieren können. Wenn ein Benutzer das Formular createUserWithEmailAndPassword , createUserWithEmailAndPassword die vom Benutzer angegebene E-Mail-Adresse und das Kennwort und übergeben Sie sie an die Methode createUserWithEmailAndPassword :

Web v8

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

Web v9

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;
    // ..
  });

Melden Sie vorhandene Benutzer an

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 signInWithEmailAndPassword , rufen Sie die Methode signInWithEmailAndPassword :

Web v8

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

Web v9

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

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

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

Hängen Sie den Beobachter mit der Methode onAuthStateChanged . Wenn sich ein Benutzer erfolgreich anmeldet, können Sie im Beobachter Informationen über den Benutzer abrufen.

Web v8

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
    // ...
  }
});

Web v9

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
    // ...
  }
});

Nächste Schritte

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