電話番号ベースの認証フローの作り方（前編）

最新のチュートリアルをご参照ください： https://developer.vonage.com/en/tutorials/silent-authentication/introduction/node

この2回シリーズでは、ユーザーが電話番号を使って認証できるモバイル・アプリケーションとバックエンド・サービスを構築します。これを実現するために、Vonageの以下のAPIとツールを使用します：

• 番号検証API: 認証しようとする電話が、意図したユーザーのものであることを検証する。

• ネットワーク・イネーブルメントAPI:認証プロセスを容易にし、最適化する。

• VonageクライアントSDK:アプリケーションが認証にWiFi接続ではなくモバイルデータを使用するようにするため。

シリーズの第1部ではバックエンドの実装に焦点を当て、第2部ではモバイル・アプリケーションの開発を取り上げる。

注：番号確認APIは現在ベータ版であり、一部の機能は変更される可能性があります。

ユースケース

プラットフォームやサービスのセキュリティを向上させ、ユーザーを保護し、不正行為を防止したいとお考えだとします。データ漏洩やフィッシング攻撃がますます一般的になっている今日のデジタル環境では、標準的なユーザー名とパスワードの組み合わせではもはや十分ではありません。

この問題に対処するため 二要素認証（2FA）プロセスを導入することにしました。従来のSMSベースの2FAに頼る代わりに、SIMスワッピングやその他の攻撃に対して脆弱な SIMスワッピングやその他の攻撃ユーザーの電話番号に基づく認証です。

それでは ネットワーク検証APIがどのように実装に役立つかを見てみよう！

ソースコード

このチュートリアルの完全なソースコードは、この GitHub リポジトリ.

前提条件

Vonage API Account

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.

Ready to start building?

Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

また アプリケーションをVonage Dashboardにセットアップする必要があります。でネットワークレジストリ機能を有効にする必要があります。

チュートリアルでは サンドボックスを利用します。つまり、Network APIがまだ利用できない国でも、コストをかけずにアプリケーションを構築し、テストすることができます。サンドボックスを有効にするには、ダッシュボードでアプリケーションを作成する際にサンドボックスオプションを有効にします：

Sandbox configuration under the Network Registry capability

建築

アプリケーションが使用する：

• Node.jsとExpressバックエンドの実装。

• アンドロイド・モバイル・アプリケーション。

Number Verification API call flow

バックエンドの実装

バックエンドはモバイル・アプリケーションからのリクエストを処理し、対応するAPIコールを実装する。

バックエンドは2つのエンドポイントを公開する：

• ログイン- モバイル・アプリケーションはこのエンドポイントをPOSTリクエストで呼び出し、ユーザー認証プロセスを開始します。このメソッドでは、認証フローをブートストラップするために Network Enablement API を呼び出します。

• コールバック認証サーバは、このエンドポイントをコールバックとして起動します。これにより認証フローが完了し、 Number Verification API をコールしてユーザのバリデーションを行います。

ログイン

このメソッドは、認証フローを初期化するために ネットワーク有効化API.この API は、既存の認証フロー、特にクライアント認証を必要とする 番号検証 APIのようなクライアント認証を必要とするものは特にそうです。

ログインメソッドは POSTリクエストを処理します。リクエスト・ボディは次のような構造になっていなければなりません：

{
   "phone": "+9901234567"
}

APIコール用ヘルパー関数

さまざまなAPIとのやりとりを効率化するために、再利用可能なヘルパー関数を定義しよう、 makeFetchRequestを定義します：

const makeFetchRequest = async (url, options) => {
  const response = await fetch(url, options);
  if (!response.ok) {
    const error = await response.text();
    throw new Error(`HTTP Error: ${response.status} - ${error}`);
  }
  return response.json();
};

ネットワーク・イネーブルメントAPIコール

を呼び出すには ネットワーク・イネーブルメントAPIを呼び出すために、バックエンドは を準備する。リクエストを準備する：

const data = {
    phone_number: phone,
    scopes: [
       "dpv:FraudPreventionAndDetection#number-verification-verify-read"
    ],
    state: generateRandomString(20),
  };

どこでだ：

• 電話番号は、モバイルアプリから提供された電話番号に対応します。

• スコープにはスコープのリストが含まれる。この例では、 Number Verification API のスコープがリストに含まれています。

• stateは20桁のランダムな文字列である。

リクエストには2つのヘッダーが含まれていなければならない：認証のためのJWTと、適切なコンテントタイプです。

  const headers = {
    Authorization: `Bearer ${jwt}`,
    "Content-Type": "application/json",
  };

使用する makeFetchRequestを使うと、バックエンドはPOSTリクエストを ネットワーク有効化API.API の JSON レスポンスには auth_urlフィールドが含まれ、認証フローを進めるためにモバイルアプリケーションに返されます：

    // Network Enablement API call
    const response = await makeFetchRequest(ne_uri, {
      method: "POST",
      headers: headers,
      body: JSON.stringify(data),
    });
    auth_url = { url: response.scopes[fraud_scope].auth_url }
    res.json(auth_url);

モバイルアプリケーションへの反応

モバイル・アプリケーションに送り返されるレスポンスには、この例のようなボディが含まれる：

{
  "url": "https://api-eu.vonage.com/oauth2/auth?client_id=auth_test&scope=dpv%3AFraudPreventionAndDetection%23number-verification-verify-read&state=v2_abdc1234-aaa-bbb-cccc&redirect_uri=https%3A%2F%2Fui.idp.vonage.com%2Fcamara%2Foauth%2Fcallback&response_type=code"
}

モバイル・アプリケーションはこのURLを使って認証プロセスを完了する。

コールバック・エンドポイント

