Mit passwortbasierten Konten mit JavaScript bei Firebase authentifizieren

Sie können Firebase Authentication verwenden, damit sich Ihre Nutzer mit ihren E-Mail-Adressen und Passwörtern bei Firebase authentifizieren können und um die passwortbasierten Konten Ihrer Anwendung zu verwalten.

Hinweis

  1. Fügen Sie Ihrem JavaScript-Projekt Firebase hinzu.
  2. Wenn Sie Ihre App noch nicht mit Ihrem Firebase-Projekt verknüpft haben, tun Sie dies in der Firebase Console.
  3. Anmeldung per E-Mail-Adresse/Passwort aktivieren:
    1. Öffne in der Firebase Console den Bereich Auth.
    2. Aktivieren Sie auf dem Tab Anmeldemethode die Anmeldemethode E-Mail/Passwort und klicken Sie auf Speichern.

Passwortbasiertes Konto erstellen

Führen Sie auf der Anmeldeseite Ihrer Anwendung die folgenden Schritte aus, um ein neues Nutzerkonto mit Passwort zu erstellen:

  1. Wenn sich ein neuer Nutzer über das Anmeldeformular Ihrer Anwendung registriert, führen Sie alle neuen Schritte zur Kontovalidierung aus, die für Ihre Anwendung erforderlich sind. Prüfen Sie z. B., ob das Passwort des neuen Kontos richtig eingegeben wurde und Ihre Komplexitätsanforderungen erfüllt.
  2. Erstellen Sie ein neues Konto, indem Sie die E-Mail-Adresse und das Passwort des neuen Nutzers an createUserWithEmailAndPassword übergeben:

    Web

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

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

    Web

    firebase.auth().createUserWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in 
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    // ..
  });
    email.js
    Wenn das neue Konto erstellt wurde, wird der Nutzer automatisch angemeldet. Im Abschnitt „Nächste Schritte“ unten finden Sie die Details zum angemeldeten Nutzer.

    Hier können Sie auch Fehler abfangen und behandeln. Eine Liste der Fehlercodes findest du in den Auth-Referenzdokumenten.

Nutzer mit E-Mail-Adresse und Passwort anmelden

Die Schritte zum Anmelden eines Nutzers mit einem Passwort ähneln denen zum Erstellen eines neuen Kontos. Gehen Sie auf der Anmeldeseite Ihrer App so vor:

  1. Wenn sich ein Nutzer in Ihrer App anmeldet, übergeben Sie die E-Mail-Adresse und das Passwort des Nutzers an signInWithEmailAndPassword:

    Web

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

    Web

    firebase.auth().signInWithEmailAndPassword(email, password)
  .then((userCredential) => {
    // Signed in
    var user = userCredential.user;
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
  });
    email.js
    Im Abschnitt „Nächste Schritte“ unten finden Sie die Details zum angemeldeten Nutzer.

    Hier können Sie auch Fehler erkennen und beheben. Eine Liste der Fehlercodes finden Sie in der Referenzdokumentation zur Authentifizierung.

Empfohlen: Passwortrichtlinie festlegen

Sie können die Kontosicherheit verbessern, indem Sie Anforderungen an die Komplexität von Passwörtern erzwingen.

Öffnen Sie zum Konfigurieren einer Passwortrichtlinie für Ihr Projekt den Tab Passwortrichtlinie auf der Seite „Authentifizierungseinstellungen“ der Firebase-Konsole:

Authentifizierungseinstellungen

Die Passwortrichtlinien von Firebase Authentication unterstützen die folgenden Passwortanforderungen:

  • Kleinbuchstaben erforderlich

  • Großbuchstaben erforderlich

  • Numerisches Zeichen erforderlich

  • Nicht alphanumerisches Zeichen erforderlich

    Die folgenden Zeichen erfüllen die Anforderung an nicht alphanumerische Zeichen: ^ $ * . [ ] { } ( ) ? " ! @ # % & / \ , > < ' : ; | _ ~

  • Mindestlänge des Passworts (6 bis 30 Zeichen, standardmäßig 6)

  • Maximale Passwortlänge (maximal 4.096 Zeichen)

