Benutzerdefinierte E-Mail-Aktions-Handler erstellen

Einige Aktionen zur Nutzerverwaltung, z. B. die Aktualisierung der E-Mail-Adresse eines Nutzers und das Zurücksetzen seines Passworts, führen dazu, dass E-Mails an den Nutzer gesendet werden. Diese E-Mails enthalten Links, die Empfänger öffnen können, um den Nutzer zu vervollständigen oder abzubrechen. Maßnahme erforderlich. Standardmäßig sind E-Mails zur Nutzerverwaltung mit der Standardaktion verknüpft Handler, d. h. eine Webseite, die unter einer URL in Firebase Hosting Ihres Projekts gehostet wird .

Sie können stattdessen einen benutzerdefinierten E-Mail-Aktions-Handler erstellen und hosten, um eine benutzerdefinierte Verarbeitung durchzuführen und den E-Mail-Aktions-Handler in Ihre Website einzubinden.

Für die folgenden Aktionen zur Nutzerverwaltung muss der Nutzer die Aktion mit einem E-Mail-Aktions-Handler ausführen:

• Passwörter zurücksetzen
• Änderungen an E-Mail-Adressen widerrufen, wenn Nutzer die Einstellungen für ihr Konto ändern primär sendet Firebase eine E-Mail an die alten Adressen, um die Änderung rückgängig zu machen.
• E-Mail-Adressen überprüfen

Wenn Sie den E-Mail-Aktions-Handler Ihres Firebase-Projekts anpassen möchten, müssen Sie eine Webseite erstellen und hosten, auf der die Gültigkeit der Anfrage mithilfe des Firebase JavaScript SDK überprüft und die Anfrage abgeschlossen wird. Anschließend müssen Sie Firebase E-Mail-Vorlagen des Projekts eine Verknüpfung zu Ihrem benutzerdefinierten Aktions-Handler erstellen.

Seite für den E-Mail-Aktions-Handler erstellen

