Authentifizieren Sie sich bei Firebase mithilfe eines E-Mail-Links in JavaScript

Sie können die Firebase-Authentifizierung verwenden, um einen Benutzer anzumelden, indem Sie ihm eine E-Mail mit einem Link senden, auf den er klicken kann, um sich anzumelden. Dabei wird auch die E-Mail-Adresse des Benutzers überprüft.

Die Anmeldung per E-Mail bietet zahlreiche Vorteile:

  • Reibungslose Anmeldung und Anmeldung.
  • Geringeres Risiko der anwendungsübergreifenden Wiederverwendung von Passwörtern, was die Sicherheit selbst gut ausgewählter Passwörter beeinträchtigen kann.
  • Die Möglichkeit, einen Benutzer zu authentifizieren und gleichzeitig zu überprüfen, ob der Benutzer der rechtmäßige Besitzer einer E-Mail-Adresse ist.
  • Ein Benutzer benötigt lediglich ein zugängliches E-Mail-Konto, um sich anzumelden. Es ist kein Besitz einer Telefonnummer oder eines Social-Media-Kontos erforderlich.
  • Ein Benutzer kann sich sicher anmelden, ohne ein Passwort angeben (oder sich merken) zu müssen, was auf einem mobilen Gerät umständlich sein kann.
  • Ein bestehender Benutzer, der sich zuvor mit einer E-Mail-ID (Passwort oder Verbund) angemeldet hat, kann so aktualisiert werden, dass er sich nur mit der E-Mail anmeldet. Beispielsweise kann sich ein Benutzer, der sein Passwort vergessen hat, trotzdem anmelden, ohne sein Passwort zurücksetzen zu müssen.

Bevor Sie beginnen

Falls noch nicht geschehen, kopieren Sie das Initialisierungs-Snippet von der Firebase-Konsole in Ihr Projekt, wie unter „Firebase zu Ihrem JavaScript-Projekt hinzufügen“ beschrieben.

Um Benutzer per E-Mail-Link anzumelden, müssen Sie zunächst die Anmeldemethode E-Mail-Anbieter und E-Mail-Link für Ihr Firebase-Projekt aktivieren:

  1. Öffnen Sie in der Firebase-Konsole den Abschnitt „Auth“ .
  2. Aktivieren Sie auf der Registerkarte Anmeldemethode den E-Mail-/Passwort- Anbieter. Beachten Sie, dass die E-Mail-/Passwort-Anmeldung aktiviert sein muss, um die E-Mail-Link-Anmeldung zu verwenden.
  3. Aktivieren Sie im selben Abschnitt die Anmeldemethode E-Mail-Link (passwortlose Anmeldung) .
  4. Klicken Sie auf Speichern .

