Hinzufügen von 2FA zu einer React-App mit Firebase-Funktion

Wenn es Ihnen wie mir geht, haben Sie wahrscheinlich ein paar "intelligente" Geräte zu Hause. Es gibt mehrere Möglichkeiten, diese Geräte zu steuern, aber ich wollte sie mit Textnachrichten und eventuell auch mit der Stimme steuern können.

Also machte ich mich daran, ein paar Tools in Firebase zu entwickeln, um loslegen zu können. Der erste Schritt, den ich machen wollte, war jedoch die Sicherung der Telefonnummern, die Zugang haben, und ich dachte, es wäre der perfekte Zeitpunkt, die Verify-API auszuprobieren. Es ist zugegebenermaßen ein bisschen übertrieben, da es sich nicht um eine verteilte App handelt, aber zur Sicherheit muss eine Telefonnummer den Verifizierungsprozess durchlaufen, um auf meine Geräte zugreifen zu können.

Vonage API-Konto

Um dieses Tutorial durchzuführen, benötigen Sie ein Vonage API-Konto. Wenn Sie noch keines haben, können Sie sich noch heute anmelden und mit einem kostenlosen Guthaben beginnen. Sobald Sie ein Konto haben, finden Sie Ihren API-Schlüssel und Ihr API-Geheimnis oben auf dem Vonage-API-Dashboard.

In diesem Lernprogramm wird auch eine virtuelle Telefonnummer verwendet. Um eine zu erwerben, gehen Sie zu Rufnummern > Rufnummern kaufen und suchen Sie nach einer Nummer, die Ihren Anforderungen entspricht.

Sind Sie bereit, mit dem Bau zu beginnen?

Erleben Sie nahtlose Konnektivität, Echtzeit-Messaging und kristallklare Sprach- und Videoanrufe - alles auf Knopfdruck.

API überprüfen

Die Verify-API ist eine Möglichkeit zu bestätigen, dass das Telefon dem Nutzer gehört. Die Verifizierung dient dem Schutz vor Spam und verdächtigen Aktivitäten sowie der Überprüfung des Eigentums.

Die API selbst hat eine ganze Menge zu bieten. Ihre Konfigurationsoptionen können Sie den genauen Arbeitsablauf der für Ihr System geeignet ist. Der Standard-Workflow sendet beispielsweise eine SMS mit einem PIN-Code, wartet 125 Sekunden, ruft dann mit einem Text-to-Speech-Ereignis an, wartet 3 weitere Minuten, ruft dann erneut an und wartet 5 Minuten, bevor die Anfrage ganz abläuft.

Ich finde es gut, dass ich die Kontrolle über so etwas habe, denn so kann ich sehr genau festlegen, wie ich mit meinen Nutzern interagieren kann. In meinem speziellen Fall habe ich es sehr einfach gehalten und nur eine SMS-Nachricht verschickt, die nach zwei Minuten ablief, da ich dies hauptsächlich für meine eigenen Zwecke nutzen wollte.

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

Wenn Sie mit der Verify API beginnen möchten, können Sie sich für eine Vonage Konto anmelden und sofort loslegen.

Firebase-Funktionen

Da ich mich für die Verwendung von Firebase und Firestoreentschieden habe, wird die Einrichtung einiger Cloud-Funktionen zur Interaktion mit den Daten und der Verify-API war mein nächster Schritt. Jedes Mal, wenn eine neue Telefonnummer erstellt wurde, wollte ich ihr einen Verifizierungscode senden und dann eine Funktion zur Überprüfung des Codes haben.

Versprechen, Versprechen

Wenn Sie Cloud-Funktionen zum ersten Mal lernen, können Sie einige einfache Operationen und Vertrauen aufbauen, was ich auch getan habe. Nachdem ich zunächst einige der einfachen Funktionen ausprobiert hatte, dachte ich mir, dass ich diese relativ schnell aufbauen könnte.

Und ich lag falsch. Ein Detail, das ich völlig übersehen habe, ist, dass Callback-Methoden in der Cloud Function-Umgebung nicht so ausgewertet werden wie in anderen Umgebungen. Sobald es einen Rückgabewert oder ein Versprechen gibt, hält die CPU an. Da das Nexmo JavaScript SDK auf Callback-Methoden läuft, stoppt es die Verarbeitung.

