Ajouter 2FA à une application React en utilisant Firebase Function

Si vous êtes comme moi, vous avez probablement quelques appareils "intelligents" chez vous. Il existe de multiples façons d'interagir et de contrôler ces appareils, mais je voulais pouvoir les contrôler avec des messages texte et éventuellement aussi avec la Voice.

J'ai donc entrepris de construire quelques outils dans Firebase pour me lancer. La première étape que je voulais franchir, cependant, était de sécuriser les numéros de téléphone qui y ont accès, et j'ai pensé que c'était le moment idéal pour essayer l'API Verify. C'est certes un peu exagéré puisqu'il ne s'agit pas d'une application distribuée, mais pour des raisons de sécurité, un numéro de téléphone doit passer par le processus de vérification pour accéder à mes appareils.

Verify API

L'API Verify API permet de confirmer que le téléphone appartient à l'utilisateur. La vérification permet de se protéger contre le spam et les activités suspectes, ainsi que de valider la propriété.

L'API elle-même contient beaucoup de choses. Ses options de configuration vous permettent de construire le flux de travail exact qui convient à votre système. Par exemple, le flux de travail par défaut envoie un SMS avec un code PIN, attend 125 secondes, puis appelle avec un événement de synthèse vocale, attend 3 minutes supplémentaires, puis appelle à nouveau et attend 5 minutes avant d'expirer complètement la demande.

J'aime avoir un tel niveau de contrôle sur ce genre de choses, car cela me permet d'être très spécifique sur la façon dont je peux interagir avec mes utilisateurs. Dans mon cas particulier, je suis resté très simple et je n'ai envoyé qu'un seul SMS qui a expiré dans les deux minutes, car je voulais surtout le faire pour mes propres besoins.

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

Si vous souhaitez commencer à utiliser l'API Verify, vous pouvez vous inscrire à une session de formation à l'API Verify. Vonage dès aujourd'hui.

Fonctions Firebase

Depuis que j'ai décidé d'utiliser Firebase et Firestorej'ai décidé de mettre en place des Fonctions Cloud pour interagir avec les données et l'API Verify. Chaque fois qu'un nouveau numéro de téléphone était créé, je voulais lui envoyer un code de vérification, puis disposer d'une fonction pour vérifier le code.

Promesses, promesses

Lorsque vous apprenez les fonctions cloud pour la première fois, il se peut que vous essayiez quelques opérations simples. opérations simples et prendre confiance, ce que j'ai fait. Après avoir commencé par quelques fonctions simples, je me suis dit que je pourrais développer cette fonction assez rapidement.

Et je me suis trompé. Un détail que j'ai complètement négligé est que les méthodes de rappel ne sont pas évaluées dans l'environnement Cloud Function comme elles le sont dans d'autres environnements. Une fois qu'il y a une valeur retournée ou une promesse, l'unité centrale s'arrête. Étant donné que le SDK JavaScript Nexmo fonctionne sur des méthodes de rappel, il arrête le traitement.

Ne pas le savoir a été l'un des problèmes les plus frustrants que j'ai rencontrés depuis longtemps. Le timing était bizarre, car le rappel s'exécutait lorsque je réessayais, ce qui me faisait penser que je n'attendais pas assez longtemps ou que la latence était terrible.

Une fois ce problème résolu, j'ai réalisé que j'avais besoin de créer des enveloppes de promesses pour les méthodes du SDK, et tout a fonctionné parfaitement. Si vous voulez quelques conseils et astuces utiles, je vous recommande de lire ce guide de documentation Firebase.

Demande du code Verify

La méthode de requête Verify dans le Nexmo JavaScript SDK est un code assez minimal, car le cadre qui l'accompagne permet de faire presque tout. La première chose que je devais faire était de l'envelopper dans une promesse.

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

La création de ce wrapper permet à la méthode de rappel de s'exécuter et de renvoyer une résolution Promise, au lieu d'être ignorée.

Avec cette méthode, je pouvais maintenant créer une fonction Firebase à exécuter lorsque l'app ajoutait un nouveau numéro à 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));
  });

Avec l'API Verify, nous devons garder une trace de l'identité des request_id à utiliser dans le processus de vérification. Je l'utilise pour indiquer que le processus de vérification a commencé mais n'est pas encore terminé.

Vérification du code Verify

Comme dans l'exemple précédent, la méthode SDK doit d'abord être enveloppée dans une promesse.

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

Une fois que l'utilisateur l'a reçu, l'application React demande le code, puis appelle la fonction directement depuis l'application, en passant l'élément request_idet le code 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));
});

Tant que le code est vérifié, le document est mis à jour pour inclure un drapeau verified et le processus est terminé. Il existe des réponses d'état d'erreur qu'il faut vérifier et auxquelles il faut répondre en conséquence - par exemple, si le code a dépassé le temps imparti. Pour l'instant, mon application part du principe que le code est validé.

Application React

Je ne vais pas passer trop de temps à expliquer tout le code que j'ai écrit pour mon application, mais les points forts sont l'ajout des données, puis l'appel de la fonction Firebase depuis le frontend.

Dans mon application, j'ai un formulaire pour ajouter un nouveau numéro, composé uniquement du champ numéro de téléphone. Lors de la soumission, le numéro est simplement ajouté à la base de données. J'ai également mis en place un fichier de contexte Firebase qui établit les connexions entre mon application et Firebase, de sorte que je puisse facilement importer tout ce dont j'ai besoin.

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 vérification se fait presque de la même manière, avec une méthode de soumission similaire.

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

//-----//

Le SDK Firebase fournit une fonction functions pour vous permettre d'utiliser httpsCallable() et de nommer la fonction. Au lieu de devoir écrire des requêtes HTTP et d'attendre qu'elles soient traitées, cela simplifie le processus.

Synthèse

L'API Verify est simple à utiliser, et avec Firebase et React, vous pouvez rapidement écrire le code nécessaire pour valider vos utilisateurs et leurs numéros de téléphone. N'hésitez pas à l'essayer. Vous pouvez vous inscrire à un service de Vonage et si vous avez besoin de crédits pour démarrer, envoyez-nous un courriel à community@vonage.com.

Vous pouvez trouver mon exemple de code d'application ici. L'application que j'ai créée est plus une application personnelle pour moi, mais n'hésitez pas à y jeter un coup d'œil et à utiliser tout ce qui pourrait vous être utile. Au cours du prochain mois, j'ajouterai quelques fonctionnalités supplémentaires à l'application, la première étant l'ouverture et la fermeture de la porte de mon garage.