Sie können die Erzwingung von Passwortrichtlinien in zwei Modi aktivieren:

  • Erforderlich: Anmeldeversuche schlagen fehl, bis der Nutzer ein Passwort verwendet, das Ihrer Richtlinie entspricht.

  • Benachrichtigen: Nutzer können sich mit einem nicht konformen Passwort registrieren. Wenn Sie diesen Modus verwenden, sollten Sie prüfen, ob das Passwort des Nutzers der Richtlinie auf Clientseite entspricht, und den Nutzer auffordern, sein Passwort zu aktualisieren, wenn er es nicht erfüllt.

Neue Nutzer müssen immer ein Passwort wählen, das Ihren Richtlinien entspricht.

Wenn Sie aktive Nutzer haben, empfehlen wir, die erzwungene Umstellung bei der Anmeldung nicht zu aktivieren, es sei denn, Sie möchten den Zugriff für Nutzer blockieren, deren Passwörter nicht Ihren Richtlinien entsprechen. Verwenden Sie stattdessen den Benachrichtigungsmodus, mit dem sich Nutzer mit ihrem aktuellen Passwort anmelden können und über die Anforderungen informiert werden, die ihr Passwort nicht erfüllt.

Passwort auf dem Client prüfen

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

const status = await validatePassword(getAuth(), passwordFromUser);
if (!status.isValid) {
  // Password could not be validated. Use the status to show what
  // requirements are met and which are missing.

  // If a criterion is undefined, it is not required by policy. If the
  // criterion is defined but false, it is required but not fulfilled by
  // the given password. For example:
  const needsLowerCase = status.containsLowercaseLetter !== true;
}

Empfohlen: Schutz vor E-Mail-Enumeration aktivieren

Bei einigen Firebase Authentication-Methoden, die E-Mail-Adressen als Parameter annehmen, werden bestimmte Fehler ausgegeben, wenn die E-Mail-Adresse nicht registriert ist, obwohl sie registriert sein muss (z. B. bei der Anmeldung mit einer E-Mail-Adresse und einem Passwort) oder registriert ist, obwohl sie nicht verwendet werden darf (z. B. beim Ändern der E-Mail-Adresse eines Nutzers). Dies kann hilfreich sein, um Nutzern bestimmte Abhilfemaßnahmen vorzuschlagen, kann aber auch von böswilligen Akteuren missbraucht werden, um die von Ihren Nutzern registrierten E-Mail-Adressen zu ermitteln.

Um dieses Risiko zu minimieren, empfehlen wir Ihnen, den Schutz vor E-Mail-Aufzählung für Ihr Projekt mit dem Google Cloud-Tool gcloud zu aktivieren. Hinweis: Wenn Sie diese Funktion aktivieren, ändert sich das Verhalten der Fehlerberichte von Firebase Authentication: Ihre Anwendung sollte nicht auf die spezifischeren Fehler angewiesen sein.

Nächste Schritte

Nachdem sich ein Nutzer zum ersten Mal angemeldet hat, wird ein neues Nutzerkonto erstellt und mit den Anmeldedaten verknüpft, d. h. mit dem Nutzernamen und Passwort, der Telefonnummer oder den Informationen zum Authentifizierungsanbieter, mit denen sich der Nutzer angemeldet hat. Dieses neue Konto wird als Teil Ihres Firebase-Projekts gespeichert und kann verwendet werden, um einen Nutzer in jeder App Ihres Projekts zu identifizieren, unabhängig davon, wie sich der Nutzer anmeldet.

  • In Ihren Apps sollten Sie den Authentifizierungsstatus des Nutzers am besten über einen Beobachter für das Auth-Objekt ermitteln. Die grundlegenden Profilinformationen des Nutzers können Sie dann aus dem User-Objekt abrufen. Weitere Informationen finden Sie unter Nutzer verwalten.

  • In Ihren Firebase Realtime Database- und Cloud Storage-Sicherheitsregeln können Sie die eindeutige Nutzer-ID des angemeldeten Nutzers aus der Variablen auth abrufen und damit steuern, auf welche Daten ein Nutzer zugreifen kann.

Sie können Nutzern ermöglichen, sich mit mehreren Authentifizierungsanbietern in Ihrer Anwendung anzumelden, indem Sie Anmeldedaten des Authentifizierungsanbieters mit einem vorhandenen Nutzerkonto verknüpfen.

Wenn Sie einen Nutzer abmelden möchten, rufen Sie signOut auf:

Web

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

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
auth_sign_out.js

Web

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
index.js