Über einen E-Mail-Link in JavaScript mit Firebase authentifizieren

Sie können Firebase Authentication verwenden, um einen Nutzer 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 Nutzers bestätigt.

Die Anmeldung per E-Mail bietet zahlreiche Vorteile:

  • Einfache Registrierung und Anmeldung
  • Weniger Risiko, dass Passwörter in verschiedenen Anwendungen wiederverwendet werden, was die Sicherheit selbst gut ausgewählter Passwörter untergraben kann.
  • Die Möglichkeit, einen Nutzer zu authentifizieren und gleichzeitig zu prüfen, ob er der rechtmäßige Inhaber einer E-Mail-Adresse ist.
  • Nutzer benötigen nur ein zugängliches E-Mail-Konto, um sich anzumelden. Sie müssen nicht Inhaber einer Telefonnummer oder eines Kontos in sozialen Medien sein.
  • Ein Nutzer kann sich sicher anmelden, ohne ein Passwort angeben oder sich merken zu müssen, was auf einem Mobilgerät umständlich sein kann.
  • Ein bestehender Nutzer, der sich zuvor mit einer E-Mail-ID (Passwort oder föderiert) angemeldet hat, kann so konfiguriert werden, dass er sich nur noch mit der E-Mail-Adresse anmelden kann. So kann sich ein Nutzer, der sein Passwort vergessen hat, beispielsweise anmelden, ohne es zurücksetzen zu müssen.

Hinweis

Falls noch nicht geschehen, kopieren Sie das Initialisierungs-Snippet aus der Firebase Console in Ihr Projekt, wie unter Firebase Ihrem JavaScript-Projekt hinzufügen beschrieben.

Damit Nutzer sich per E-Mail-Link anmelden können, müssen Sie zuerst den E-Mail-Anbieter und die Anmeldemethode „E-Mail-Link“ für Ihr Firebase-Projekt aktivieren:

  1. Öffnen Sie in der Firebase Console den Bereich Auth.
  2. Aktivieren Sie auf dem Tab Anmeldemethode den Anbieter E-Mail/Passwort. Hinweis: Die Anmeldung per E-Mail/Passwort muss aktiviert sein, damit die Anmeldung über einen E-Mail-Link verwendet werden kann.
  3. Aktivieren Sie im selben Abschnitt die Anmeldemethode E-Mail-Link (Anmeldung ohne Passwort).
  4. Klicken Sie auf Speichern.

Zum Initiieren des Authentifizierungsablaufs wird eine Schnittstelle angezeigt, in der der Nutzer aufgefordert wird, seine E-Mail-Adresse anzugeben, und dann sendSignInLinkToEmail aufgerufen, um Firebase aufzufordern, den Authentifizierungslink an die E-Mail-Adresse des Nutzers zu senden.

  1. Erstellen Sie das ActionCodeSettings-Objekt, das Firebase Anweisungen zum Erstellen des E-Mail-Links enthält. Legen Sie die Werte für die folgenden Felder fest:

    • url: Der einzubettende Deeplink und alle zusätzlichen Status, die übergeben werden sollen. Die Domain des Links muss der Liste der autorisierten Domains in der Firebase Console hinzugefügt werden. Diese Liste finden Sie auf dem Tab „Anmeldemethode“ (Authentifizierung -> Einstellungen).
    • android und ios: Hilft Firebase Authentication zu bestimmen, ob ein nur für das Web oder für Mobilgeräte geeigneter Link erstellt werden soll, der auf einem Android- oder Apple-Gerät geöffnet wird.
    • handleCodeInApp: Muss auf „wahr“ festgelegt sein. Im Gegensatz zu anderen E-Mail-Aktionen außerhalb des Bandes (Passwort zurücksetzen und E-Mail-Bestätigungen) muss die Anmeldung immer in der App erfolgen. Das liegt daran, dass der Nutzer am Ende des Ablaufs angemeldet sein und sein Authentifizierungsstatus in der App gespeichert sein soll.
    • linkDomain: Wenn für ein Projekt benutzerdefinierte Hosting-Linkdomains definiert sind, geben Sie an, welche verwendet werden soll, wenn der Link von einer bestimmten mobilen App geöffnet werden soll. Andernfalls wird automatisch die Standarddomain ausgewählt (z. B. PROJECT_ID.firebaseapp.com).

    • dynamicLinkDomain: Eingestellt. Geben Sie diesen Parameter nicht an.

      Web

      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

      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 Status in E-Mail-Aktionen übergeben.

  2. Frage den Nutzer nach seiner E-Mail-Adresse.

  3. Sende den Authentifizierungslink an die E-Mail-Adresse des Nutzers und speichere die E-Mail-Adresse des Nutzers für den Fall, dass er sich auf demselben Gerät mit der E-Mail-Adresse anmeldet.

    Web

    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

    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

Damit ein Anmeldelink nicht dazu verwendet werden kann, sich als nicht beabsichtigter Nutzer oder auf einem nicht beabsichtigten Gerät anzumelden, muss bei Firebase Auth die E-Mail-Adresse des Nutzers angegeben werden, wenn der Anmeldevorgang abgeschlossen wird. 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 Nutzer optimieren, die den Anmeldelink auf demselben Gerät öffnen, auf dem sie den Link anfordern. Speichern Sie dazu beim Senden der Anmelde-E-Mail ihre E-Mail-Adresse lokal, z. B. mithilfe von LocalStorage oder Cookies. Verwenden Sie diese Adresse dann, um den Vorgang abzuschließen. Übergeben Sie die E-Mail-Adresse des Nutzers nicht in den Parametern der Weiterleitungs-URL und verwenden Sie sie nicht wieder, da dies Sitzungseinschleusungen ermöglichen kann.

