Mit passwortbasierten Konten mit JavaScript bei Firebase authentifizieren

Sie können Firebase Authentication verwenden, damit sich Ihre Nutzer authentifizieren können mit Firebase verwendet seine E-Mail-Adressen und Passwörter sowie zur Verwaltung der passwortbasierte Konten.

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. Öffnen Sie in der Firebase-Konsole Bereich Auth
    2. Aktivieren Sie auf dem Tab Anmeldemethode die Anmeldung mit E-Mail-Adresse/Passwort. und klicken Sie auf Speichern.

Passwortbasiertes Konto erstellen

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

  1. Wenn sich ein neuer Nutzer über das Anmeldeformular Ihrer App registriert, führen Sie alle neuen Schritte zur Kontobestätigung durch, die für Ihre App erforderlich sind. Dazu gehört beispielsweise die Überprüfung, ob das Passwort für das neue Konto korrekt eingegeben wurde und den Anforderungen an die Komplexität entspricht.
  2. Erstelle ein neues Konto, indem du die E-Mail-Adresse und das Passwort des neuen Nutzers an createUserWithEmailAndPassword weitergibst:

    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. Wie Sie die Informationen zum angemeldeten Nutzer finden, erfahren Sie unten im Abschnitt „Nächste Schritte“.

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

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, geben Sie seine E-Mail-Adresse und Passwort zu 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 findest du in den Auth-Referenzdokumenten.

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). Das kann zwar hilfreich sein, um Nutzern bestimmte Maßnahmen vorzuschlagen, aber auch von böswilligen Akteuren missbraucht werden, um die von Ihren Nutzern registrierten E-Mail-Adressen zu ermitteln.

Wir empfehlen, den Schutz vor E-Mail-Enumeration zu aktivieren, um dieses Risiko zu mindern. für Ihr Projekt mit dem gcloud-Tool von Google Cloud erstellen. Wenn Sie diese Option aktivieren, Durch diese Funktion ändert sich das Verhalten der Fehlerberichte von Firebase Authentication – achte darauf, dass deine App nicht auf die spezifischeren Fehler.

Nächste Schritte

Nachdem sich ein Nutzer zum ersten Mal angemeldet hat, wird ein neues Nutzerkonto erstellt und die mit den Anmeldedaten verknüpft sind, d. h. Nutzername und Passwort, oder Authentifizierungsanbieter-Informationen – also für den Nutzer, mit dem sich der Nutzer angemeldet hat. Diese neue -Konto wird als Teil Ihres Firebase-Projekts gespeichert und kann verwendet werden, um in jeder App in Ihrem Projekt einen Nutzer erreichen, unabhängig davon, wie er sich 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 erlauben, sich mit Mehrfachauthentifizierung in Ihrer App anzumelden indem Sie die Anmeldedaten des Authentifizierungsanbieters mit einem eines bestehenden Nutzerkontos.

Rufen Sie auf, um einen Nutzer abzumelden. signOut:

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