1. Firebase fügt Ihrer Aktions-Handler-URL mehrere Suchparameter hinzu, wenn generiert Nutzerverwaltungs-E-Mails. Beispiel:

   https://example.com/usermgmt?mode=resetPassword&oobCode=ABC123&apiKey=AIzaSy...&lang=fr

   Diese Parameter geben die Aufgabe der Nutzerverwaltung des Nutzers an abgeschlossen wird. Die Seite mit dem E-Mail-Aktions-Handler muss die folgenden Abfrageparameter verarbeiten:

   Parameter
   Modus	Die durchzuführende Nutzerverwaltungsaktion. Folgende Werte sind möglich: resetPassword recoverEmail verifyEmail
   oobCode	Ein Einmalcode, der zur Identifizierung und Überprüfung einer Anfrage verwendet wird
   apiKey	API-Schlüssel Ihres Firebase-Projekts zur besseren Übersicht
   continueUrl	Dies ist eine optionale URL, die eine Möglichkeit bietet, den Status an die App über eine URL. Das gilt für die Modi „Passwort zurücksetzen“ und „E-Mail-Bestätigung“. Wenn Sie eine E-Mail zum Zurücksetzen des Passworts oder zur Bestätigung senden, muss ein ActionCodeSettings-Objekt mit einer Weiterleitungs-URL angegeben werden, damit diese verfügbar ist. Dieses Nutzenden können genau da weitermachen, wo sie aufgehört haben. nach einer E-Mail-Aktion.
   lang	Dies ist die optionale Logo: BCP47 Sprach-Tag, das das Gebietsschema des Nutzers darstellt (z. B. fr. Du kannst diesen Wert für lokalisierte E-Mails verwenden Handler-Seiten zur Verfügung stellen. Die Lokalisierung kann über die Firebase Console oder dynamisch festgelegt werden, indem die entsprechende Client-API aufrufen, bevor die E-Mail ausgelöst wird Aktion ausführen. Verwenden Sie beispielsweise JavaScript: firebase.auth().languageCode = 'fr'; Achten Sie darauf, dass die Lokalisierung des E-Mail-Aktions-Handlers mit der der E-Mail-Vorlage übereinstimmt, damit die Nutzeroberfläche einheitlich ist.

   Das folgende Beispiel zeigt, wie Sie die Abfrageparameter in einer browserbasierten Handlers verwendet. Sie können den Handler auch als Node.js- Anwendung mit ähnlicher Logik.)

   Web

   Weitere Informationen zur modularen Web API, die durch Tree Shaking optimiert werden kann, und zum Upgrade von der API mit Namensraum.

   import { initializeApp } from "firebase/app";
   import { getAuth } from "firebase/auth";
   
   document.addEventListener('DOMContentLoaded', () => {
     // TODO: Implement getParameterByName()
   
     // Get the action to complete.
     const mode = getParameterByName('mode');
     // Get the one-time code from the query parameter.
     const actionCode = getParameterByName('oobCode');
     // (Optional) Get the continue URL from the query parameter if available.
     const continueUrl = getParameterByName('continueUrl');
     // (Optional) Get the language code if available.
     const lang = getParameterByName('lang') || 'en';
   
     // Configure the Firebase SDK.
     // This is the minimum configuration required for the API to be used.
     const config = {
       'apiKey': "YOUR_API_KEY" // Copy this key from the web initialization
                                // snippet found in the Firebase console.
     };
     const app = initializeApp(config);
     const auth = getAuth(app);
   
     // Handle the user management action.
     switch (mode) {
       case 'resetPassword':
         // Display reset password handler and UI.
         handleResetPassword(auth, actionCode, continueUrl, lang);
         break;
       case 'recoverEmail':
         // Display email recovery handler and UI.
         handleRecoverEmail(auth, actionCode, lang);
         break;
       case 'verifyEmail':
         // Display email verification handler and UI.
         handleVerifyEmail(auth, actionCode, continueUrl, lang);
         break;
       default:
         // Error: invalid mode.
     }
   }, false);
   auth_handle_mgmt_query_params.js

   Web

   document.addEventListener('DOMContentLoaded', () => {
     // TODO: Implement getParameterByName()
   
     // Get the action to complete.
     var mode = getParameterByName('mode');
     // Get the one-time code from the query parameter.
     var actionCode = getParameterByName('oobCode');
     // (Optional) Get the continue URL from the query parameter if available.
     var continueUrl = getParameterByName('continueUrl');
     // (Optional) Get the language code if available.
     var lang = getParameterByName('lang') || 'en';
   
     // Configure the Firebase SDK.
     // This is the minimum configuration required for the API to be used.
     var config = {
       'apiKey': "YOU_API_KEY" // Copy this key from the web initialization
                               // snippet found in the Firebase console.
     };
     var app = firebase.initializeApp(config);
     var auth = app.auth();
   
     // Handle the user management action.
     switch (mode) {
       case 'resetPassword':
         // Display reset password handler and UI.
         handleResetPassword(auth, actionCode, continueUrl, lang);
         break;
       case 'recoverEmail':
         // Display email recovery handler and UI.
         handleRecoverEmail(auth, actionCode, lang);
         break;
       case 'verifyEmail':
         // Display email verification handler and UI.
         handleVerifyEmail(auth, actionCode, continueUrl, lang);
         break;
       default:
         // Error: invalid mode.
     }
   }, false);
   custom-email-handler.js

