Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

Twórz niestandardowe programy obsługi akcji e-mail

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Niektóre czynności związane z zarządzaniem użytkownikami, takie jak aktualizacja adresu e-mail użytkownika i resetowanie hasła użytkownika, powodują wysyłanie wiadomości e-mail do użytkownika. Te wiadomości e-mail zawierają łącza, które odbiorcy mogą otworzyć, aby ukończyć lub anulować akcję zarządzania użytkownikami. Domyślnie e-maile dotyczące zarządzania użytkownikami prowadzą do domyślnego modułu obsługi działań, czyli strony internetowej hostowanej pod adresem URL w domenie Firebase Hosting w Twoim projekcie.

Zamiast tego możesz utworzyć i hostować niestandardową procedurę obsługi akcji e-mail, aby wykonać niestandardowe przetwarzanie i zintegrować procedurę obsługi akcji e-mail z witryną internetową.

Następujące akcje zarządzania użytkownikami wymagają od użytkownika wykonania akcji przy użyciu programu obsługi akcji poczty e-mail:

  • Resetowanie haseł
  • Odwoływanie zmian adresu e-mail – gdy użytkownicy zmienią podstawowe adresy e-mail na swoich kontach, Firebase wyśle ​​e-mail na ich stare adresy, co pozwoli im cofnąć zmianę
  • Weryfikowanie adresów e-mail

Aby dostosować procedurę obsługi e-maili w projekcie Firebase, musisz utworzyć i hostować stronę internetową, która używa pakietu Firebase JavaScript SDK do sprawdzania poprawności żądania i wypełniania żądania. Następnie musisz dostosować szablony wiadomości e-mail projektu Firebase, aby łączyły się z niestandardowym modułem obsługi działań.

Utwórz stronę obsługi działań e-mail

  1. Firebase dodaje kilka parametrów zapytania do adresu URL modułu obsługi działań, gdy generuje e-maile dotyczące zarządzania użytkownikami. Na przykład:

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

    Te parametry określają zadanie zarządzania użytkownikami, które wykonuje użytkownik. Twoja strona obsługi akcji e-mail musi obsługiwać następujące parametry zapytania:

    Parametry
    tryb

    Czynność zarządzania użytkownikami do wykonania. Może być jedną z następujących wartości:

    • resetPassword
    • recoverEmail
    • verifyEmail
    oobKod Kod jednorazowy, służący do identyfikacji i weryfikacji wniosku
    Klucz API Klucz API Twojego projektu Firebase udostępniony dla wygody
    kontynuujUrl Jest to opcjonalny adres URL, który umożliwia przekazanie stanu z powrotem do aplikacji za pośrednictwem adresu URL. Dotyczy to trybów resetowania hasła i weryfikacji poczty e-mail. Podczas wysyłania wiadomości e-mail dotyczącej resetowania hasła lub wiadomości e-mail weryfikacyjnej należy określić obiekt ActionCodeSettings z adresem URL kontynuacji, aby ta opcja była dostępna. Dzięki temu użytkownik może kontynuować od miejsca, w którym skończył po akcji e-mailowej.
    język

    Jest to opcjonalny znacznik języka BCP47 reprezentujący ustawienia regionalne użytkownika (na przykład fr ). Możesz użyć tej wartości, aby udostępnić użytkownikom zlokalizowane strony obsługi działań e-mailowych.

    Lokalizację można ustawić za pomocą konsoli Firebase lub dynamicznie, wywołując odpowiedni interfejs API klienta przed uruchomieniem akcji e-mail. Na przykład przy użyciu JavaScript: firebase.auth().languageCode = 'fr'; .

    Aby zapewnić spójne środowisko użytkownika, upewnij się, że lokalizacja obsługi akcji e-mail jest zgodna z szablonem wiadomości e-mail.

    Poniższy przykład pokazuje, jak możesz obsłużyć parametry zapytania w obsłudze opartej na przeglądarce. (Można również zaimplementować procedurę obsługi jako aplikację Node.js przy użyciu podobnej logiki).

    Web version 9

    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': "YOU_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);

    Web version 8

    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);
  2. Obsługuj żądania resetowania hasła, najpierw weryfikując kod akcji za pomocą verifyPasswordResetCode ; następnie uzyskaj nowe hasło od użytkownika i przekaż je do confirmPasswordReset . Na przykład:

    Web version 9

    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.
      });
    }

    Web version 8

    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.
      });
    }
  3. Obsłuż odwołania zmiany adresu e-mail, najpierw weryfikując kod akcji za pomocą checkActionCode ; następnie przywróć adres e-mail użytkownika za pomocą applyActionCode . Na przykład:

    Web version 9

    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.
      });
    }

    Web version 8

    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.
      });
    }
  4. Przeprowadź weryfikację adresu e-mail, wywołując applyActionCode . Na przykład:

    Web version 9

    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.
      });
    }

    Web version 8

    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.
      });
    }
  5. Umieść gdzieś stronę, na przykład użyj Hostingu Firebase .

Następnie musisz skonfigurować projekt Firebase tak, aby łączył się z niestandardowym modułem obsługi akcji e-mail w e-mailach zarządzania użytkownikami.

Aby skonfigurować projekt Firebase do korzystania z niestandardowego modułu obsługi działań e-mail:

  1. Otwórz projekt w konsoli Firebase .
  2. Przejdź do strony Szablony wiadomości e-mail w sekcji Uwierzytelnianie .
  3. W dowolnym wpisie Typy wiadomości e-mail kliknij ikonę ołówka, aby edytować szablon wiadomości e-mail.
  4. Kliknij dostosuj adres URL działania i określ adres URL niestandardowego modułu obsługi działań e-mail.

Po zapisaniu adresu URL będzie on używany przez wszystkie szablony e-maili Twojego projektu Firebase.