Mit passwortbasierten Konten mit JavaScript bei Firebase authentifizieren

Mit Firebase Authentication können sich Nutzer mit ihrer E‑Mail-Adresse und ihrem Passwort bei Firebase authentifizieren und Sie können die passwortbasierten Konten Ihrer App 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 Konsole.
  3. Anmeldung über E‑Mail/Passwort aktivieren:
    1. Öffnen Sie in der Firebase Konsole den Auth-Bereich.
    2. Aktivieren Sie auf dem Tab Anmeldemethode die Anmeldemethode E‑Mail/Passwort und klicken Sie auf Speichern.

Passwortbasiertes Konto erstellen

So erstellen Sie ein neues Nutzerkonto mit einem Passwort: Führen Sie auf der Registrierungsseite Ihrer App die folgenden Schritte aus:

  1. Wenn sich ein neuer Nutzer über das Registrierungsformular Ihrer App registriert, führen Sie alle Schritte zur Validierung des neuen Kontos aus, die Ihre App erfordert. Prüfen Sie beispielsweise, ob das Passwort des neuen Kontos korrekt eingegeben wurde und die Anforderungen an die Komplexität 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 Informationen zu den Details des angemeldeten Nutzers.

    Hier können Sie auch Fehler abfangen und verarbeiten. Eine Liste der Fehlercodes finden Sie in der Auth-Referenzdokumentation.

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 Informationen zu den Details des angemeldeten Nutzers.

    Hier können Sie auch Fehler abfangen und verarbeiten. Eine Liste der Fehlercodes finden Sie in der Auth-Referenzdokumentation.

Empfohlen: Passwortrichtlinie festlegen

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

Wenn Sie eine Passwortrichtlinie für Ihr Projekt konfigurieren möchten, öffnen Sie in der Firebase Konsole auf der Seite „Authentifizierungseinstellungen“ den Passwortrichtlinie Tab:

Authentifizierungseinstellungen

Firebase Authentication Passwortrichtlinien unterstützen die folgenden Passwortanforderungen:

  • Kleinbuchstaben erforderlich

  • Großbuchstaben erforderlich

  • Numerisches Zeichen erforderlich

  • Nicht alphanumerisches Zeichen erforderlich

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

  • Mindestlänge des Passworts (6 bis 30 Zeichen, Standardwert: 6)

  • Maximale Länge des Passworts (maximal 4.096 Zeichen)

Sie können die Erzwingung der Passwortrichtlinie in zwei Modi aktivieren:

  • Erforderlich: Anmeldeversuche schlagen fehl, wenn Nutzer ein Passwort verwenden das nicht Ihrer Richtlinie entspricht.

  • Benachrichtigen: Nutzer können sich mit einem Passwort registrieren, das nicht den Anforderungen entspricht. In diesem Modus sollten Sie auf der Clientseite prüfen, ob das Passwort des Nutzers der Richtlinie entspricht, und den Nutzer auf irgendeine Weise auffordern, sein Passwort zu aktualisieren, wenn es nicht den Anforderungen entspricht.

Neue Nutzer müssen immer ein Passwort wählen, das Ihrer Richtlinie entspricht.

Wenn Sie aktive Nutzer haben, empfehlen wir, die Erzwingung der Aktualisierung bei der Anmeldung nicht zu aktivieren, es sei denn, Sie möchten den Zugriff für Nutzer blockieren, deren Passwörter nicht Ihrer Richtlinie entsprechen. Verwenden Sie stattdessen den Benachrichtigungsmodus, mit dem sich Nutzer mit ihren aktuellen Passwörtern anmelden können, und informieren Sie sie über die Anforderungen, die ihr Passwort nicht erfüllt.

Passwort auf dem Client validieren

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

Einige Firebase Authentication Methoden, die E‑Mail-Adressen als Parameter verwenden, geben bestimmte Fehler aus, 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). Das kann zwar 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, den Schutz vor E‑Mail-Enumeration zu aktivieren für Ihr Projekt mit dem Google Cloud-Tool gcloud. Beachten Sie, dass sich durch die Aktivierung dieser Funktion das Verhalten der Fehlerberichterstattung von Firebase Authenticationändert. Ihre App sollte nicht auf die genaueren 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, mit denen sich der Nutzer angemeldet hat, also mit dem Nutzernamen und Passwort, der Telefonnummer oder den Informationen des Authentifizierungsanbieters. Dieses neue Konto wird als Teil Ihres Firebase-Projekts gespeichert und kann verwendet werden, um einen Nutzer in allen Apps Ihres Projekts zu identifizieren, unabhängig davon, wie sich der Nutzer anmeldet.

  • In Ihren Apps ist es empfehlenswert, den Authentifizierungsstatus Ihres Nutzers zu ermitteln, indem Sie einen Beobachter für das Auth-Objekt festlegen. Anschließend können Sie die grundlegenden Profilinformationen des Nutzers aus dem User-Objekt abrufen. Weitere Informationen finden Sie unter Nutzer verwalten.

  • In den 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 erlauben, sich mit mehreren Authentifizierungs anbietern in Ihrer App anzumelden, indem Sie die Anmeldedaten des Authentifizierungsanbieters mit einem vorhandenen Nutzerkonto verknüpfen.

Rufen Sie signOut auf, um einen Nutzer abzumelden:

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