Dies nicht zu wissen, war eines der frustrierendsten Probleme, die ich seit langem hatte. Das Timing von allem war seltsam, weil der Rückruf lief, wenn ich es erneut versuchte, so dass ich dachte, ich hätte nicht lange genug gewartet oder die Latenz war schrecklich.

Nachdem ich das geklärt hatte, wurde mir klar, dass ich Promise-Wrapper erstellen für die SDK-Methoden erstellen musste, und alles funktionierte perfekt. Wenn Sie einige nützliche Tipps und Tricks suchen, empfehle ich Ihnen die Lektüre diesen Firebase Dokumentationsleitfaden.

Abfrage des Verifizierungscodes

Die Verify-Anforderungsmethode in der Nexmo JavaScript SDK besteht aus ziemlich minimalem Code, da das dortige Framework es einfach macht, fast alles zu tun. Das erste, was ich tun musste, war, sie in ein Versprechen zu verpacken.

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

Durch die Erstellung dieses Wrappers kann die Callback-Methode ausgeführt und als Promise-Auflösung zurückgegeben werden, anstatt ignoriert zu werden.

Mit dieser Methode konnte ich nun eine Firebase-Funktion erstellen, die ausgeführt wird, wenn die App eine neue Nummer zu Firestore hinzufügt.

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

Mit der Verify-API müssen wir den Überblick über die request_id für den Prüfprozess verwenden. Ich verwende dies, um anzuzeigen, dass der Überprüfungsprozess begonnen, aber noch nicht abgeschlossen wurde.

Prüfen des Verify Codes

Wie im vorherigen Beispiel muss die SDK-Methode zunächst als Promise verpackt werden.

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

Sobald der Benutzer sie erhält, fragt die React-Anwendung nach dem Code und ruft dann die Funktion direkt aus der Anwendung heraus auf, indem sie die request_idund die 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));
});

Solange der Code in Ordnung ist, wird das Dokument aktualisiert und enthält eine verified Flagge, und der Prozess ist beendet. Es gibt Fehlerstatusrückmeldungen, die zu prüfen sind und auf die entsprechend reagiert werden muss - zum Beispiel, wenn der Code eine Zeitüberschreitung aufweist. Meine Anwendung geht derzeit davon aus, dass er erfolgreich ist.

React-App

Ich werde nicht zu viel Zeit darauf verwenden, den gesamten Code zu erklären, den ich für meine App geschrieben habe, aber die wichtigsten Punkte sind das Hinzufügen der Daten und der anschließende Aufruf der Firebase-Funktion vom Frontend aus.

In meiner Anwendung habe ich ein Formular zum Hinzufügen einer neuen Nummer, das nur aus dem Telefonnummernfeld besteht. Beim Absenden wird die Nummer lediglich zur Datenbank hinzugefügt. Ich habe auch eine Firebase-Kontextdatei eingerichtet, die die Verbindungen zwischen meiner App und Firebase herstellt, sodass ich alles, was ich brauche, einfach importieren kann.

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

//-----//

Die Überprüfung ist nahezu identisch mit einer ähnlichen Übermittlungsmethode.

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

//-----//

Das Firebase SDK bietet einen functions Export zur Verfügung, mit dem Sie httpsCallable() und die Funktion zu benennen. Anstatt HTTP-Anfragen zu schreiben und auf diese zu warten, vereinfacht dies den Prozess.

Einpacken

Die Verify-API ist einfach zu verwenden, und mit Firebase und React können Sie schnell den erforderlichen Code schreiben, um Ihre Benutzer und deren Telefonnummern zu überprüfen. Probieren Sie es einfach aus. Sie können sich für eine Vonage Konto anmelden, und wenn Sie für den Anfang ein paar Credits benötigen, schicken Sie uns eine E-Mail an community@vonage.com.

Sie können meinen [https://github.com/kellyjandrews/smart-home-app](Beispielanwendungscode hier) finden. Die App, die ich gebaut habe, ist eher eine persönliche App für mich, aber schauen Sie sich ruhig um und verwenden Sie alles, was Sie vielleicht nützlich finden. Im Laufe des nächsten Monats oder so, werde ich einige zusätzliche Funktionen zu der App als gut-erste ist das Öffnen und Schließen meiner Garage Tür.