BlazorでのWebアプリケーション開発手法２【C#】B05_ユーザーの入力を受けるメッセージ

今回は「プロンプト」を使って、ユーザーからの入力を受け取るメッセージを扱います。alert（表示のみ）やconfirm（OK／キャンセルの選択）と異なり、prompt はメッセージとともにテキスト入力欄を表示し、ユーザーが入力した文字列を戻り値として受け取ることができます。この仕組みを使い、「認証コードをメールで送信し、ユーザーがそれを入力して照合する」という認証シナリオを実装しながら解説していきます。

MessageBoxPrompt関数の追加

App.razorの<script>ブロックには、既存のMessageBoxAlert（アラート表示）とMessageBoxConfirm（確認ダイアログ）が定義されています。

図1　App.razorの既存のJavaScript関数（MessageBoxAlert・MessageBoxConfirm）

このMessageBoxConfirm関数をコピー＆貼り付けして複製します。

図2　MessageBoxConfirm関数をコピー＆貼り付けして複製

複製した方の関数名をMessageBoxPromptに変更し、中身もconfirm(message)からprompt(message)に書き換えます。引数はmessageで同じですが、promptの戻り値はstringになる点がconfirm（bool）との違いです。

図3　関数名をMessageBoxPromptに変更し、prompt(message)を返すよう修正

function MessageBoxPrompt(message)
{
    return prompt(message);
}

コード1　App.razorに追加したMessageBoxPrompt関数

Loginボタンの追加

続いてHome.razorに戻り、ボタンを1つ追加します。既存の保存ボタンのdivをコピー＆貼り付けし、Loginボタンとして書き換えます。onclick属性の値には「Login」と入力し（IntelliSenseの入力候補も表示されます）、表示テキストは「ログイン」とします。

図4　保存ボタンのdivをコピー＆貼り付けし、onclick属性をLoginに変更（IntelliSense候補表示）

<div class="mb-3">
    <button class="btn btn-primary" @onclick="Login">ログイン</button>
</div>

コード2　Home.razorに追加したLoginボタン

認証ボタンをイメージしており、Loginボタンを押すと認証コードをメールで送信し、「メールで送ったコードを入力してください」と促す、という流れをこのあと実装していきます。呼び出し先のLoginメソッドがまだ存在しないため、まずは空のメソッドを新規作成します。

図5　private void Login()の空メソッドを新規作成

プロンプトメッセージの表示と入力値の受け取り

作成したMessageBoxPromptを呼び出します。JS.InvokeAsyncは戻り値があるため、InvokeVoidAsyncではなくInvokeAsync<string>を使い、戻り値の型としてstringを指定します。第1引数にJavaScript側の関数名、第2引数にメッセージ文字列（「メールを送信しました。認証コードを入力してください。」）を渡します。JS呼び出しは非同期なので、メソッドをasync Task化してawaitで待ち受けます。

図6　private async Task Login()に変更し、JS.InvokeAsync<string>でMessageBoxPromptを呼び出す

戻り値のstringはinputCodeという変数で受け取るようにします。これで、プロンプトに入力された値がinputCodeに入ってくる流れになります。

図7　string inputCode = await JS.InvokeAsync<string>(…)で戻り値を受け取る

private async Task Login()
{
    string inputCode = await JS.InvokeAsync<string>(
        "MessageBoxPrompt",
        "メールを送信しました。認証コードを入力してください。");
}

コード3　Home.razorのLoginメソッド（プロンプト表示・入力受け取り部分）

動作確認（プロンプトの表示と値の取得）

inputCodeの行にブレークポイントを置いた状態で一度実行してみます。ログインボタンを押すと、「メールを送信しました。認証コードを入力してください。」というメッセージとともに入力欄が表示されます。

図8　実行してログインボタンを押すと、プロンプトメッセージと入力欄が表示される

試しに「12344」と入力し、OKを押します。

図9　プロンプトの入力欄に「12344」と入力

ブレークポイントで停止し、inputCodeに入力した「12344」が正しく代入されていることが確認できます。このように、ユーザーに何かを入力させ、その値を受け取って次の処理に使う、ということができます。

