){kind=small}
Vonage APIとFirebaseで多要素認証を改善する
所要時間：2 分
この記事の最終更新日：2026年3月4日
このブログポストでは、VonageのIdentity Insights APIを使用して多要素認証を改善する方法を紹介します。 アイデンティティインサイトAPI、SIMスワップインサイトおよび Verify API.また、Firebase Services を使用して関数を保存します。 クラウドファンクションのデータを クラウド・ファイアーストアデータベース、そして Firebase ホスティング.
アプリケーションのソースコードは、私たちの GitHub リポジトリ.
注：このブログポストでは、Firebase Services を既存の Verify APIとSIM Swap Insightで多要素認証を改善する.このチュートリアルでは、Express を使用したサーバーの作成と、クラウドへのデプロイの両方について説明します。この前のブログ記事と GitHub リポジトリを参照してください。
Vonage開発者アカウント
Node.jsとnpmがマシンにインストールされている
Firebase プロジェクトは Firebase コンソール(私はaccount-recovery-demoと名付けました)
ファイアベースCLIインストール済み
コード/テキストエディタ
To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.
この Account Recovery チュートリアルでは、ユーザーが Web フロントエンド ページにアクセスしてログイン、パスワードのリセット、本人確認を行う方法を説明します。このページは Firebase Functions バックエンドと連動し、Firebase Cloud Firestore にユーザー認証情報を保存、取得します。
ユーザーがパスワードをリセットしようとすると、Vonage Verify API によって生成された確認用ワンタイム・コードが送信されます。ただし、この確認は、Vonage Identity Insights API SIM Swap insight を使用して SIM Swap の詳細が通信サービスプロバイダに確認された場合にのみ行われる。
Overview Diagramこのアプリケーションは、クライアント・サーバー・アーキテクチャーに従っている。クライアントは、電話番号の入力や認証コードの送信など、HTMLとJavaScriptを通じてユーザーとのやり取りを処理します。Firebase Hosting がウェブアプリケーションを提供し、Firebase Functions がサーバーサイドのロジックを処理し、Firestore がユーザーデータと検証ステータスを保存します。
以前は Expressアプリは、サーバー環境内でルートとAPIコールを直接管理していた。.Firebase Cloud Functions を使用すると、Express アプリで定義済みの各エンドポイントは Firebase.jsonファイルでルールを書き換えることで、特定のクラウド関数にマッピングされます。このセットアップにより、ルーティングメカニズムがアプリケーションロジックから切り離され、各ファンクションが独立して拡張・管理できるようになります。Firebase は自動的にリクエストを処理し、以下のような書き換えルールに基づいて適切なクラウドファンクションに誘導する。 送信コードを sendCodeまたは /ログインを ログイン.ウェブクライアントはサーバーとは異なるドメインに存在するため、CORS（Cross-Origin Resource Sharing）も使用しています。
このプロジェクトは、お気に入りのコーディング・エディターを使って作業することができる。私の場合は、Visual Studio Codeと Firebase Studioは Firebase プロジェクトをサポートしているので、簡単に開発できます。好きなエディタを使ってください！
まずは GitHub リポジトリ.
必要な依存関係をインストールします：
npm install.
以下はプロジェクトをセットアップする手順です。 Firebase プロジェクトは、Firebase コンソールまたはコマンドラインから作成できます。.使用するFirebaseサービスは、関数、ホスティング、Firestoreです。
コンソールで、新しいプロジェクトを作成するをクリックし、名前を付けて、続けるをクリックする。
アナリティクスを使用するかどうかを選択します。
プロジェクトが作成されるのを待つ。
ギア ⚙->利用状況と課金->詳細と設定をBlazeに設定します（従量課金プランはサードパーティAPIを使用する必要があります）。
Google Cloudリソースの場所を ⚙-> プロジェクトの設定.
では デプロイ目標を設定しよう.プロジェクトフォルダーに .firebasercファイルを作成し、'PROJECT_ID'をプロジェクトIDで更新する。フォルダ内に .firebaserc.exampleファイルがあります。
// .firebaserc
{
"projects": {
"default": "PROJECT_ID"
}
}
プロジェクトに環境変数を追加する時が来た。
以下から /ファイルからファイルから /functions/.envファイルを作成し、以下の環境変数をインクルードする：
# .env
VONAGE_API_KEY=your_api_key VONAGE_API_SECRET=your_api_secret VONAGE_APPLICATION_ID=your_application_id VONAGE_APPLICATION_PRIVATE_KEY=/path/to/your/private.key
PERIOD=72
メモ シークレットマネージャーは環境変数をインポートする安全な方法です。このチュートリアルでは Firebase 用 Cloud Functions は dotenv をサポートしています。.
ローカルでテストする場合は Firebase ローカルエミュレータスイート.
エミュレータを初期化する
firebase init emulators.エミュレータを起動する
firebase emulators:start.コマンドラインにローカルのWebアプリケーションとFirestoreインスタンスを開くためのURLが記載されています。両方のページを開き、Firestoreインスタンスに入力します。これはローカルのFirestoreインスタンスであることを忘れないでください。そのため、クラウドコンソールの実際のプロジェクトで確認できるものとは異なります。
注：このプロジェクトでは、エミュレーターのポート5001とFirestoreのポート8080を見つけるために、それらを
firebase.jsonポート5001でエミュレーターを、ポート8080でFirestoreを見つけられるように。
静的ファイル（HTML、CSS、JavaScript）をFirebaseホスティングにデプロイします。Firebase CLI がプロジェクトにインストールされ、初期化されていることを確認してください。以下のコマンドを実行してデプロイします：
firebase deploy --only hosting
コマンドラインでHTMLページが生成されるのがわかるだろう。私の例では、プロジェクトIDは' account-recovery-demo'で、生成されたURLは'https://account-recovery-demo.web.app'.あなたのも開いてみてください！
Firebase Functions を使用してサーバーサイドロジックをデプロイします。プロジェクトに Firebase CLI がインストールされ、初期化されていることを確認します。以下のコマンドを実行してデプロイします：
firebase deploy --only functions
Firebaseのコンソールで プロジェクトのプロジェクトの'functions'タブを開くと、4つの関数を見つけることができます： sendCode, login, verifyそして simSwap.バージョン管理やログのチェックが必要な場合は、作成された各関数に対して行うことができます。
Firestore を使用して、ユーザーデータと検証ステータスを保存します。credentials」コレクションを作成し、Firestoreフィールドにcredentialsノードを入力します。
パスワード、電話番号、request_id、ユーザ名という文字列型フィールドを含む各イベントノードを作成します。この例では、これらの機密フィールドを Firestore に保存しています。実際のアプリケーションでは、これらは例えば シークレットマネージャー.
Cloud Firestore Database Instance
Firebaseホスティングを使ってデプロイしたウェブアプリケーションにアクセスする時が来た。
パスワードを忘れたとします。パスワードを忘れた場合」をクリックして、パスワードの復旧を開始します。電話番号を入力し、認証を要求するプロンプトが表示されます。
アプリケーションが最近のSIM交換を検出すると、警告がポップアップ表示されます： 警告！警告！ユーザーのモバイルアカウントに関連するSIMペアリングの変更が最近発生しました。続行しますか？スワップを行ったのがあなたではなく、「いいえ、私ではありません」を選択した場合、あなたの番号で詐欺が行われている可能性があります。これは、携帯電話会社に確認する合図です。
注：チュートリアルのデモでは、SIMカードを入れ替えたことを確認するよう求め られているが、実際のシナリオでは、ユーザーはサービス・プロバイダーに直接 連絡して、追加のIDチェックを受けることになるだろう。同様に、このアプローチはログイン時の多要素認証にも適用でき、ワンタイムトークンを送信する前にチェックが行われる。最近の SIM 交換が検出された場合、ユーザーはサービス・プロバイダに直接連絡して、追加の ID チェックを受けることができる。
一方、SIMを入れ替えて、『はい、私です。 はい、私ですを選択した場合、アプリはVerify APIを使ってあなたの携帯電話に認証コードを送信します。次の画面でこのコードを入力し、新しいパスワードを設定する。それが完了したら、新しい認証情報を使ってシミュレーションした銀行口座にログインできる。
このチュートリアルはここまでです。本日は、Web アプリケーションに Firebase Services を追加することで、多要素アプリケーションを改善する方法について説明しました。
ご質問がある場合、またはあなたが作っているものを共有したい場合は、こちらをクリックしてください。
会話に参加する VonageコミュニティSlack
登録する 開発者ニュースレター
フォローする X（旧ツイッター）最新情報
チュートリアルを見る YouTubeチャンネル
LinkedInの LinkedIn の Vonage デベロッパーページ
最新の開発者向けニュース、ヒント、イベント情報をお届けします。