このエンドポイントは、モバイルアプリケーションがログインエンドポイントから提供されたURLをリクエストすると、認証サーバーからのコールバックを処理します。

番号認証リダイレクトの設定

次のステップに進む前に、まず ダッシュボードを開き、このチュートリアルの最初のステップで作成したアプリケーションに移動します。Editをクリックし、機能のリストまでスクロールダウンします。Number Verification Redirect入力テキストの値を変更してみましょう。

Number Verification Redirectフィールドは、Vonage認証サーバからのコールバックを処理するホストとエンドポイントを指定します。バックエンドをローカルで開発している場合は、次のようなツールを使うことをお勧めします。 ngrokや pinggyのようなツールを使うことをお勧めします。

忘れずに/コールバックのパスをホスト名の後に含めることを忘れないでください。例えば https://myhost.com/callback

認証コード交換

認証サーバーからのコールバックには 認証コードと同じ ステート値が含まれます。この認証コードをアクセストークンと交換する準備ができた。

そのためには POSTリクエストを送る必要がある。 認証コードそして リダイレクトURIダッシュボードで入力した値と同じでなければなりません。 グラントタイプ(常に authorization_code):

    // Exchange authorization code for an access token
    const tokenResponse = await makeFetchRequest(camara_auth_uri, {
      method: "POST",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        Authorization: `Bearer ${jwt}`,
      },
      body: new URLSearchParams({
        code,
        redirect_uri: redirect_ui,
        grant_type: "authorization_code",
      }),
    });

番号検証APIコール

このアクセストークンを使って、Number Verification APIを呼び出すことができる。このAPIは、電話番号がモバイルデータネットワークに接続されたデバイスのSIMカードに本当にリンクされているかを検証する方法を提供し、信頼性の高いユーザー認証を保証します。

APIコールを行うには POSTリクエストを送信する：

• アクセストークンを含む認可ヘッダー。

• 検証される電話番号を含むリクエストボディ。

以下はAPIコールのコードである：

    // Call Number Verification API
    const nvResponse = await makeFetchRequest(uri, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${accessToken}`,
      },
      body: JSON.stringify({ phoneNumber: phone }),
    });

番号検証APIはブール値を返す：

• 真:指定された電話番号に関連付けられたデバイスからのリクエスト。

• 偽:リクエストはユーザーの電話番号と一致しませんでした。

レスポンスを受け取ったら、その結果をフロントエンドに中継して、認証が成功したかどうかをユーザーに知らせることができる。

バックエンドのテスト

さて、いよいよバックエンドの実装をテストする番だ。まずは リポジトリをクローンしてをクローンし、環境をセットアップします：

1. 環境変数を設定します。サーバーフォルダーに移動し、以下の変数を含む.envファイルを作成（またはコピー）します：

• JWTに新しいトークンの値を渡します。このトークンは、このチュートリアルの最初のステップで作成したアプリケーションのアプリケーションIDと秘密鍵を使用して生成する必要があります。この オンラインツールを使用してトークンを生成できます。

• REDIRECT_URIは、ネットワーク・レジストリのダッシュボード設定で紹介したURIを指す必要があります。

1. サーバーを起動する。ターミナルを開き、以下のようにバックエンドを起動する：

node server.js

モバイルアプリケーションはまだ実装していないので、Pythonスクリプトをモッククライアントとして使ってバックエンドとやりとりし、その機能をテストします。スクリプトは2つのリクエストを実装します

• ログイン:リクエストを /ログインバックエンドエンドポイントにリクエストを送ります。

def login(phone):
    data = { 'phone': phone }
    response = requests.post("http://localhost:3000/login", json=data)
    return json.loads(response.content)['url']

• 認証:認証 URL を使用してバックエンド側で認証フローを続行し、番号確認 API からブール値のレスポンスを受け取ります。

def auth(url):
     response = requests.get(url, verify=False)
     return json.loads(response.content)["devicePhoneNumberVerified"]

最後に、Pythonスクリプトのメイン関数が、これまでの関数を呼び出し、認証処理の結果を出力する：

    url = login(args["phone"])

    if auth(url):
        print("Client successfully authenticated!")
    else:
        print("Unable to verify client credentials")

1つのターミナルでサーバーを実行した状態で、もう1つのターミナルを開き、client.pyというPythonスクリプトを実行する。テストには、プレフィックスに+990を付けた偽の電話番号（以下の例を参照）を使用する。サンドボックス ドキュメントによるとによると、偽の +990 接頭辞を使用したリクエストはすべて仮想 CSP にルーティングされる。

仮想 CSP は電話番号に基づいての応答を決定します：

• 電話番号の下1桁が偶数なら真。

• 電話番号の下1桁が奇数なら偽。

Pythonスクリプトの使用例：

$ python client.py +99012345678
Client successfully authenticated!

$ python client.py +99012345677
Unable to verify client credentials

結論

ここまで来たら、おめでとうございます！当社のモバイルアプリと統合できるバックエンドの準備が整ったはずです。

以下はその要点である：

• ネットワーク・イネーブルAPI ネットワーク・イネーブルメントAPIは、待ち時間を短縮することで認証プロセスを改善します。もう手動で認証URLを作成する必要はありません。

• 番号検証API 番号認証APIは、認証に使用される電話番号が意図されたユーザーに属することを確認することで、セキュリティと信頼性の両方を強化し、あなたのサービスに追加のセキュリティレイヤーを追加します。

• 電話番号ベースの2FAを活用することで、詐欺や不正アクセスからの保護を強化し、従来の認証方法を超える方法を学んでいただきました。

後編をお楽しみに！

お問い合わせ

ご質問がありますか？私たちがお手伝いします！ご参加ください Vonage 開発者コミュニティ Slackまたは Xにメッセージを送ってください。