Nach Abschluss der Anmeldung werden alle zuvor nicht bestätigten Anmeldemechanismen für den Nutzer entfernt und alle vorhandenen Sitzungen ungültig gemacht. Wenn beispielsweise jemand zuvor ein nicht bestätigtes Konto mit derselben E-Mail-Adresse und demselben Passwort erstellt hat, wird das Passwort des Nutzers entfernt, um zu verhindern, dass sich der Betrüger, der den Anspruch auf das Konto erhoben und dieses nicht bestätigte Konto erstellt hat, noch einmal mit der nicht bestätigten E-Mail-Adresse und dem nicht bestätigten Passwort anmeldet.

Verwenden Sie außerdem in der Produktion eine HTTPS-URL, damit Ihr Link nicht von Zwischenservern abgefangen werden kann.

Anmeldung auf einer Webseite abschließen

Das Format des E-Mail-Link-Deeplinks entspricht dem Format, das für E-Mail-Aktionen außerhalb des Bandes verwendet wird (E-Mail-Bestätigung, Passwort zurücksetzen und Widerruf der E-Mail-Änderung). Firebase Auth vereinfacht diese Prüfung, indem die isSignInWithEmailLink API zur Verfügung gestellt wird, um zu prüfen, ob es sich bei einem Link um einen Link zum Anmelden per E-Mail handelt.

Rufen Sie dann signInWithEmailLink mit der E-Mail-Adresse des Nutzers und dem tatsächlichen E-Mail-Link auf, der den einmaligen Code enthält, um die Anmeldung auf der Landingpage abzuschließen.

Web

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 by importing getAdditionalUserInfo
      // and calling it with result:
      // getAdditionalUserInfo(result)
      // You can access the user's profile via:
      // getAdditionalUserInfo(result)?.profile
      // You can check if the user is new or existing:
      // getAdditionalUserInfo(result)?.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

// 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

Anmeldung in einer mobilen App abschließen

Firebase Authentication verwendet Firebase Hosting, um den E-Mail-Link an ein Mobilgerät zu senden. Damit die Anmeldung über die mobile App abgeschlossen werden kann, muss die App so konfiguriert sein, dass sie den eingehenden App-Link erkennt, den zugrunde liegenden Deeplink analysiert und dann die Anmeldung wie beim Web-Flow abschließt.

Weitere Informationen zum Umgang mit der Anmeldung über einen E-Mail-Link in einer Android-App findest du im Android-Leitfaden.

Weitere Informationen zur Anmeldung über den E-Mail-Link in einer Apple-App finden Sie im Leitfaden zu Apple-Plattformen.

Sie können diese Authentifizierungsmethode auch mit einem vorhandenen Nutzer verknüpfen. Ein Nutzer, der sich beispielsweise zuvor mit einem anderen Anbieter authentifiziert hat, z. B. mit einer Telefonnummer, kann diese Anmeldemethode seinem bestehenden Konto hinzufügen.

Der Unterschied besteht in der zweiten Hälfte des Vorgangs:

Web

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

// 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

So können Sie auch einen Nutzer mit E-Mail-Link noch einmal authentifizieren, bevor Sie einen sensiblen Vorgang ausführen.

Web

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

// 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 Ablauf jedoch auf einem anderen Gerät enden kann, auf dem der ursprüngliche Nutzer nicht angemeldet war, wird er möglicherweise nicht abgeschlossen. In diesem Fall kann dem Nutzer ein Fehler angezeigt werden, um ihn dazu zu zwingen, den Link auf demselben Gerät zu öffnen. Über den Link kann ein bestimmter Status übergeben werden, um Informationen zur Art der Operation und zur Nutzer-UID bereitzustellen.

Wenn Sie Ihr Projekt am oder nach dem 15. September 2023 erstellt haben, ist der Schutz vor E-Mail-Aufzählungen standardmäßig aktiviert. Diese Funktion verbessert die Sicherheit der Nutzerkonten Ihres Projekts, deaktiviert aber die fetchSignInMethodsForEmail()-Methode, die wir zuvor für die Implementierung von Abläufen mit vorangestellter Kennung empfohlen haben.

Sie können den Schutz vor E-Mail-Enumeration für Ihr Projekt zwar deaktivieren, wir raten davon jedoch ab.

Weitere Informationen finden Sie in der Dokumentation zum Schutz vor E-Mail-Enumeration.

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

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 minimiert werden und der Link ausgeblendet wird.

Diese Vorlage gilt für die folgenden Sprachen:

Code Sprache
ar Arabisch
zh-CN Chinesisch (vereinfacht)
zh-TW Chinesisch (traditionell)
nl Niederländisch
de Englisch
en-GB Englisch (Vereinigtes Königreich)
fr Französisch
de Deutsch
id Indonesisch
it Italienisch
ja Japanisch
ko Koreanisch
pl Polnisch
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 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 allen Apps in Ihrem Projekt zu identifizieren, 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 über mehrere Authentifizierungsanbieter in Ihrer App 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