2. Verarbeiten Sie Anfragen zum Zurücksetzen des Passworts, indem Sie zuerst den Aktionscode mit verifyPasswordResetCode; vom Nutzer ein neues Passwort anfordern und an confirmPasswordReset. Beispiel:

   Web

   Weitere Informationen zur modularen Web API, die durch Tree Shaking optimiert werden kann, und zum Upgrade von der API mit Namensraum.

   import { verifyPasswordResetCode, confirmPasswordReset } from "firebase/auth";
   
   function handleResetPassword(auth, actionCode, continueUrl, lang) {
     // Localize the UI to the selected language as determined by the lang
     // parameter.
   
     // Verify the password reset code is valid.
     verifyPasswordResetCode(auth, actionCode).then((email) => {
       const accountEmail = email;
   
       // TODO: Show the reset screen with the user's email and ask the user for
       // the new password.
       const newPassword = "...";
   
       // Save the new password.
       confirmPasswordReset(auth, actionCode, newPassword).then((resp) => {
         // Password reset has been confirmed and new password updated.
   
         // TODO: Display a link back to the app, or sign-in the user directly
         // if the page belongs to the same domain as the app:
         // auth.signInWithEmailAndPassword(accountEmail, newPassword);
   
         // TODO: If a continue URL is available, display a button which on
         // click redirects the user back to the app via continueUrl with
         // additional state determined from that URL's parameters.
       }).catch((error) => {
         // Error occurred during confirmation. The code might have expired or the
         // password is too weak.
       });
     }).catch((error) => {
       // Invalid or expired action code. Ask user to try to reset the password
       // again.
     });
   }
   auth_handle_reset_password.js

   Web

   function handleResetPassword(auth, actionCode, continueUrl, lang) {
     // Localize the UI to the selected language as determined by the lang
     // parameter.
   
     // Verify the password reset code is valid.
     auth.verifyPasswordResetCode(actionCode).then((email) => {
       var accountEmail = email;
   
       // TODO: Show the reset screen with the user's email and ask the user for
       // the new password.
       var newPassword = "...";
   
       // Save the new password.
       auth.confirmPasswordReset(actionCode, newPassword).then((resp) => {
         // Password reset has been confirmed and new password updated.
   
         // TODO: Display a link back to the app, or sign-in the user directly
         // if the page belongs to the same domain as the app:
         // auth.signInWithEmailAndPassword(accountEmail, newPassword);
   
         // TODO: If a continue URL is available, display a button which on
         // click redirects the user back to the app via continueUrl with
         // additional state determined from that URL's parameters.
       }).catch((error) => {
         // Error occurred during confirmation. The code might have expired or the
         // password is too weak.
       });
     }).catch((error) => {
       // Invalid or expired action code. Ask user to try to reset the password
       // again.
     });
   }
   custom-email-handler.js

3. Wenn du die E-Mail-Adresse eines Nutzers widerrufen möchtest, musst du zuerst den Aktionscode mit checkActionCode bestätigen und dann die E-Mail-Adresse des Nutzers mit applyActionCode wiederherstellen. Beispiel:

   Web

   Informationen zur baumrüttbaren modularen Web API und Upgrade ausführen aus der Namespace-API.

   import { checkActionCode, applyActionCode, sendPasswordResetEmail } from "firebase/auth";
   
   function handleRecoverEmail(auth, actionCode, lang) {
     // Localize the UI to the selected language as determined by the lang
     // parameter.
     let restoredEmail = null;
     // Confirm the action code is valid.
     checkActionCode(auth, actionCode).then((info) => {
       // Get the restored email address.
       restoredEmail = info['data']['email'];
   
       // Revert to the old email.
       return applyActionCode(auth, actionCode);
     }).then(() => {
       // Account email reverted to restoredEmail
   
       // TODO: Display a confirmation message to the user.
   
       // You might also want to give the user the option to reset their password
       // in case the account was compromised:
       sendPasswordResetEmail(auth, restoredEmail).then(() => {
         // Password reset confirmation sent. Ask user to check their email.
       }).catch((error) => {
         // Error encountered while sending password reset code.
       });
     }).catch((error) => {
       // Invalid code.
     });
   }
   auth_handle_recover_email.js

   Web

   function handleRecoverEmail(auth, actionCode, lang) {
     // Localize the UI to the selected language as determined by the lang
     // parameter.
     var restoredEmail = null;
     // Confirm the action code is valid.
     auth.checkActionCode(actionCode).then((info) => {
       // Get the restored email address.
       restoredEmail = info['data']['email'];
   
       // Revert to the old email.
       return auth.applyActionCode(actionCode);
     }).then(() => {
       // Account email reverted to restoredEmail
   
       // TODO: Display a confirmation message to the user.
   
       // You might also want to give the user the option to reset their password
       // in case the account was compromised:
       auth.sendPasswordResetEmail(restoredEmail).then(() => {
         // Password reset confirmation sent. Ask user to check their email.
       }).catch((error) => {
         // Error encountered while sending password reset code.
       });
     }).catch((error) => {
       // Invalid code.
     });
   }
   custom-email-handler.js

