Como transmitir o estado nas ações de e-mail

Você pode passar o estado por meio de um URL de confirmação ao enviar ações de e-mail para redefinição de senha ou verificar o e-mail de um usuário. Isso possibilita ao usuário retornar ao app após a conclusão da ação. Além disso, você pode especificar se é para processar o link de ação do e-mail diretamente de um aplicativo para dispositivos móveis quando ele for instalado, em vez de uma página da Web.

Isso pode ser extremamente útil nas seguintes situações comuns:

  • Um usuário que não está conectado no momento pode estar tentando acessar conteúdo que exija que o usuário faça login. No entanto, o usuário pode ter esquecido a senha e, por conta disso, acionou o fluxo de redefinição de senha. No final do fluxo, o usuário espera voltar para a seção do app que estava tentando acessar.

  • Um aplicativo pode oferecer acesso apenas a contas verificadas. Por exemplo, uma newsletter pode exigir que o usuário verifique o e-mail antes de se inscrever. O usuário passa pelo fluxo de verificação de e-mail e espera retornar ao app para concluir a inscrição.

  • Em outros casos, o usuário pode ter iniciado o fluxo de um dispositivo móvel e espera retornar ao aplicativo para dispositivos móveis, e não ao navegador, após a verificação.

A possibilidade de transmitir o estado usando um URL de confirmação é um recurso eficiente que o Firebase Authentication oferece e que pode melhorar significativamente a experiência do usuário.

Como transmitir estado/URL de confirmação em ações de e-mail

Para transmitir um URL de confirmação com segurança, o domínio do URL precisa ser adicionado como um domínio autorizado no Console do Firebase. Na seção Autenticação, verifique se esse domínio está na lista de Domínios autorizados da guia Método de login. Se não estiver, adicione-o.

Uma instância firebase.auth.ActionCodeSettings precisa ser fornecida ao enviar um e-mail de redefinição de senha ou de verificação. Essa interface tem os seguintes parâmetros:

Parâmetro Tipo Descrição
url string

Define o link (estado/URL contínuo) que tem diferentes significados em contextos distintos:

  • Quando o link aparece nos widgets de ação da Web, este é o link direto no parâmetro de consulta continueUrl.
  • Quando o link aparece diretamente no app, este é o parâmetro de consulta continueUrl no link direto do Dynamic Link.
iOS ({bundleId: string}|undefined) Define o ID do pacote iOS. Isso tentará abrir o link em um app iOS, se estiver instalado. O app iOS precisa estar registrado no console.
android ({packageName: string, installApp:boolean|undefined, minimumVersion: string|undefined}|undefined) Define o nome do pacote Android. Isso tentará abrir o link em um app Android se ele estiver instalado. Se o installApp for transmitido, ele especificará se é para instalar o app para Android se o dispositivo for compatível com ele e o app ainda não estiver instalado. Se este campo for mostrado sem um packageName, um erro será lançado, explicando que o packageName precisa ser fornecido em conjunto com o campo. Se minimumVersion for especificado e uma versão mais antiga do app estiver instalada, o usuário será levado à Play Store para atualizar o app. O app para Android precisa estar registrado no console.
handleCodeInApp (boolean|undefined) Se o link de ação de e-mail será aberto em um aplicativo para dispositivos móveis ou em um link da Web primeiro. O valor padrão é falso. Quando definido como verdadeiro, o link do código de ação será enviado como um link universal ou um link do app Android e será aberto pelo app, se estiver instalado. Caso seja "false", o código será enviado primeiro ao widget da Web e, em seguida, redirecionará para o app, se estiver instalado.
dynamicLinkDomain (string|undefined) Define o domínio de link dinâmico (ou subdomínio) a ser usado para o link atual, se ele for aberto usando o Firebase Dynamic Links. Como é possível configurar vários domínios de links dinâmicos por projeto, esse campo oferece a capacidade de escolher explicitamente um. Se nenhum for fornecido, o primeiro domínio é usado por padrão.

O exemplo a seguir ilustra como enviar um link de verificação por e-mail que será aberto em um aplicativo para dispositivos móveis como um link dinâmico do Firebase usando o domínio de link dinâmico personalizado example.page.link (app para iOS com.example.ios ou app para Android com.example.android em que o app será instalado, se ainda não estiver instalado, e a versão mínima for 12). O link direto conterá o payload do URL de confirmação https://www.example.com/?email=user@example.com.

var actionCodeSettings = {
  url: 'https://www.example.com/?email=' + firebase.auth().currentUser.email,
  iOS: {
    bundleId: 'com.example.ios'
  },
  android: {
    packageName: 'com.example.android',
    installApp: true,
    minimumVersion: '12'
  },
  handleCodeInApp: true,
  // When multiple custom dynamic link domains are defined, specify which
  // one to use.
  dynamicLinkDomain: "example.page.link"
};
firebase.auth().currentUser.sendEmailVerification(actionCodeSettings)
  .then(function() {
    // Verification email sent.
  })
  .catch(function(error) {
    // Error occurred. Inspect error.code.
  });

