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

Mit Firebase Authentication können Sie einen Nutzer anmelden, 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:

• Reibungslose Registrierung und Anmeldung
• Geringeres Risiko der Wiederverwendung von Passwörtern in verschiedenen Anwendungen, was die Sicherheit selbst gut ausgewählter Passwörter untergraben kann.
• Die Möglichkeit, einen Nutzer zu authentifizieren und gleichzeitig zu bestätigen, dass er der rechtmäßige Inhaber einer E-Mail-Adresse ist.
• Ein Nutzer benötigt nur ein zugängliches E-Mail-Konto, um sich anzumelden. Sie müssen keine Telefonnummer oder kein Konto in sozialen Medien besitzen.
• Nutzer können sich sicher anmelden, ohne ein Passwort eingeben oder sich eines merken zu müssen. Das kann auf einem Mobilgerät umständlich sein.
• Ein bestehender Nutzer, der sich zuvor mit einer E‑Mail-Kennung (Passwort oder Verbundanmeldung) angemeldet hat, kann auf die Anmeldung nur mit der E‑Mail-Adresse umgestellt werden. So kann sich ein Nutzer, der sein Passwort vergessen hat, trotzdem anmelden, ohne es zurücksetzen zu müssen.

Hinweis

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

E-Mail-Link-Anmeldung für Ihr Firebase-Projekt aktivieren

Wenn Sie Nutzer über einen E-Mail-Link anmelden möchten, müssen Sie zuerst den E-Mail-Anbieter und die Anmeldemethode „E-Mail-Link“ für Ihr Firebase-Projekt aktivieren:

1. Wechseln Sie in der Firebase-Konsole zu Sicherheit > Authentifizierung.

2. Aktivieren Sie auf dem Tab Anmeldemethode die Anmeldemethode E‑Mail/Passwort. Die Anmeldung per E‑Mail-Link kann nur verwendet werden, wenn die Anmeldung per E‑Mail-Adresse und Passwort aktiviert ist.

3. Aktivieren Sie im selben Bereich den Anmeldeanbieter E‑Mail-Link (Anmeldung ohne Passwort).

4. Klicken Sie auf Speichern.

Authentifizierungslink an die E‑Mail-Adresse des Nutzers senden

Um den Authentifizierungsablauf zu starten, präsentieren Sie dem Nutzer eine Benutzeroberfläche, in der er aufgefordert wird, seine E‑Mail-Adresse anzugeben. Rufen Sie dann sendSignInLinkToEmail auf, 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 gibt. Legen Sie die Werte für die folgenden Felder fest:

   • url: Der einzubettende Deeplink und alle zusätzlichen Statusinformationen, die übergeben werden sollen. Falls noch nicht geschehen, fügen Sie Ihre Domain der Liste der autorisierten Domains hinzu:

     1. Rufen Sie in der Firebase-Konsole den Tab Sicherheit > Authentifizierung > Einstellungen auf.

     2. Klicken Sie im Bereich Autorisierte Domains auf Domain hinzufügen und fügen Sie Ihre Domain hinzu.

   • android und ios: Damit kann Firebase Authentication ermitteln, ob ein reiner Weblink oder ein mobiler Link erstellt werden soll, der auf einem Android- oder Apple-Gerät geöffnet wird.
   • handleCodeInApp: Auf „true“ festlegen. Die Anmeldung muss immer in der App erfolgen, anders als bei anderen Out-of-Band-E‑Mail-Aktionen (Passwortzurücksetzung und E‑Mail-Bestätigungen). Das liegt daran, dass der Nutzer am Ende des Ablaufs angemeldet sein und sein Authentifizierungsstatus in der App gespeichert werden soll.
   • linkDomain: Wenn benutzerdefinierte Hosting-Linkdomains für ein Projekt 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'
       },
       // The domain must be configured in Firebase Hosting and owned by the project.
       linkDomain: 'custom-domain.com'
     };
     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. Senden Sie den Authentifizierungslink an die E‑Mail-Adresse des Nutzers und speichern Sie die E‑Mail-Adresse des Nutzers für den Fall, dass der Nutzer die E‑Mail-Anmeldung auf demselben Gerät abschließt.

   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

