Añadir 2FA a una aplicación React usando Firebase Function

Si eres como yo, probablemente tengas unos cuantos dispositivos "inteligentes" en casa. Hay muchas formas de interactuar y controlar estos dispositivos, pero yo quería poder controlarlos con mensajes de texto y, eventualmente, también con la voz.

Así que me dispuse a construir algunas herramientas en Firebase para ponerme en marcha. El primer paso que quería dar, sin embargo, era asegurar los números de teléfono que tienen acceso, y pensé que sería el momento perfecto para probar Verify API. Es cierto que es un poco exagerado, ya que esto no es una aplicación distribuida, pero por seguridad, un número de teléfono debe pasar por el proceso de verificación para acceder a mis dispositivos.

Verify API

En Verify API es una forma de confirmar que el teléfono pertenece al usuario. Realizar la verificación ayuda a protegerse contra el spam y las actividades sospechosas, además de validar la propiedad.

La API contiene muchas cosas. Sus opciones de configuración le permiten crear el flujo de trabajo exacto que funcione en tu sistema. Por ejemplo, el flujo de trabajo predeterminado envía un SMS con un código PIN, espera 125 segundos, luego llama con un evento de texto a voz, espera 3 minutos adicionales, luego vuelve a llamar y espera 5 minutos antes de caducar la solicitud por completo.

Me gusta tener este nivel de control sobre algo así, ya que me permite ser muy específico sobre cómo puedo interactuar con mis usuarios. En mi caso particular, lo hice muy sencillo y sólo envié un mensaje SMS que caducaba en dos minutos, ya que lo quería principalmente para mis propios fines.

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

Si quieres empezar a utilizar Verify API, puedes registrarte en Vonage hoy para comenzar.

Funciones Firebase

Desde que decidí utilizar Firebase y Firestoreconfigurar algunas Funciones Cloud para interactuar con los datos y la Verify API fue mi siguiente paso. Cada vez que se creaba un nuevo número de teléfono, quería enviarle un código de verificación y luego tener una función para comprobar el código.

Promesas, promesas

Cuando aprenda por primera vez las Funciones Cloud, puede que intente algunas operaciones sencillas y construir su confianza, que es lo que hice. Después de pasar por algunas de las funciones simples primero, me imaginé que sería capaz de construir esto con bastante rapidez.

Y estaba equivocado. Un detalle que pasé completamente por alto es que los métodos callback no se evalúan en el entorno de Cloud Function de la misma forma que en otros entornos. Una vez que hay un valor devuelto o promesa, la CPU se detiene. Dado que el Nexmo JavaScript SDK se está ejecutando en los métodos de devolución de llamada, se detiene el procesamiento.

No saber esto tuvo que ser uno de los problemas más frustrantes con los que me he encontrado en mucho tiempo. La sincronización de todo era extraña porque la devolución de llamada se ejecutaba cuando volvía a intentarlo, lo que me hacía pensar que no había esperado lo suficiente o que la latencia era terrible.

Una vez solucionado esto, me di cuenta de que necesitaba crear envoltorios Promise para los métodos del SDK, y todo funcionó perfectamente. Si quieres algunos consejos y trucos útiles, te recomiendo leer esta guía de documentación de Firebase.

Solicitar el código Verify

El método de solicitud Verify del Nexmo JavaScript SDK es un código bastante mínimo, ya que el framework hace que sea sencillo hacer casi todo. Lo primero que tuve que hacer fue envolverlo en una promesa.

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

La creación de esta envoltura permite que el método callback se ejecute y retorne como una resolución Promise, en lugar de ser ignorado.

Con este método, ahora podía crear una función Firebase que se ejecutara cuando la aplicación añadiera un nuevo número a 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));
  });

Con la Verify API, tenemos que llevar un registro de los archivos request_id para utilizarlo en el proceso de verificación. Lo utilizo para indicar que el proceso de verificación se inició pero aún no se ha completado.

Comprobación del código Verify

Al igual que en el ejemplo anterior, el método SDK necesita ser envuelto primero como una Promise.

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

Una vez que el usuario lo recibe, la aplicación React le pide el código y luego llama a la función directamente desde la aplicación, pasando los valores request_idy el código 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));
});

Si el código es correcto, el documento se actualiza para incluir una bandera verified y el proceso finaliza. Hay respuestas de estado de error para comprobar y responder en consecuencia, por ejemplo, si el código ha expirado. Mi aplicación actualmente asume que pasa.

Aplicación React

No voy a pasar mucho tiempo explicando todo el código que escribí para mi aplicación, pero los aspectos más destacados son la adición de los datos, y luego llamar a la función Firebase desde el frontend.

En mi aplicación, tengo un formulario para añadir un nuevo número, que consiste sólo en el campo de número de teléfono. Al enviarlo, simplemente se añade a la base de datos. También he creado un archivo de contexto Firebase que establece las conexiones entre mi aplicación y Firebase, por lo que puedo importar fácilmente todo lo que necesito.

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);
}

//-----//

La verificación es casi el mismo formulario con un método de envío similar.

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
  });
}

//-----//

El SDK de Firebase proporciona una función functions para que puedas usar httpsCallable() y nombrar la función. En lugar de tener que escribir cualquier solicitud HTTP y esperar en ellos, esto simplifica el proceso.

Resumen

Verify API es fácil de usar, y con Firebase y React puedes escribir rápidamente el código necesario para validar a tus usuarios y sus números de teléfono. No dudes en probarla. Puedes registrarte en Vonage y si necesitas créditos para comenzar, envíanos un correo electrónico a community@vonage.com.

Puede encontrar mi código de aplicación de ejemplo aquí. La aplicación que he construido es más de una aplicación personal para mí, pero no dude en echar un vistazo y utilizar cualquier cosa que pueda encontrar útil. Durante el próximo mes más o menos, voy a añadir algunas funciones adicionales a la aplicación, así - en primer lugar es la apertura y cierre de la puerta de mi garaje.