図10　ブレークポイントでinputCodeに“12344”が代入されていることを確認

認証コードの生成とログ出力

今回のシナリオのように、認証コードを作ってメールで送信し、入力された値と一致するか検証する、という使い方もできます。まずRandomクラスをnewし、Random.Nextでランダムな数値を取得します。

図11　var random = new Random();と入力（IntelliSense候補表示）

6桁のランダムな数字を取るつもりでrandom.Next(100000, 100000)と入力していますが、この時点では最小値・最大値がどちらも100000になってしまっており、実は常に同じ値しか返らない誤りがあります（この誤りは後の手順で7桁の範囲に修正します）。

図12　int code = random.Next(100000, 100000);（この時点では誤りがあり、後で7桁の範囲に修正する）

本来はここで取得したcodeを実際にメール送信するロジックを入れるところですが、今回はSystem.Diagnostics.Debug.WriteLineでcode.ToString()を出力し、メール送信の代わりとします（ToString()を付けなくても分かりやすさのために付けているだけで、実際には不要です）。

図13　System.Diagnostics.Debug.WriteLineでcode.ToString()をログ出力（メール送信の代わり）

var random = new Random();
int code = random.Next(100000, 1000000);
 
//メール送信…
System.Diagnostics.Debug.WriteLine("code:" + code.ToString());

コード4　Home.razorに追加した認証コード生成とログ出力（最終的に7桁の範囲へ修正済み）

入力値との照合とエラーメッセージ

ユーザーがメールを見て入力してきたinputCodeが、code.ToString()と一致するかを検証します。一致しない場合はreturnで処理を抜けるようにし、その前にアラートメッセージで「認証失敗！！」と表示します。

図14　if (code.ToString() != inputCode) { 認証失敗のアラート表示; return; } を追加

if (code.ToString() != inputCode)
{
    await JS.InvokeVoidAsync("MessageBoxAlert", "認証失敗！！");
    return;
}

コード5　Home.razorに追加した認証チェックとエラーメッセージ

認証成功時の画面遷移

ここを通過した場合（認証が成功した場合）は、例えば別のページに移る、といったこともできます。まずHome.razorの先頭にNavigationManagerを@injectで宣言します。

図15　Home.razorの先頭に@inject NavigationManager NavigationManagerを追加

続いて、認証成功時の処理としてNavigationManager.NavigateToを呼び出し、例としてcounterページに遷移するようにします。

図16　認証成功時にNavigationManager.NavigateTo(“counter”)で画面遷移する処理を追加

@inject NavigationManager NavigationManager

コード6　Home.razorに追加したNavigationManagerのDI宣言

NavigationManager.NavigateTo("counter");

コード7　認証成功時に呼び出すページ遷移処理

7桁への修正と動作確認

ここで先ほどの誤り（6桁のつもりが最小値・最大値とも100000になっていた点）に気づき、random.Next(100000, 1000000)に修正して7桁のランダムな数値が生成されるようにします。

図17　random.Next(100000, 1000000)に修正し、7桁のランダムな数値が生成されるようにする

この状態で実行し、ログインボタンを押すと「認証コードを入力してください」のプロンプトが表示されます。出力ウィンドウを見ると、ランダムな値がログに出力されており、実際にはこれがメールで届いているという想定です。

図18　出力ウィンドウにログ出力されたランダムな認証コード（code:866429）を確認

この値をプロンプトに入力してOKを押すと、正しく認証が成功し、Counterページに画面遷移することが確認できます。

図19　正しい認証コードを入力すると認証が成功し、Counterページに遷移する

続けて、再度ログインボタンを押し、今度は適当な6桁の値を入力して認証してみると、「認証失敗！！」というメッセージが表示されることも確認できます。

図20　誤った認証コードを入力すると「認証失敗！！」のメッセージが表示される

まとめ

このように、prompt を使うとユーザーに何かを入力させ、その値を受け取って処理を進めることができます。今回のシナリオのように、認証コードを生成してメール等で送信し、ユーザーが入力した値と照合する、といった使い方ができるので、ぜひ活用してみてください。