Melhore sua autenticação multifatorial com as APIs da Vonage e o Firebase

Este artigo foi atualizado pela última vez em 4 de março de 2026

Introdução

Nesta postagem do blog, vou mostrar como aprimorar sua autenticação multifatorial usando nossa API Identity Insights, o recurso SIM Swape Verify API. Também usamos os Serviços do Firebase para armazenar nossas funções com o Cloud Functions, dados no Cloud Firestore e nosso aplicativo web usando a hospedagem do Firebase.

O código-fonte do aplicativo pode ser encontrado em nosso repositório do GitHub.

Observação: esta postagem do blog adiciona os Serviços do Firebase ao Melhore sua autenticação multifatorial com a Verify API e o SIM Swap Insight. O tutorial aborda tanto a criação do servidor usando o Express quanto sua implantação na nuvem. Você pode conferir esta postagem anterior do blog e o repositório do GitHub para obter explicações mais detalhadas.

Pré-requisitos

• Um account de desenvolvedor da Vonage

• O Node.js e o npm estão instalados no seu computador

• Um projeto do Firebase é configurado no Console do Firebase (chamei o meu de account-recovery-demo)

• CLI do Firebase instalado

• Um editor de código/texto

Diagrama geral e arquitetura da aplicação

Este tutorial sobre recuperação de conta mostra como os usuários podem fazer login, redefinir senhas ou verificar sua identidade acessando a página front-end da web. Essa página interage com o back-end do Firebase Functions para armazenar e recuperar as credenciais dos usuários no Firebase Cloud Firestore.

Assim que o usuário tentar redefinir sua senha, ele receberá um código de verificação único gerado pela Verify API. No entanto, isso só ocorrerá após a verificação dos detalhes da troca de SIM junto às operadoras de telecomunicações, por meio do recurso de análise de troca de SIM da API Vonage Identity Insights.

Overview DiagramO aplicativo segue uma arquitetura cliente-servidor. O cliente lida com as interações do usuário por meio de HTML e JavaScript, incluindo a inserção de números de telefone e o envio de códigos de verificação. O Firebase Hosting hospeda o aplicativo web, o Firebase Functions lida com a lógica do lado do servidor e o Firestore armazena os dados do usuário e o status da verificação.

Como configurar um projeto do Cloud Functions

Anteriormente, o aplicativo Express gerenciava rotas e chamadas de API diretamente em um ambiente de servidor. Com o Firebase Cloud Functions, cada endpoint definido anteriormente no aplicativo Express é mapeado para uma função na nuvem específica, por meio da reescrita das regras no arquivo arquivo firebase.json Essa configuração separa o mecanismo de roteamento da lógica da aplicação, permitindo que cada função seja dimensionada e gerenciada de forma independente. O Firebase lida automaticamente com as solicitações recebidas e as direciona para a função na nuvem apropriada com base nas regras de reescrita, como sendcode para sendCode ou /login para login. Como o cliente web agora está em um domínio diferente do servidor, também estamos usando CORS (Cross-Origin Resource Sharing).

Como configurar o projeto

Você pode trabalhar neste projeto usando seu editor de código preferido. No meu caso, usei o Visual Studio Code e o Firebase Studio oferece suporte a projetos do Firebase, facilitando o desenvolvimento nele. Escolha o editor que você mais gosta!

1. Você pode começar clonando o repositório do GitHub.

2. Instale as dependências necessárias: npm install.

Como configurar o Firebase

A seguir estão as etapas para configurar o projeto; você pode criar um projeto do Firebase tanto pelo console do Firebase quanto pela linha de comando. Os serviços do Firebase que usaremos são: Functions, Hosting e Firestore.

• No console, clique para criar um novo projeto, dê um nome a ele e clique em “Continuar”.

• Selecione essa opção se for usar ferramentas de análise.

• Aguarde até que o projeto seja criado.

• Defina o tipo de cobrança na seta de engrenagem ⚙ -> Uso e faturamento -> Detalhes e configurações para Blaze (o plano pré-pago deve usar uma API de terceiros).

• Defina a localização do recurso do Google Cloud em ⚙ -> Configurações do projeto.

Como definir destinos de implantação no Firebase

Vamos definir suas destinos de implantação. Crie um .firebaserc arquivo na pasta do seu projeto e atualize ‘PROJECT_ID’ com o ID do seu projeto. Há um .firebaserc.example arquivo indicando onde você pode encontrá-lo na pasta.

// .firebaserc

{

  "projects": {

    "default": "PROJECT_ID"

  }

}

Configure suas variáveis de ambiente

É hora de adicionar as variáveis de ambiente ao seu projeto.

Do arquivo arquivo /functions/.env.example , você pode criar o /functions/.env arquivo e incluir as seguintes variáveis de ambiente:

# .env

