https://a.storyblok.com/f/270183/1368x665/2a2b22711e/25jan-dev-blog-number-based-authentication_pt2.png

電話番号ベースの認証フローを作成する方法(その2)

所要時間:1 分

注:この記事で説明されているツールや方法の中には、サポートが終了しているものや最新のものではないものがあります。最新の内容やサポートについては、最新の投稿をご確認いただくか、Vonage Community Slackの VonageコミュニティSlack

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

第一部では 第1部では、バックエンドの実装方法を説明した。この第2部では、Number Verify APIを活用してエンドユーザーを認証するモバイルアプリケーションの実装について説明します。二要素認証(2FA)の方法として電話番号を使用することで、従来のSMSベースの認証が不要になり、安全でより良いユーザー体験を提供します。

前提条件

このチュートリアルに従うには、以下のものが必要だ:

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.

その他の条件は以下の通り:

建築

前編で実装したことを簡単に振り返ってみよう。 前編バックエンドの バックエンドサイドで実装したものをざっと振り返ってみましょう。バックエンドは以下のエンドポイントを実装している:

  • ログイン:モバイルアプリからのPOSTリクエストによってユーザー認証を開始し、以下のAPIを呼び出します。 ネットワーク有効化APIを呼び出してフローを開始します。このメソッドは、モバイルデバイスから送信する必要がある認証 URL を返します。

  • コールバック:認証サーバーからのコールバックを介して認証フローを完了する。 番号検証APIを使用してユーザーを検証します。このメソッドは認証結果をモバイルアプリケーションに返します。

Sequence diagram that shows the API calls to integrate Number Verification APINumber Verification API call flow

したがって、モバイル・アプリケーションは、これらのエンドポイントへのリクエストを実行すると同時に、インタラクションを容易にするユーザー・インターフェースを提供し、エンドユーザー検証プロセスの結果を表示する。

UIの実装

まず、ユーザーをVerifyするためのユーザーインターフェースの実装から始めましょう。アプリケーションには3つの主要な要素が含まれています:

  • A テキストフィールドは、ユーザーが電話番号を入力できるようにします。デフォルトでは、電話番号に対応するプレースホルダーの値が表示されます。 仮想オペレータの電話番号に対応するプレースホルダ値が表示されます。

  • A ボタンは、クリックされるとログインと検証のフローをトリガーする。ネットワークリクエストを処理するコルーチンが開始され、それに応じてUIが更新されます。このボタンはシステムにログインするプロセスをシミュレートします。

  • 検証プロセスの後 テキストメッセージが表示されます。このメッセージは、ボタンの下に太字で表示されます。このテキストコンポーネントを使用して、必要に応じてエラーメッセージを表示します。

以下のスクリーンショットは、UIがどのように見えるかを示しています:

The image shows an screenshot of the mobile application's UIMobile app UI

認証フローの初期化

ログイン sendLogin関数はバックエンドサーバにログインリクエストを送信します。この関数が何をするのか、詳しく説明します:

  1. ユーザーの電話番号をログインバックエンドエンドポイントに送信します。

  2. 通常、検証用URLやその他の関連情報を含む、サーバーからの応答を待つ。

  3. HTTPリクエストの結果を返します。 HTTP リクエストの結果を返します。型でカプセル化して返します。

suspend fun sendLogin(url: String, phoneNumber: String): Result<String> {
    val client = OkHttpClient()

    val jsonBody = """{ "phone": "$phoneNumber" }""".trimIndent()
    val requestBody = jsonBody.toRequestBody("application/json".toMediaType())

    val request = Request.Builder()
        .url(url)
        .post(requestBody)
        .header("Content-Type", "application/json")
        .build()

    return withContext(Dispatchers.IO) {
        try {
            val response = client.newCall(request).execute()
            if (response.isSuccessful) {
                Result.success(response.body?.string().orEmpty())
            } else {
                Result.failure(IOException("HTTP error: ${response.code}"))
            }
        } catch (e: IOException) {
            Result.failure(e)
        }
    }
}

承認リクエスト

モバイル・アプリケーションは、認証サーバーに認証リクエストを送信し、そのリクエストが最初の 送信ログインリクエストで提供されたのと同じ電話番号からのリクエストであることを確認する。

その sendAuthRequest関数は Vonage Client SDKを使用して認証リクエストを送信します。を使用して認証リクエストを送信します。この認証リクエストは、ユーザーの電話番号が携帯電話会社と通信することで確認されているかどうかを検証することを目的としています。

suspend fun sendAuthRequest(url: String): Result<Boolean> {
    val params = VGCellularRequestParameters(
        url = url,
        headers = emptyMap(),
        queryParameters = emptyMap(),
        maxRedirectCount = 15
    )

    return withContext(Dispatchers.IO) {
        val response = VGCellularRequestClient.getInstance()
            .startCellularGetRequest(params, true)

        val status = response.optInt("http_status")
        val isVerified = response.optJSONObject("response_body")
            ?.optString("devicePhoneNumberVerified", "false")?.toBoolean() ?: false

        if (status == 200 && isVerified) {
            Result.success(true)
        } else {
            Result.failure(IOException("Verification failed"))
        }
    }
}

ソースコード

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

結論

このシリーズの第2部では、モバイルアプリケーションに焦点を当て、Number Verification APIを統合して安全な2要素認証体験を提供するバックエンドとの対話方法を学んだ。

このブログ・シリーズでは、電話番号ベースの認証フローを実装して、従来の SMS ベースの認証方法に代わる安全でユーザーフレンドリーな認証方法を提供する方法を学んできました。この2FAの実装から得られる主なポイントは以下のとおりです:

  • Numbers Verification APIを使用することで、潜在的に脆弱なSMSチャネルへの依存を減らし、詐欺や傍受のリスクを低減します。

  • 番号認証APIと他の2FA方式を組み合わせれば、エンドユーザーの認証プロセスを裏側で行うことができるため、ユーザーエクスペリエンスが向上する。

ハッピー・ハッキング

お問い合わせ

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

シェア:

https://a.storyblok.com/f/270183/405x400/2b811a162d/alvaro-navarro.jpg
Alvaro Navarroシニア・デベロッパー・アドボケイト

AlvaroはVonageの開発者支持者であり、ネットワークAPIに焦点を当てています。デベロッパーエクスペリエンス、API、オープンソースに情熱を注ぐ。仕事以外では、コミックショップを探検したり、SFやホラーフェスティバルに参加したり、有名な小さなプラスチックブロックで何かを作ったりしているところをよく見かける。