4. Rufen Sie applyActionCode an, um die Bestätigung der E-Mail-Adresse zu veranlassen. Beispiel:

   Web

   Weitere Informationen zur modularen Web API, die durch Tree Shaking optimiert werden kann, und zum Upgrade von der API mit Namensraum.

   function handleVerifyEmail(auth, actionCode, continueUrl, lang) {
     // Localize the UI to the selected language as determined by the lang
     // parameter.
     // Try to apply the email verification code.
     applyActionCode(auth, actionCode).then((resp) => {
       // Email address has been verified.
   
       // TODO: Display a confirmation message to the user.
       // You could also provide the user with a link back to the app.
   
       // TODO: If a continue URL is available, display a button which on
       // click redirects the user back to the app via continueUrl with
       // additional state determined from that URL's parameters.
     }).catch((error) => {
       // Code is invalid or expired. Ask the user to verify their email address
       // again.
     });
   }
   auth_handle_verify_email.js

   Web

   function handleVerifyEmail(auth, actionCode, continueUrl, lang) {
     // Localize the UI to the selected language as determined by the lang
     // parameter.
     // Try to apply the email verification code.
     auth.applyActionCode(actionCode).then((resp) => {
       // Email address has been verified.
   
       // TODO: Display a confirmation message to the user.
       // You could also provide the user with a link back to the app.
   
       // TODO: If a continue URL is available, display a button which on
       // click redirects the user back to the app via continueUrl with
       // additional state determined from that URL's parameters.
     }).catch((error) => {
       // Code is invalid or expired. Ask the user to verify their email address
       // again.
     });
   }
   custom-email-handler.js

5. Hosten Sie die Seite irgendwo, z. B. unter Firebase Hosting.

Als Nächstes müssen Sie Ihr Firebase-Projekt so konfigurieren, dass es mit Ihrer benutzerdefinierten E-Mail-Adresse verknüpft ist Aktions-Handler in seinen E-Mails zur Nutzerverwaltung.

In Ihren E-Mail-Vorlagen einen Link zu Ihrem benutzerdefinierten Handler einfügen

So konfigurieren Sie Ihr Firebase-Projekt für die Verwendung Ihres benutzerdefinierten E-Mail-Aktions-Handlers:

1. Öffnen Sie Ihr Projekt in der Firebase-Konsole.
2. Rufen Sie im Bereich Authentifizierung die Seite E-Mail-Vorlagen auf.
3. Klicken Sie bei einem der Einträge unter E-Mail-Typen auf das Stiftsymbol, um die E-Mail-Vorlage zu bearbeiten.
4. Klicken Sie auf Aktions-URL anpassen und geben Sie die URL Ihres benutzerdefinierten E-Mail-Aktionshandlers an.

Nachdem Sie die URL gespeichert haben, wird sie von allen E-Mails in Ihrem Firebase-Projekt verwendet Vorlagen.

Wenn Sie eine benutzerdefinierte Domain verwenden, E-Mail-Aktions-Handler angepasst haben, können Sie diesen Vorgang dass E-Mail-Adressen zur Nutzerverwaltung auf Ihre Domain statt auf die Standard- firebaseapp.com-Domain.