VONAGE_API_KEY=your_api_key VONAGE_API_SECRET=your_api_secret VONAGE_APPLICATION_ID=your_application_id VONAGE_APPLICATION_PRIVATE_KEY=/path/to/your/private.key
PERIOD=72

Nota: O Secret Manager é uma maneira segura de importar variáveis de ambiente. Este tutorial usa o dotenv, já que o Cloud Functions para Firebase oferece suporte ao dotenv.

Como testar localmente com o Emulador do Firebase

Ao realizar testes localmente, você pode usar o Firebase Local Emulator Suite.

1. Inicializar os emuladores firebase init emulators.

2. Inicie os emuladores firebase emulators:start.

3. Você encontrará na linha de comando a URL para abrir o aplicativo web local e a instância do Firestore. Abra ambas as páginas e insira dados na instância do Firestore. Lembre-se de que essa é a sua instância local do Firestore. Portanto, ela será diferente do que você encontrará no projeto real no console da nuvem.

Observação: Para este projeto, eu os incluí no firebase.json arquivo para que você possa acessar o emulador na porta 5001 e o Firestore na porta 8080.

Implemente sua aplicação web e experimente-a

Como fazer a implantação com o Firebase Hosting

Implante seus arquivos estáticos (HTML, CSS, JavaScript) no Firebase Hosting. Certifique-se de que a CLI do Firebase esteja instalada e inicializada em seu projeto. Execute o seguinte comando para realizar a implantação:

firebase deploy --only hosting

Você pode ver que uma página HTML será gerada para você na linha de comando. No meu exemplo, o ID do meu projeto é 'account-recovery-demo' e a URL gerada é 'https://account-recovery-demo.web.app'. Vá em frente e abra a sua!

Cloud Functions para Firebase

Implemente sua lógica do lado do servidor usando o Firebase Functions. Certifique-se de que a CLI do Firebase esteja instalada e inicializada em seu projeto. Execute o comando a seguir para fazer a implantação:

firebase deploy --only functions

Se você acessar a aba “funções” no seu console do Firebase , você poderá ver as quatro funções: sendCode, login, verify e simSwap. Se precisar verificar o controle de versão e os logs, você pode fazer isso para cada uma das funções criadas.

Banco de dados Firebase Cloud Firestore

Use o Firestore para armazenar os dados do usuário e o status de verificação. Crie uma coleção chamada “credentials” e preencha os campos do Firestore com os nós de credenciais.

Crie cada nó de evento contendo os seguintes campos do tipo string: password, phone number, request_id e username. Nesta aplicação de exemplo, armazenamos esses campos confidenciais no Firestore. Idealmente, em uma aplicação real, eles deveriam ser protegidos de forma mais segura, utilizando, por exemplo, Secret Manager.

Cloud Firestore Database Instance

Experimente

É hora de acessar o aplicativo web que você implantou usando a hospedagem do Firebase.

O fluxo de trabalho do teste deve ser o seguinte: imagine que você esqueceu sua senha. Clique em “Esqueci a senha” para iniciar a recuperação. Será solicitado que você insira seu número de telefone e solicite a verificação.

Se o aplicativo detectar uma troca recente de cartão SIM, aparecerá um aviso: Atenção! Ocorreu uma alteração recente no emparelhamento do cartão SIM relacionada à conta de celular do usuário. Deseja continuar? Se não foi você quem fez a troca e você escolher “Não, não fui eu”, isso é um sinal de que pode estar ocorrendo uma fraude com o seu número. É hora de entrar em contato com sua operadora de celular.

Observação: Na demonstração do tutorial, é solicitado que você confirme que trocou o cartão SIM; em uma situação real, o usuário provavelmente seria orientado a entrar em contato diretamente com a operadora para verificações adicionais de identidade. De maneira semelhante, essa abordagem poderia ser aplicada à autenticação multifatorial no login, em que uma verificação ocorreria antes do envio do token de uso único. Se for detectada uma troca recente do cartão SIM, o usuário pode entrar em contato diretamente com o provedor de serviços para verificações adicionais de identidade.

Por outro lado, se você trocou seu chip e selecionou “Sim, fui eu”, o aplicativo usa a Verify API para enviar um código de verificação para o seu celular. Digite esse código na próxima tela e defina uma nova senha. Depois disso, você pode usar suas novas credenciais para acessar sua conta bancária simulada.

Conclusão

Você chegou ao fim deste tutorial. Hoje, você aprendeu como aprimorar seu aplicativo de autenticação multifatorial adicionando os Serviços do Firebase ao seu aplicativo web.

Recursos adicionais

• Envie mensagens SMS com o Cloud Functions para Firebase Gen 2

• Crie um agendador de consultas usando Node, Firebase e Vonage

• Envie e receba mensagens SMS com o Firebase Functions | One Dev Minute