O Google tem o compromisso de promover a igualdade racial para as comunidades negras. Saiba como.

Crie manipuladores de ações de e-mail personalizados

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

Algumas ações de gerenciamento de usuários, como atualizar o endereço de e-mail de um usuário e redefinir a senha de um usuário, resultam no envio de e-mails ao usuário. Esses e-mails contêm links que os destinatários podem abrir para concluir ou cancelar a ação de gerenciamento de usuários. Por padrão, os e-mails de gerenciamento de usuários são vinculados ao gerenciador de ações 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 manipulador de ação de e-mail personalizado para fazer o processamento personalizado e integrar o manipulador de ação de e-mail ao seu site.

As seguintes ações de gerenciamento de usuários exigem que o usuário conclua a ação usando um manipulador de ações de email:

  • Redefinindo senhas
  • Revogação de alterações de endereço de e-mail: quando os usuários alteram os endereços de e-mail principais de suas contas, o Firebase envia um e-mail para seus endereços antigos permitindo que eles desfaçam a alteração
  • Verificando endereços de e-mail

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

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

  1. O Firebase adiciona vários parâmetros de consulta ao URL do gerenciador de ações ao gerar e-mails de gerenciamento de usuários. Por exemplo:

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

    Esses parâmetros especificam a tarefa de gerenciamento de usuários que o usuário está concluindo. Sua página do gerenciador de ações de e-mail deve lidar com os seguintes parâmetros de consulta:

    Parâmetros
    modo

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

    • resetPassword
    • recoverEmail
    • verifyEmail
    oobCode Um código de uso único, usado para identificar e verificar uma solicitação
    Chave API A chave de API do seu projeto do Firebase, fornecida para conveniência
    continueUrl Esta é uma URL opcional que fornece uma maneira de passar o estado de volta ao aplicativo por meio de uma URL. Isso é relevante para os modos de redefinição de senha e 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 de continuação para que ele esteja disponível. Isso possibilita que um usuário continue exatamente de onde parou após uma ação de email.
    lang

    Esta é a tag de idioma BCP47 opcional que representa a localidade do usuário (por exemplo, fr ). Você pode usar esse valor para fornecer páginas localizadas do manipulador de ações de email para seus usuários.

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

    Para uma experiência de usuário consistente, certifique-se de que a localização do manipulador de ações de email corresponda à do modelo de email.

    O exemplo a seguir mostra como você pode manipular os parâmetros de consulta em um manipulador baseado em navegador. (Você também pode implementar o manipulador como um aplicativo Node.js usando uma lógica semelhante.)

    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. Lide com solicitações de redefinição de senha verificando primeiro o código de ação com verifyPasswordResetCode ; em seguida, obtenha uma nova senha do usuário e passe-a para confirmPasswordReset . Por exemplo:

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

    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. Lide com a verificação de endereço de e-mail chamando applyActionCode . Por exemplo:

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

Em seguida, você deve configurar seu projeto do Firebase para vincular ao seu gerenciador de ações de e-mail personalizado em seus e-mails de gerenciamento de usuários.

Para configurar seu projeto do Firebase para usar seu gerenciador de ações de e-mail personalizado:

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

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