Google is committed to advancing racial equity for Black communities. See how.
Эта страница была переведа с помощью Cloud Translation API.
Switch to English

Создавайте собственные обработчики действий электронной почты

Некоторые действия по управлению пользователями, такие как обновление адреса электронной почты пользователя и сброс пароля пользователя, приводят к отправке сообщений электронной почты пользователю. Эти электронные письма содержат ссылки, которые получатели могут открыть для завершения или отмены действия по управлению пользователями. По умолчанию электронные письма управления пользователями ссылаются на обработчик действий по умолчанию, который представляет собой веб-страницу, размещенную по URL-адресу в домене хостинга Firebase вашего проекта.

Вместо этого вы можете создать и разместить настраиваемый обработчик действий электронной почты для выполнения настраиваемой обработки и интеграции обработчика действий электронной почты с вашим веб-сайтом.

Следующие действия по управлению пользователями требуют, чтобы пользователь выполнил действие с помощью обработчика действий электронной почты:

  • Сброс паролей
  • Отмена изменений адреса электронной почты - когда пользователи меняют основные адреса электронной почты своих учетных записей, Firebase отправляет электронное письмо на их старые адреса, что позволяет им отменить изменение.
  • Проверка адресов электронной почты

Чтобы настроить обработчик действий электронной почты в проекте Firebase, необходимо создать и разместить веб-страницу, которая использует Firebase JavaScript SDK для проверки действительности запроса и выполнения запроса. Затем вы должны настроить шаблоны электронной почты вашего проекта Firebase, чтобы они связывались с вашим обработчиком настраиваемых действий.

Создайте страницу обработчика действия электронной почты

  1. Firebase добавляет несколько параметров запроса к URL-адресу вашего обработчика действий при создании электронных писем для управления пользователями. Например:

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

    Эти параметры определяют задачу управления пользователями, которую выполняет пользователь. Ваша страница обработчика действий электронной почты должна обрабатывать следующие параметры запроса:

    параметры
    Режим

    Действие управления пользователями, которое необходимо завершить. Может быть одним из следующих значений:

    • resetPassword
    • recoverEmail
    • verifyEmail
    oobCode Одноразовый код, используемый для идентификации и проверки запроса.
    apiKey Ключ API вашего проекта Firebase, предоставленный для удобства
    continueUrl Это необязательный URL-адрес, который обеспечивает способ передачи состояния обратно в приложение через URL-адрес. Это относится к режимам сброса пароля и проверки электронной почты. При отправке электронного письма для сброса пароля или письма с ActionCodeSettings необходимо ActionCodeSettings объект ActionCodeSettings с URL-адресом продолжения, чтобы он был доступен. Это позволяет пользователю продолжить с того места, где он остановился после действия по электронной почте.
    языки

    Это необязательный языковой тег BCP47, представляющий локаль пользователя (например, fr ). Вы можете использовать это значение для предоставления пользователям локализованных страниц обработчика действий электронной почты.

    Локализацию можно установить через Firebase Console или динамически, вызвав соответствующий клиентский API перед запуском действия электронной почты. Например, используя JavaScript: firebase.auth().languageCode = 'fr'; ,

    Для единообразия взаимодействия с пользователем убедитесь, что локализация обработчика действий электронной почты соответствует локализации шаблона электронной почты.

    В следующем примере показано, как можно обрабатывать параметры запроса в обработчике на основе браузера. (Вы также можете реализовать обработчик как приложение Node.js, используя аналогичную логику.)

    <script src="https://www.gstatic.com/firebasejs/7.18.0/firebase.js"></script>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 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': <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);
    </script>
    
  2. Для обработки запросов на сброс пароля сначала verifyPasswordResetCode код действия с помощью verifyPasswordResetCode ; затем получите новый пароль от пользователя и передайте его в confirmPasswordReset . Например:

    function handleResetPassword(auth, actionCode, continueUrl, lang) {
      // Localize the UI to the selected language as determined by the lang
      // parameter.
      var accountEmail;
      // Verify the password reset code is valid.
      auth.verifyPasswordResetCode(actionCode).then(function(email) {
        var accountEmail = email;
    
        // TODO: Show the reset screen with the user's email and ask the user for
        // the new password.
    
        // Save the new password.
        auth.confirmPasswordReset(actionCode, newPassword).then(function(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(function(error) {
          // Error occurred during confirmation. The code might have expired or the
          // password is too weak.
        });
      }).catch(function(error) {
        // Invalid or expired action code. Ask user to try to reset the password
        // again.
      });
    }
    
  3. Обработайте аннулирование изменения адреса электронной почты, сначала проверив код действия с помощью checkActionCode ; затем восстановите адрес электронной почты пользователя с помощью applyActionCode . Например:

    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(function(info) {
        // Get the restored email address.
        restoredEmail = info['data']['email'];
    
        // Revert to the old email.
        return auth.applyActionCode(actionCode);
      }).then(function() {
        // 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(function() {
          // Password reset confirmation sent. Ask user to check their email.
        }).catch(function(error) {
          // Error encountered while sending password reset code.
        });
      }).catch(function(error) {
        // Invalid code.
      });
    }
    
  4. applyActionCode проверку адреса электронной почты, вызвав applyActionCode . Например:

    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(function(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(function(error) {
        // Code is invalid or expired. Ask the user to verify their email address
        // again.
      });
    }
    
  5. Разместите страницу где-нибудь, например, используйте Firebase Hosting .

Затем вы должны настроить свой проект Firebase так, чтобы он ссылался на ваш пользовательский обработчик действий электронной почты в электронных письмах управления пользователями.

Чтобы настроить проект Firebase на использование настраиваемого обработчика действий электронной почты:

  1. Откройте свой проект в консоли Firebase .
  2. Перейдите на страницу шаблонов электронной почты в разделе Auth .
  3. В любой записи типа электронной почты щелкните значок карандаша, чтобы изменить шаблон электронной почты.
  4. Щелкните настроить URL-адрес действия и укажите URL-адрес своего обработчика настраиваемого действия электронной почты.

После сохранения URL-адреса он будет использоваться всеми шаблонами электронной почты вашего проекта Firebase.