Firebase関数を使ってReactアプリに2FAを追加する

私のように、家の周りにいくつかの "スマート "デバイスを持っている人は多いだろう。これらのデバイスを操作する方法は複数あるが、私はテキストメッセージや最終的にはVoiceでも操作できるようにしたかった。

そこで私は、Firebaseでいくつかのツールを構築することにした。そしてVerify APIを試す絶好の機会だと思った。これは分散型アプリではないので、少し大げさなのは認めるが、安全のために、電話番号は私のデバイスにアクセスするために検証プロセスを通過しなければならない。

Verify API

について Verify APIは、電話がユーザーのものであることを確認する方法です。検証を行うことで、所有権を確認するだけでなく、スパムや不審な行為から保護することができます。

API自体にはかなり多くのことが詰め込まれている。その 設定オプションによって 正確なワークフローを構築できる。例として、デフォルトのワークフローでは、PINコード付きのSMSを送信し、125秒待機した後、Text-to-Speechイベントでコールし、さらに3分待機した後、再度コールし、リクエストを完全に終了する前に5分待機します。

私は、このようなものをこのレベルでコントロールできるのが好きです。私の特定の例では、私は非常にシンプルに保ち、2分で期限切れになるSMSメッセージを1つだけ行いました。

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

Verify API を使い始めたい場合は、以下の方法でサインアップできます。 Vonageアカウントにサインアップしてください。

Firebaseの機能

を使うことに決めたので ファイヤーベースと Firestoreを使うことにしたので、いくつかの クラウド関数をセットアップすることが次のステップだった。新しい電話番号が作成されるたびに、検証コードを送信し、そのコードをチェックする関数を作りたかった。

約束、約束

クラウド・ファンクションを初めて学ぶとき、次のような簡単な操作を試すかもしれません。 簡単な操作を試して自信をつけるかもしれません。最初に簡単な関数をいくつか試した後、私はこれをかなり早く構築できると考えました。

そして私は間違っていた。私が完全に見落としていたのは、コールバックメソッドはCloud Function環境では他の環境と同じように評価されないということだ。返された値または約束があると、CPUは停止します。Nexmo JavaScript SDKはコールバックメソッドで実行されているので、処理を停止します。

このことを知らなかったことは、私が長い間遭遇してきた問題の中でも、よりイライラさせられるものだった。再試行するとコールバックが実行されるため、待ち時間が足りなかったか、遅延がひどかったのかと思うほど、すべてのタイミングが奇妙だった。

それを解決した後、私は次のことが必要だと気づいた。 プロミス・ラッパーを作成する必要があることに気づいた。便利なTipsやトリックを知りたい方は Firebaseのドキュメントガイドを読むことをお勧めします。

Verifyコードのリクエスト

の Verify リクエストメソッドです。 Nexmo JavaScript SDKのVerifyリクエスト・メソッドは、そのフレームワークがほとんどのことをシンプルにやってくれるので、非常に最小限のコードで済む。最初にしなければならなかったのは、これをプロミスでラップすることだった。

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

このラッパーを作成することで、コールバックメソッドが無視されることなく実行され、Promise解決として返されるようになります。

この方法で、アプリがFirestoreに新しい番号を追加したときに実行するFirebase関数を作成することができた。

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

Verify APIでは、チェック・プロセスで使用するための request_idを記録しておく必要がある。これは、検証プロセスが開始されたが、まだ完了していないことを示すために使用する。

Verifyコードのチェック

前の例と同じように、SDKメソッドはまずPromiseとしてラップする必要があります。

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

ユーザーがそれを受け取ると、Reactアプリケーションはコードを要求し、アプリケーションから関数を直接呼び出します。 request_idと 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));
});

コードがチェックアウトされさえすれば、ドキュメントは更新され verifiedフラグを含むように更新され、処理は終了する。例えば、コードがタイムアウトした場合などだ。例えば、コードがタイムアウトした場合などだ。

リアクトアプリ

私のアプリのために書いたすべてのコードの説明にはあまり時間をかけられないが、ハイライトはデータを追加することと、フロントエンドからFirebaseの関数を呼び出すことだ。

私のアプリでは、電話番号フィールドだけで構成された新しい番号を追加するフォームがあります。送信すると、単にデータベースに追加されます。アプリとFirebaseの接続を設定するFirebaseコンテキストファイルもセットアップしたので、必要なものはすべて簡単にインポートできる。

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

//-----//

検証はほぼ同じ形式で、同じような提出方法である。

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

//-----//

Firebase SDK は functionsを使用できるように httpsCallable()を使用し、関数名を指定します。HTTP リクエストを書いたり、そのリクエストを待ったりする必要がなく、処理が簡単になります。

まとめ

Verify APIは使い方が簡単で、FirebaseとReactを使えば、ユーザーとその電話番号を検証するのに必要なコードをすぐに書くことができます。お気軽にお試しください。あなたは Vonageアカウントにサインアップすることができます。 community@vonage.com.

私の アプリケーションのサンプルコードは.私が作ったアプリは、どちらかというと私の個人的なアプリですが、ご自由にご覧ください。来月あたりには、アプリにいくつかの機能を追加する予定だ。