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);
    auth_handle_mgmt_query_params.js

    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);
    custom-email-handler.js

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

    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.
  });
}
    custom-email-handler.js

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

    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.
  });
}
    custom-email-handler.js

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

    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.
  });
}
    custom-email-handler.js

  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.