O Firebase Auth usa o Firebase Dynamic Links ao enviar um link que deve ser aberto em um aplicativo para dispositivos móveis. Para usar esse recurso, o Dynamic Links precisa ser configurado no Console do Firebase.

  1. Ative o Firebase Dynamic Links:

    1. No Console do Firebase, abra a seção Dynamic Links.
    2. Caso ainda não tenha aceitado os termos do Dynamic Links e criado um domínio do Dynamic Links, faça isso agora.

      Anote o domínio do Dynamic Links se você já tiver criado um. Um domínio do Dynamic Links geralmente se parece com este exemplo:

      example.page.link

      Você vai precisar desse valor ao configurar o aplicativo Android ou Apple para interceptar o link recebido.

  2. Como configurar apps Android:

    1. Se você planeja processar esses links a partir do aplicativo para Android, o nome do pacote para Android precisa ser especificado nas configurações do projeto do Firebase console. Além disso, o SHA-1 e o SHA-256 do certificado do aplicativo precisam ser fornecidos.
    2. Você também precisará configurar o filtro de intent para o link direto no arquivo AndroidManifest.xml.
    3. Para mais informações, consulte as instruções para receber links dinâmicos no Android.
  3. Como configurar apps iOS:

    1. Se você planeja processar esses links com o app iOS, o ID do pacote do iOS precisa ser especificado nas configurações do projeto do Console do Firebase. Além disso, os IDs da App Store e da equipe de desenvolvedores da Apple também precisam ser especificados.
    2. Você também precisará configurar o domínio do link universal FDL como um domínio associado nos recursos do seu aplicativo.
    3. Se você pretende distribuir seu aplicativo para a versão 8 e anteriores do iOS, será necessário configurar o ID do pacote iOS como um esquema personalizado para URLs recebidos.
    4. Para mais informações, consulte as instruções para receber o Dynamic Links no iOS.

Processamento de ações de e-mail em um app da Web

Você pode especificar se quer processar o link de código de ação de um aplicativo da Web primeiro e, em seguida, redirecionar para outra página da Web ou aplicativo para dispositivos móveis após a conclusão bem-sucedida, desde que o aplicativo para dispositivos móveis esteja disponível. Isso é feito ao configurar handleCodeInApp como false no objeto firebase.auth.ActionCodeSettings. Embora não seja necessário um ID de pacote iOS ou um nome de pacote Android, fornecê-los permitirá ao usuário ser redirecionado para o app especificado na conclusão do código de ação de e-mail.

O URL da Web usado aqui é aquele configurado na seção de modelos de ações de e-mail. Um padrão é provisionado para todos os projetos. Consulte Como personalizar gerenciadores de e-mail para saber mais sobre como personalizar o gerenciador de ações de e-mail.

Neste caso, o link dentro do parâmetro de consulta continueUrl será um link FDL com payload URL especificado no objeto ActionCodeSettings. Embora você possa interceptar e manipular o link recebido do seu app sem nenhuma dependência adicional, recomendamos o uso da biblioteca de cliente FDL para analisar o link direto para você.

Ao processar ações de e-mail como a verificação, o código de ação do parâmetro de consulta oobCode precisa ser analisado no link direto e aplicado via applyActionCode para que a alteração seja concluída, ou seja, para que o e-mail seja verificado.

Processamento de ações de e-mail em um app para dispositivos móveis

É possível especificar se você quer processar o link do código de ação em seu aplicativo para dispositivos móveis primeiro, desde que esteja instalado. Com aplicativos para Android, você também pode especificar por meio do android.installApp que o aplicativo será instalado se o dispositivo for compatível e ainda não estiver instalado. Se o link for clicado em um dispositivo não compatível com o aplicativo para dispositivos móveis, ele será aberto de uma página da Web. Isso é feito ao configurar handleCodeInApp como true no objeto firebase.auth.ActionCodeSettings. O nome do pacote Android ou o ID do pacote iOS do aplicativo para dispositivos móveis também precisa ser especificado.

O URL de fallback da Web usado aqui, quando nenhum aplicativo para dispositivos móveis está disponível, é aquele configurado na seção de modelos de ação de e-mail. Um padrão é provisionado para todos os projetos. Consulte Como personalizar gerenciadores de e-mail para saber mais sobre como personalizar o gerenciador de ações de e-mail.

Neste caso, o link do app para dispositivos móveis enviado ao usuário será um link FDL em que o payload é o URL do código de ação, configurado no console, com os parâmetros de consulta oobCodemode, apiKey e continueUrl. O último será o URL original especificado no objeto ActionCodeSettings. Embora seja possível interceptar e manipular o link recebido do seu app sem qualquer dependência adicional, recomendamos o uso da biblioteca de cliente FDL para analisar o link direto para você. É possível aplicar o código de ação diretamente a partir de um app para dispositivos móveis da mesma forma que ele é processado no fluxo da Web descrito na seção Como personalizar gerenciadores de e-mail.

Ao processar ações de e-mail como a verificação, o código de ação do parâmetro de consulta oobCode precisa ser analisado no link direto e aplicado via applyActionCode para que a alteração seja concluída, ou seja, para que o e-mail seja verificado.