Um den Authentifizierungsfluss zu initiieren, präsentieren Sie dem Benutzer eine Schnittstelle, die den Benutzer zur Angabe seiner E-Mail-Adresse auffordert, und rufen Sie dann sendSignInLinkToEmail auf, um Firebase aufzufordern, den Authentifizierungslink an die E-Mail-Adresse des Benutzers zu senden.

  1. Erstellen Sie das ActionCodeSettings Objekt, das Firebase Anweisungen zum Erstellen des E-Mail-Links liefert. Legen Sie die folgenden Felder fest:

    • url : Der einzubettende Deep-Link und alle weiteren weiterzugebenden Status. Die Domäne des Links muss zur Firebase Console-Liste der autorisierten Domänen hinzugefügt werden, die Sie auf der Registerkarte „Anmeldemethode“ (Authentifizierung -> Einstellungen) finden.
    • android und ios : Die Apps, die verwendet werden sollen, wenn der Anmeldelink auf einem Android- oder Apple-Gerät geöffnet wird. Erfahren Sie mehr darüber, wie Sie Firebase Dynamic Links konfigurieren , um E-Mail-Aktionslinks über mobile Apps zu öffnen.
    • handleCodeInApp : Auf true setzen. Im Gegensatz zu anderen Out-of-Band-E-Mail-Aktionen (Zurücksetzen des Passworts und E-Mail-Verifizierungen) muss der Anmeldevorgang immer in der App abgeschlossen werden. Dies liegt daran, dass am Ende des Ablaufs davon ausgegangen wird, dass der Benutzer angemeldet ist und sein Authentifizierungsstatus in der App bestehen bleibt.

    • dynamicLinkDomain : Wenn mehrere benutzerdefinierte dynamische Linkdomänen für ein Projekt definiert sind, geben Sie an, welche verwendet werden soll, wenn der Link über eine bestimmte mobile App geöffnet werden soll (z. B. example.page.link ). Andernfalls wird automatisch die erste Domäne ausgewählt.

      Web modular API

      const actionCodeSettings = {
  // URL you want to redirect back to. The domain (www.example.com) for this
  // URL must be in the authorized domains list in the Firebase Console.
  url: 'https://www.example.com/finishSignUp?cartId=1234',
  // This must be true.
  handleCodeInApp: true,
  iOS: {
    bundleId: 'com.example.ios'
  },
  android: {
    packageName: 'com.example.android',
    installApp: true,
    minimumVersion: '12'
  },
  dynamicLinkDomain: 'example.page.link'
};
      auth_email_link_actioncode_settings.js

      Web namespaced API

      var actionCodeSettings = {
  // URL you want to redirect back to. The domain (www.example.com) for this
  // URL must be in the authorized domains list in the Firebase Console.
  url: 'https://www.example.com/finishSignUp?cartId=1234',
  // This must be true.
  handleCodeInApp: true,
  iOS: {
    bundleId: 'com.example.ios'
  },
  android: {
    packageName: 'com.example.android',
    installApp: true,
    minimumVersion: '12'
  },
  dynamicLinkDomain: 'example.page.link'
};
      email-link-auth.js

    Weitere Informationen zu ActionCodeSettings finden Sie im Abschnitt „Passing State in Email Actions“ .

  2. Bitten Sie den Benutzer um seine E-Mail-Adresse.

  3. Senden Sie den Authentifizierungslink an die E-Mail-Adresse des Benutzers und speichern Sie die E-Mail-Adresse des Benutzers für den Fall, dass der Benutzer die E-Mail-Anmeldung auf demselben Gerät abschließt.

    Web modular API

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

const auth = getAuth();
sendSignInLinkToEmail(auth, email, actionCodeSettings)
  .then(() => {
    // The link was successfully sent. Inform the user.
    // Save the email locally so you don't need to ask the user for it again
    // if they open the link on the same device.
    window.localStorage.setItem('emailForSignIn', email);
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ...
  });
    auth_email_link_send.js

    Web namespaced API

    firebase.auth().sendSignInLinkToEmail(email, actionCodeSettings)
  .then(() => {
    // The link was successfully sent. Inform the user.
    // Save the email locally so you don't need to ask the user for it again
    // if they open the link on the same device.
    window.localStorage.setItem('emailForSignIn', email);
    // ...
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    // ...
  });
    email-link-auth.js

Sicherheitsbedenken

Um zu verhindern, dass ein Anmeldelink für die Anmeldung als unbeabsichtigter Benutzer oder auf einem unbeabsichtigten Gerät verwendet wird, erfordert Firebase Auth die Angabe der E-Mail-Adresse des Benutzers beim Abschluss des Anmeldevorgangs. Damit die Anmeldung erfolgreich ist, muss diese E-Mail-Adresse mit der Adresse übereinstimmen, an die der Anmeldelink ursprünglich gesendet wurde.

Sie können diesen Ablauf für Benutzer optimieren, die den Anmeldelink auf demselben Gerät öffnen, auf dem sie den Link anfordern, indem Sie ihre E-Mail-Adresse lokal speichern – beispielsweise mithilfe von localStorage oder Cookies –, wenn Sie die Anmelde-E-Mail senden. Verwenden Sie dann diese Adresse, um den Ablauf abzuschließen. Übergeben Sie die E-Mail-Adresse des Benutzers nicht in den Umleitungs-URL-Parametern und verwenden Sie sie nicht erneut, da dies Sitzungsinjektionen ermöglichen könnte.

Nach Abschluss der Anmeldung werden alle vorherigen, nicht verifizierten Anmeldemechanismen vom Benutzer entfernt und alle vorhandenen Sitzungen werden ungültig. Wenn beispielsweise jemand zuvor ein nicht bestätigtes Konto mit derselben E-Mail-Adresse und demselben Passwort erstellt hat, wird das Passwort des Benutzers entfernt, um zu verhindern, dass sich der Nachahmer, der den Besitz beansprucht und das nicht bestätigte Konto erstellt hat, erneut mit der nicht bestätigten E-Mail-Adresse und dem nicht bestätigten Passwort anmeldet.

