Authentifizieren Sie sich bei Firebase über passwortbasierte Konten mit Javascript

Sie können die Firebase-Authentifizierung verwenden, um Ihren Benutzern die Authentifizierung bei Firebase mit ihren E-Mail-Adressen und Passwörtern zu ermöglichen und um die passwortbasierten Konten Ihrer App zu verwalten.

Bevor Sie beginnen

  1. Fügen Sie Firebase zu Ihrem JavaScript-Projekt hinzu .
  2. Wenn Sie Ihre App noch nicht mit Ihrem Firebase-Projekt verbunden haben, tun Sie dies über die Firebase-Konsole .
  3. E-Mail-/Passwort-Anmeldung aktivieren:
    1. Öffnen Sie in der Firebase-Konsole den Abschnitt „Auth“ .
    2. Aktivieren Sie auf der Registerkarte „Anmeldemethode“ die Anmeldemethode „E-Mail/Passwort“ und klicken Sie auf „Speichern“ .

Erstellen Sie ein passwortbasiertes Konto

Um ein neues Benutzerkonto mit Passwort zu erstellen, führen Sie auf der Anmeldeseite Ihrer App die folgenden Schritte aus:

  1. Wenn sich ein neuer Benutzer über das Anmeldeformular Ihrer App anmeldet, führen Sie alle für Ihre App erforderlichen Validierungsschritte für das neue Konto aus, z. B. die Überprüfung, ob das Kennwort des neuen Kontos korrekt eingegeben wurde und Ihren Komplexitätsanforderungen entspricht.
  2. Erstellen Sie ein neues Konto, indem Sie die E-Mail-Adresse und das Passwort des neuen Benutzers an createUserWithEmailAndPassword übergeben:

    Web modular API

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

    Web namespaced API

    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 Benutzer automatisch angemeldet. Sehen Sie sich den Abschnitt „Nächste Schritte“ unten an, um die Details des angemeldeten Benutzers zu erhalten.

    Hier können Sie auch Fehler erkennen und beheben. Eine Liste der Fehlercodes finden Sie in den Auth-Referenzdokumenten .

Melden Sie einen Benutzer mit einer E-Mail-Adresse und einem Passwort an

Die Schritte zum Anmelden eines Benutzers mit einem Passwort ähneln den Schritten zum Erstellen eines neuen Kontos. Gehen Sie auf der Anmeldeseite Ihrer App wie folgt vor:

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

    Web modular API

    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 namespaced API

    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
    Sehen Sie sich den Abschnitt „Nächste Schritte“ unten an, um die Details des angemeldeten Benutzers zu erhalten.

    Hier können Sie auch Fehler erkennen und beheben. Eine Liste der Fehlercodes finden Sie in den Auth-Referenzdokumenten .

Empfohlen: Aktivieren Sie den E-Mail-Aufzählungsschutz

Einige Firebase-Authentifizierungsmethoden, die E-Mail-Adressen als Parameter verwenden, lösen bestimmte Fehler aus, wenn die E-Mail-Adresse nicht registriert ist, obwohl sie registriert werden muss (z. B. wenn Sie sich mit einer E-Mail-Adresse und einem Passwort anmelden), oder wenn sie registriert ist, wenn sie nicht verwendet werden muss (z. B. beim Ändern der E-Mail-Adresse eines Benutzers). Dies kann zwar hilfreich sein, um Benutzern spezifische Abhilfemaßnahmen vorzuschlagen, es kann jedoch auch von böswilligen Akteuren missbraucht werden, um die von Ihren Benutzern registrierten E-Mail-Adressen zu ermitteln.

Um dieses Risiko zu mindern, empfehlen wir Ihnen, den E-Mail-Aufzählungsschutz für Ihr Projekt mit dem Google Cloud-Tool gcloud zu aktivieren. Beachten Sie, dass sich durch die Aktivierung dieser Funktion das Fehlerberichtsverhalten von Firebase Authentication ändert: Stellen Sie sicher, dass Ihre App nicht auf spezifischere Fehler angewiesen ist.

Nächste Schritte

Nachdem sich ein Benutzer zum ersten Mal angemeldet hat, wird ein neues Benutzerkonto erstellt und mit den Anmeldeinformationen – also dem Benutzernamen und dem Kennwort, der Telefonnummer oder den Informationen zum Authentifizierungsanbieter – verknüpft, mit denen sich der Benutzer angemeldet hat. Dieses neue Konto wird als Teil Ihres Firebase-Projekts gespeichert und kann zur Identifizierung eines Benutzers in jeder App in Ihrem Projekt verwendet werden, unabhängig davon, wie sich der Benutzer anmeldet.

  • In Ihren Apps können Sie den Authentifizierungsstatus Ihres Benutzers am besten ermitteln, indem Sie einen Beobachter für das Auth Objekt festlegen. Anschließend können Sie die grundlegenden Profilinformationen des Benutzers aus dem User abrufen. Siehe Benutzer verwalten .

  • In Ihren Firebase-Echtzeitdatenbank- und Cloud-Speicher- Sicherheitsregeln können Sie die eindeutige Benutzer-ID des angemeldeten Benutzers aus der auth abrufen und damit steuern, auf welche Daten ein Benutzer zugreifen kann.

Sie können Benutzern die Anmeldung bei Ihrer App mit mehreren Authentifizierungsanbietern ermöglichen, indem Sie die Anmeldeinformationen des Authentifizierungsanbieters mit einem vorhandenen Benutzerkonto verknüpfen.

Um einen Benutzer abzumelden, rufen Sie signOut auf:

Web modular API

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 namespaced API

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