Como adicionar a autenticação de dois fatores (2FA) a um aplicativo React usando o Firebase Functions

Se você é como eu, provavelmente tem alguns dispositivos “inteligentes” espalhados pela casa. Existem várias maneiras de interagir com esses dispositivos e controlá-los, mas eu queria poder controlá-los por meio de mensagens de texto e, no futuro, também por Voice.

Então, decidi criar algumas ferramentas no Firebase para dar início ao projeto. O primeiro passo que eu queria dar, no entanto, era proteger os números de telefone com acesso, e achei que seria o momento perfeito para testar a Verify API. É verdade que isso é um pouco exagerado, já que não se trata de um aplicativo distribuído, mas, por segurança, um número de telefone precisa passar pelo processo de verificação para acessar meus dispositivos.

Verify API

A Verify API é uma forma de confirmar que o celular pertence ao usuário. Realizar a verificação ajuda a proteger contra spam e atividades suspeitas, além de validar a propriedade.

A própria API contém uma grande variedade de recursos. Suas opções de configuração permitem que você crie o fluxo de trabalho exato que funciona para o seu sistema. Por exemplo, o fluxo de trabalho padrão envia um SMS com um código PIN, aguarda 125 segundos, em seguida, aciona um evento de conversão de texto em fala, aguarda mais 3 minutos, aciona novamente e aguarda 5 minutos antes de encerrar a solicitação por completo.

Gosto de ter esse nível de controle sobre algo assim, pois isso me permite ser muito específico quanto à forma como interajo com meus usuários. No meu caso específico, mantive tudo bem simples e enviei apenas uma mensagem de SMS que expirou em dois minutos, já que queria isso principalmente para meus próprios fins.

let opts = {
      number: context.params.phoneNumber,
      brand: "Total Home Control",
      workflow_id: 6,
      pin_expiry: 120
    };

Se você quiser começar a usar a Verify API, pode se inscrever para obter uma conta na Vonage hoje mesmo para começar.

Funções do Firebase

Desde que decidi usar Firebase e Firestore, configurei alguns Cloud Functions para interagir com os dados e a Verify API foi meu próximo passo. Sempre que um novo número de telefone fosse criado, eu queria enviar um código de verificação para ele e, em seguida, ter uma função para verificar o código.

Promessas, promessas

Ao começar a aprender sobre o Cloud Functions, você pode tentar algumas operações simples e ganhar confiança, que foi o que eu fiz. Depois de experimentar algumas funções simples primeiro, percebi que seria capaz de desenvolver isso bem rapidamente.

E eu estava errado. Um detalhe que eu ignorei completamente é que os métodos de callback não são avaliados no ambiente do Cloud Function da mesma forma que em outros ambientes. Assim que há um valor retornado ou uma promessa, a CPU para. Como o SDK do Nexmo para JavaScript está sendo executado em métodos de callback, ele interrompe o processamento.

Não saber disso deve ter sido um dos problemas mais frustrantes com os quais me deparei nos últimos tempos. O timing de tudo era estranho, porque a função de retorno era executada quando eu tentava novamente, o que me levava a pensar que não estava esperando o tempo suficiente ou que a latência era péssima.

Depois que resolvi isso, percebi que precisava criar wrappers de Promise para os métodos do SDK, e tudo funcionou perfeitamente. Se você quiser algumas dicas e truques úteis, recomendo ler este guia da documentação do Firebase.

Solicitando o código de verificação

O método de solicitação Verify no SDK JavaScript da Nexmo é bastante simples, já que a estrutura do SDK facilita a execução da maior parte das tarefas. A primeira coisa que precisei fazer foi envolvê-lo em uma promessa.

function verifyRequest(opts) {
  return new Promise((resolve, reject) => {
    nexmo.verify.request(opts, (err, res) => {
      if (err) reject(err);
      resolve(res);
    })
  });
}

A criação desse wrapper permite que o método de retorno de chamada seja executado e retorne como uma resolução de Promise, em vez de ser ignorado.

Com esse método, agora eu poderia criar uma função do Firebase para ser executada quando o aplicativo adicionasse um novo número ao Firestore.