Stellen Sie außerdem sicher, dass Sie in der Produktion eine HTTPS-URL verwenden, um zu verhindern, dass Ihr Link möglicherweise von Zwischenservern abgefangen wird.

Abschließen der Anmeldung auf einer Webseite

Das Format des E-Mail-Link-Deep-Links ist dasselbe wie das Format, das für Out-of-Band-E-Mail-Aktionen (E-Mail-Verifizierung, Passwort-Zurücksetzung und Widerruf der E-Mail-Änderung) verwendet wird . Firebase Auth vereinfacht diese Prüfung, indem es die API isSignInWithEmailLink bereitstellt, um zu prüfen, ob es sich bei einem Link um einen Link zur Anmeldung mit E-Mail handelt.

Um die Anmeldung auf der Zielseite abzuschließen, rufen Sie signInWithEmailLink mit der E-Mail-Adresse des Benutzers und dem tatsächlichen E-Mail-Link auf, der den Einmalcode enthält.

Web modular API

import { getAuth, isSignInWithEmailLink, signInWithEmailLink } from "firebase/auth";

// Confirm the link is a sign-in with email link.
const auth = getAuth();
if (isSignInWithEmailLink(auth, window.location.href)) {
  // Additional state parameters can also be passed via URL.
  // This can be used to continue the user's intended action before triggering
  // the sign-in operation.
  // Get the email if available. This should be available if the user completes
  // the flow on the same device where they started it.
  let email = window.localStorage.getItem('emailForSignIn');
  if (!email) {
    // User opened the link on a different device. To prevent session fixation
    // attacks, ask the user to provide the associated email again. For example:
    email = window.prompt('Please provide your email for confirmation');
  }
  // The client SDK will parse the code from the link for you.
  signInWithEmailLink(auth, email, window.location.href)
    .then((result) => {
      // Clear email from storage.
      window.localStorage.removeItem('emailForSignIn');
      // You can access the new user via result.user
      // Additional user info profile not available via:
      // result.additionalUserInfo.profile == null
      // You can check if the user is new or existing:
      // result.additionalUserInfo.isNewUser
    })
    .catch((error) => {
      // Some error occurred, you can inspect the code: error.code
      // Common errors could be invalid email and invalid or expired OTPs.
    });
}
email_link_complete.js

Web namespaced API

// Confirm the link is a sign-in with email link.
if (firebase.auth().isSignInWithEmailLink(window.location.href)) {
  // Additional state parameters can also be passed via URL.
  // This can be used to continue the user's intended action before triggering
  // the sign-in operation.
  // Get the email if available. This should be available if the user completes
  // the flow on the same device where they started it.
  var email = window.localStorage.getItem('emailForSignIn');
  if (!email) {
    // User opened the link on a different device. To prevent session fixation
    // attacks, ask the user to provide the associated email again. For example:
    email = window.prompt('Please provide your email for confirmation');
  }
  // The client SDK will parse the code from the link for you.
  firebase.auth().signInWithEmailLink(email, window.location.href)
    .then((result) => {
      // Clear email from storage.
      window.localStorage.removeItem('emailForSignIn');
      // You can access the new user via result.user
      // Additional user info profile not available via:
      // result.additionalUserInfo.profile == null
      // You can check if the user is new or existing:
      // result.additionalUserInfo.isNewUser
    })
    .catch((error) => {
      // Some error occurred, you can inspect the code: error.code
      // Common errors could be invalid email and invalid or expired OTPs.
    });
}
email-link-auth.js

Abschließen der Anmeldung in einer mobilen App

Die Firebase-Authentifizierung verwendet Firebase Dynamic Links, um den E-Mail-Link an ein mobiles Gerät zu senden. Für den Abschluss der Anmeldung über eine mobile Anwendung muss die Anwendung so konfiguriert werden, dass sie den eingehenden Anwendungslink erkennt, den zugrunde liegenden Deep-Link analysiert und dann die Anmeldung wie über den Webflow abschließt.

Weitere Informationen zum Anmelden per E-Mail-Link in einer Android-Anwendung finden Sie im Android-Handbuch .

Weitere Informationen zum Anmelden per E-Mail-Link in einer Apple-Anwendung finden Sie im Apple-Plattformhandbuch .

Sie können diese Authentifizierungsmethode auch mit einem vorhandenen Benutzer verknüpfen. Beispielsweise kann ein Benutzer, der sich zuvor bei einem anderen Anbieter, beispielsweise einer Telefonnummer, authentifiziert hat, diese Anmeldemethode zu seinem bestehenden Konto hinzufügen.

