Criar gerenciadores de ações de e-mail personalizados

Algumas ações de gerenciamento de usuário, como atualizar o endereço de e-mail e redefinir a senha, resultam no envio de e-mails para ele. Esses e-mails contêm links que os destinatários podem abrir para concluir ou cancelar a ação de gerenciamento de usuário. Por padrão, os e-mails de gerenciamento de usuário são vinculados a um gerenciador de ação padrão, que é uma página da Web hospedada em um URL no domínio do Firebase Hosting do seu projeto.

Em vez disso, você pode criar e hospedar um gerenciador personalizado de ações de e-mail para personalizar o processamento e integrar o gerenciador ao seu site.

As seguintes ações de gerenciamento de usuários exigem que o usuário utilize um gerenciador de ações de e-mail:

  • redefinição de senhas
  • revogação de alterações de endereços de e-mail — quando os usuários alteram os endereços de e-mail primários das respectivas contas, um e-mail é enviado pelo Firebase ao antigo endereço para que possam desfazer a alteração.
  • verificação de endereços de e-mail

Para personalizar o gerenciador de ações de e-mail do seu projeto do Firebase, crie e hospede uma página da Web que use o SDK JavaScript do Firebase para verificar a validade da solicitação e concluí-la. Em seguida, personalize os modelos de e-mail do seu projeto do Firebase e vincule-os ao seu gerenciador de ações personalizado.

Criar a página do gerenciador de ações de e-mail

  1. Vários parâmetros de consulta são adicionados ao URL do gerenciador de ações quando e-mails de gerenciamento de usuários são gerados pelo Firebase. Por exemplo:

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

    Esses parâmetros especificam a tarefa de gerenciamento de usuário que está sendo realizada. Sua página do gerenciador de ações de e-mail precisa resolver os seguintes parâmetros de consulta:

    Parâmetros
    modo

    A ação de gerenciamento de usuário a ser concluída. Pode ser um dos seguintes valores:

    • resetPassword
    • recoverEmail
    • verifyEmail
    oobCode Um código único utilizado para identificar e verificar uma solicitação.
    apiKey A chave de API do seu projeto do Firebase, fornecida para fins de praticidade.
    continueUrl Este é um URL opcional que fornece um modo de transmitir o estado para o app por meio de um URL. Isso é relevante para a redefinição de senha e os modos de verificação de e-mail. Ao enviar um e-mail de redefinição de senha ou um e-mail de verificação, um objeto ActionCodeSettings precisa ser especificado com um URL contínuo para que esteja disponível. Isso permite que um usuário continue de onde parou depois de uma ação de e-mail.
    lang

    Esta é a tag de idioma BCP47 opcional que representa o local do usuário (por exemplo, fr). Você pode usar esse valor para fornecer aos seus usuários páginas do gerenciador de ações de e-mail localizadas.

    A localização pode ser definida por meio do Firebase console ou dinamicamente. Para isso, chame a API do cliente correspondente antes de acionar a ação de e-mail. Por exemplo, use JavaScript: firebase.auth().languageCode = 'fr';.

    Para uma experiência de usuário consistente, verifique se a localização do gerenciador de ações de e-mail corresponde aos modelos de e-mail.

    O exemplo a seguir mostra como processar os parâmetros de consulta em um gerenciador baseado em navegador. Também é possível implementar o gerenciador como um aplicativo Node.js usando uma lógica semelhante.

    <script src="https://www.gstatic.com/firebasejs/5.8.6/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. Para resolver as solicitações de redefinição de senha, primeiro verifique o código de ação com verifyPasswordResetCode. Depois, colete uma nova senha do usuário e a transfira para confirmPasswordReset. Por exemplo:

    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. Para lidar com revogações de alteração de endereço de e-mail, primeiro verifique o código de ação com checkActionCode. Depois, restaure o endereço de e-mail do usuário com applyActionCode. Por exemplo:

    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. Para resolver verificações de endereço de e-mail, chame applyActionCode. Por exemplo:

    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. Hospede a página em algum lugar, por exemplo, usando o Firebase Hosting.

Em seguida, vincule seu gerenciador personalizado de ações de e-mail ao seu projeto do Firebase nos e-mails de gerenciamento de usuários.

Para configurar seu projeto do Firebase de forma que ele use um gerenciador personalizado de ações de e-mail:

  1. Abra seu projeto no Firebase console.
  2. Vá para a página Modelos de e-mail na seção Auth.
  3. Em qualquer uma das entradas Tipos de e-mail, clique no ícone de lápis para editar o modelo de e-mail.
  4. Clique em Personalizar URL acionável e especifique o URL do gerenciador personalizado de ações de e-mail.

Depois de salvar o URL, ele será usado por todos os modelos de e-mail do projeto do Firebase.

Enviar comentários sobre…

Precisa de ajuda? Acesse nossa página de suporte.