exports.requestVerify = functions.firestore.document('/phoneNumbers/{phoneNumber}')
  .onCreate((entry, context) => {
    let opts = {
      number: context.params.phoneNumber,
      brand: "Total Home Control",
      workflow_id: 6,
      pin_expiry: 120
    };

    return verifyRequest(opts)
      .then((res) => {
        console.log(res);
        return admin.firestore().doc(`/phoneNumbers/${context.params.phoneNumber}`).update({ req_id: res.request_id })
      })
      .then((res) => console.log(res))
      .catch((err) => console.error(err));
  });

Com a Verify API, precisamos acompanhar o request_id a ser usado no processo de verificação. Eu uso isso para indicar que o processo de verificação foi iniciado, mas ainda não foi concluído.

Verificação do código de confirmação

Assim como no exemplo anterior, o método do SDK precisa primeiro ser encapsulado como uma Promise.

function verifyCheck(opts) {
  return new Promise((resolve, reject) => {
    nexmo.verify.check(opts, (err, res) => {
      if (err) reject(err);
      resolve(res);
    })
  });
}

Assim que o usuário o recebe, o aplicativo React solicita o código e, em seguida, chama a função diretamente do aplicativo, passando o request_id, e o code.

exports.checkVerify = functions.https.onCall((data) => {
  let opts = {
    request_id: data.req_id,
    code: data.code
  };

  return verifyCheck(opts)
    .then((res) => {
      if (res.status === "0") {
        return admin.firestore().doc(`/phoneNumbers/${data.phoneNumber}`).update({ req_id: null, verified: true });
      }
    })
    .then((res) => console.log(res))
    .catch((err) => console.error(err));
});

Desde que o código seja validado, o documento é atualizado para incluir um verified marcador, e o processo está concluído. Há respostas de status de erro que devem ser verificadas e tratadas adequadamente — por exemplo, se o código tiver excedido o tempo limite. Atualmente, meu aplicativo parte do princípio de que a verificação é bem-sucedida.

Aplicativo React

Não vou me alongar muito explicando todo o código que escrevi para meu aplicativo, mas os pontos principais são inserir os dados e, em seguida, chamar a função do Firebase a partir do front-end.

No meu aplicativo, tenho um formulário para adicionar um novo número, que consiste apenas no campo do número de telefone. Ao enviar o formulário, ele simplesmente adiciona o número ao banco de dados. Também configurei um arquivo de contexto do Firebase que define as conexões entre meu aplicativo e o Firebase, para que eu possa importar facilmente tudo o que preciso.

import { db, fb } from '../../context/firebase';

//-----//

function _handleSubmit(e) {
  e.preventDefault();

  let data = {
    owner: fb.auth().currentUser.uid,
    verified: false,
  };

  return db.collection('phoneNumbers').doc(phoneNumber).set(data);
}

//-----//

A verificação tem praticamente o mesmo formulário e um método de envio semelhante.

import { functions } from '../../context/firebase';

//-----//

function _handleSubmit(e) {
  e.preventDefault();
  var checkVerify = functions.httpsCallable('checkVerify');
  checkVerify({ code: code, req_id: value[0]?.data().req_id, phoneNumber: value[0]?.id }).then(function (result) {
    //close the form
  });
}

//-----//

O SDK do Firebase oferece uma functions exportação que permite usar httpsCallable() e nomear a função. Em vez de precisar escrever solicitações HTTP e aguardar suas respostas, isso simplifica o processo.

Conclusão

A Verify API é fácil de usar e, com o Firebase e o React, você pode escrever rapidamente o código necessário para validar seus usuários e seus números de telefone. Fique à vontade para experimentá-la. Você pode se inscrever para uma conta da Vonage e, se precisar de alguns créditos para começar, envie-nos um e-mail para community@vonage.com.

Você pode encontrar meu código de exemplo do aplicativo aqui. O aplicativo que criei é mais para uso pessoal, mas fique à vontade para dar uma olhada e usar o que achar útil. Ao longo do próximo mês, mais ou menos, vou adicionar algumas funcionalidades ao aplicativo também — a primeira delas é abrir e fechar a porta da minha garagem.