Der Unterschied wäre in der zweiten Hälfte der Operation:

Web modular API

import { getAuth, linkWithCredential, EmailAuthProvider } from "firebase/auth";

// Construct the email link credential from the current URL.
const credential = EmailAuthProvider.credentialWithLink(
  email, window.location.href);

// Link the credential to the current user.
const auth = getAuth();
linkWithCredential(auth.currentUser, credential)
  .then((usercred) => {
    // The provider is now successfully linked.
    // The phone user can now sign in with their phone number or email.
  })
  .catch((error) => {
    // Some error occurred.
  });
auth_email_link_link.js

Web namespaced API

// Construct the email link credential from the current URL.
var credential = firebase.auth.EmailAuthProvider.credentialWithLink(
  email, window.location.href);

// Link the credential to the current user.
firebase.auth().currentUser.linkWithCredential(credential)
  .then((usercred) => {
    // The provider is now successfully linked.
    // The phone user can now sign in with their phone number or email.
  })
  .catch((error) => {
    // Some error occurred.
  });
email-link-auth.js

Dies kann auch verwendet werden, um einen E-Mail-Link-Benutzer erneut zu authentifizieren, bevor ein vertraulicher Vorgang ausgeführt wird.

Web modular API

import { getAuth, reauthenticateWithCredential, EmailAuthProvider } from "firebase/auth";

// Construct the email link credential from the current URL.
const credential = EmailAuthProvider.credentialWithLink(
  email, window.location.href);

// Re-authenticate the user with this credential.
const auth = getAuth();
reauthenticateWithCredential(auth.currentUser, credential)
  .then((usercred) => {
    // The user is now successfully re-authenticated and can execute sensitive
    // operations.
  })
  .catch((error) => {
    // Some error occurred.
  });
auth_email_link_reauth.js

Web namespaced API

// Construct the email link credential from the current URL.
var credential = firebase.auth.EmailAuthProvider.credentialWithLink(
  email, window.location.href);

// Re-authenticate the user with this credential.
firebase.auth().currentUser.reauthenticateWithCredential(credential)
  .then((usercred) => {
    // The user is now successfully re-authenticated and can execute sensitive
    // operations.
  })
  .catch((error) => {
    // Some error occurred.
  });
email-link-auth.js

Da der Flow jedoch auf einem anderen Gerät landen könnte, auf dem der ursprüngliche Benutzer nicht angemeldet war, wird dieser Flow möglicherweise nicht abgeschlossen. In diesem Fall kann dem Benutzer ein Fehler angezeigt werden, der ihn dazu zwingt, den Link auf demselben Gerät zu öffnen. Im Link kann ein Status übergeben werden, um Informationen über die Art des Vorgangs und die Benutzer-UID bereitzustellen.

Wenn Sie Ihr Projekt am oder nach dem 15. September 2023 erstellt haben, ist der E-Mail-Aufzählungsschutz standardmäßig aktiviert. Diese Funktion verbessert die Sicherheit der Benutzerkonten Ihres Projekts, deaktiviert jedoch die Methode fetchSignInMethodsForEmail() , die wir früher zur Implementierung von Identifier-First-Flows empfohlen haben.

Obwohl Sie den E-Mail-Aufzählungsschutz für Ihr Projekt deaktivieren können, raten wir davon ab.

Weitere Einzelheiten finden Sie in der Dokumentation zum E-Mail-Aufzählungsschutz .

Standard-E-Mail-Vorlage für die Link-Anmeldung

Die Standard-E-Mail-Vorlage enthält einen Zeitstempel im Betreff und im E-Mail-Text, damit nachfolgende E-Mails nicht in einem einzigen Thread zusammengefasst werden und der Link ausgeblendet wird .

Diese Vorlage gilt für die folgenden Sprachen:

Code Sprache
ar Arabisch
zh-CN Vereinfachtes Chinesisch)
zh-TW Chinesische Tradition)
nl Niederländisch
de Englisch
en-GB Englisch UK)
fr Französisch
de Deutsch
Ausweis Indonesisch
Es Italienisch
ja japanisch
ko Koreanisch
pl Polieren
pt-BR Portugiesisch (Brasilien)
pt-PT Portugiesisch (Portugal)
ru Russisch
es Spanisch
es-419 Spanisch (Lateinamerika)
Th Thailändisch

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 ermöglichen, sich mit mehreren Authentifizierungsanbietern bei Ihrer App anzumelden, 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