Anmeldung mit dem E‑Mail-Link abschließen

Sicherheitsbedenken

Damit ein Anmeldelink nicht verwendet werden kann, um sich als ein nicht vorgesehener Nutzer oder auf einem nicht vorgesehenen 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 ihn angefordert haben. Speichern Sie dazu ihre E-Mail-Adresse lokal, z. B. mit localStorage oder Cookies, wenn Sie die Anmelde-E-Mail senden. Verwenden Sie dann diese Adresse, um den Vorgang abzuschließen. Geben Sie die E-Mail-Adresse des Nutzers nicht in den Parametern der Weiterleitungs-URL an und verwenden Sie sie nicht wieder, da dies Session-Injections ermöglichen kann.

Nach Abschluss der Anmeldung werden alle zuvor nicht bestätigten Anmeldemechanismen des Nutzers 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 Nutzers entfernt, um zu verhindern, dass sich der Betrüger, der das Eigentum beansprucht und dieses nicht bestätigte Konto erstellt hat, noch einmal mit der nicht bestätigten E‑Mail-Adresse und dem Passwort anmeldet.

Achten Sie außerdem darauf, in der Produktion eine HTTPS-URL zu verwenden, damit Ihr Link nicht von zwischengeschalteten Servern abgefangen werden kann.

Anmeldung auf einer Webseite abschließen

Das Format des E‑Mail-Link-Deeplinks entspricht dem Format, das für Out-of-Band-E‑Mail-Aktionen verwendet wird (E‑Mail-Bestätigung, Passwort zurücksetzen und Widerruf der E‑Mail-Adressänderung). Firebase Auth vereinfacht diese Prüfung mit der isSignInWithEmailLink API, mit der geprüft werden kann, ob ein Link ein Anmeldelink mit E-Mail-Adresse ist.

Rufen Sie signInWithEmailLink mit der E‑Mail-Adresse des Nutzers und dem tatsächlichen E‑Mail-Link mit dem Einmalcode auf, um die Anmeldung auf der Landingpage abzuschließen.

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

// 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 eine mobile App abgeschlossen werden kann, muss die App so konfiguriert sein, dass sie den eingehenden App-Link erkennt, den zugrunde liegenden Deeplink parst und die Anmeldung dann wie beim Web-Ablauf abschließt.

Weitere Informationen zum Umgang mit der Anmeldung mit E‑Mail-Link in einer Android-Anwendung

Weitere Informationen zum Umgang mit der Anmeldung mit E‑Mail-Link in einer Apple-Anwendung finden Sie im Leitfaden für Apple-Plattformen.

Verknüpfung/erneute Authentifizierung mit E‑Mail-Link

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

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

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

// 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 Nutzer mit E-Mail-Link neu zu authentifizieren, bevor ein sensibler Vorgang ausgeführt wird.

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

// 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 könnte, 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 zu zwingen, den Link auf demselben Gerät zu öffnen. Einige Status können im Link übergeben werden, um Informationen zum Vorgangstyp und zur Nutzer-UID bereitzustellen.

E‑Mail-Adresse/Passwort und E‑Mail-Link unterscheiden

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

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

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

Standard-E-Mail-Vorlage für die Anmeldung per 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 zusammengefasst werden und der Link verborgen wird.

Diese Vorlage gilt für die folgenden Sprachen:

Nächste Schritte

Wenn sich ein Nutzer zum ersten Mal anmeldet, 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 am besten, den Authentifizierungsstatus des Nutzers zu ermitteln, indem Sie einen Observer 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 Ihren Firebase Realtime Database- und Cloud Storage-Sicherheitsregeln können Sie die eindeutige Nutzer-ID des angemeldeten Nutzers aus der auth-Variablen abrufen und damit steuern, auf welche Daten ein Nutzer zugreifen kann.

Sie können Nutzern erlauben, sich mit mehreren Authentifizierungsanbietern in Ihrer App anzumelden, indem Sie Anmeldedaten des Authentifizierungsanbieters mit einem vorhandenen Nutzerkonto verknüpfen.

Rufen Sie signOut auf, um einen Nutzer abzumelden:

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

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

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