演習 - 多要素認証を構成する

10 分

前のユニットでは、ASP.NET Core Identity が多要素認証 (MFA) 用に時間ベースのワンタイムパスワード (TOTP) を実装する方法について説明しました。このユニットでは、既存の 認証アプリの構成 フォームをカスタマイズして、登録キーを含む QR コードを提供します。

QR コードの生成

QR コードを生成するための複数の戦略が存在します。このドキュメントの例では、クライアント側の JavaScript ライブラリを使用しています。ただし、このユニットでは、サードパーティの NuGet パッケージを使用して、サーバー上の C# で QR コードを生成します。結果の QR コードイメージは、base-64 でエンコードされた文字列として HTML プレースホルダー要素に挿入されます。

QR コードサービスを追加する

認証アプリの構成フォームで QR コードを生成するために必要なものをすべて作成しましょう。

ターミナルウィンドウで、 QRCoder NuGet パッケージをインストールします。
```
dotnet add package QRCoder --version 1.6.0
```
[エクスプローラー] ウィンドウで、[サービス] フォルダーを右クリックし、QRCodeService.csという名前の新しいファイルを追加します。次のコードを追加します。
```
using QRCoder;

namespace RazorPagesPizza.Services;
public class QRCodeService
{
    private readonly QRCodeGenerator _generator;

    public QRCodeService(QRCodeGenerator generator)
    {
        _generator = generator;
    }

    public string GetQRCodeAsBase64(string textToEncode)
    {
        QRCodeData qrCodeData = _generator.CreateQrCode(textToEncode, QRCodeGenerator.ECCLevel.Q);
        var qrCode = new PngByteQRCode(qrCodeData);

        return Convert.ToBase64String(qrCode.GetGraphic(4));
    }
}
```
前述のコード:
- コンストラクターの挿入を使用して、ライブラリの QRCodeGenerator クラスのインスタンスにアクセスします。
- base-64 でエンコードされた文字列を返す GetQRCodeAsBase64 メソッドを公開します。 GetGraphicに渡される整数値によって、QR コードのディメンションが決まります。この場合、生成された QR コードは、4 ピクセルの 2 乗サイズのブロックで構成されます。

Program.csで、強調表示された行を追加します。

using Microsoft.AspNetCore.Identity;
using Microsoft.EntityFrameworkCore;
using RazorPagesPizza.Areas.Identity.Data;
using Microsoft.AspNetCore.Identity.UI.Services;
using RazorPagesPizza.Services;
using QRCoder;

var builder = WebApplication.CreateBuilder(args);
var connectionString = builder.Configuration.GetConnectionString("RazorPagesPizzaAuthConnection");
builder.Services.AddDbContext<RazorPagesPizzaAuth>(options => options.UseSqlServer(connectionString)); 
builder.Services.AddDefaultIdentity<RazorPagesPizzaUser>(options => options.SignIn.RequireConfirmedAccount = true)
      .AddEntityFrameworkStores<RazorPagesPizzaAuth>();

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddTransient<IEmailSender, EmailSender>();
builder.Services.AddSingleton(new QRCodeService(new QRCodeGenerator()));

var app = builder.Build();

QRCodeService は、 Program.cs内の IoC コンテナーにシングルトンサービスとして登録されます。

多要素認証をカスタマイズする

QR コードを生成できるようになったので、[ 認証アプリの構成] フォームに QR コードを埋め込むことができます。

Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.csを開き、次の変更を行います。

QR コードの base-64 文字列表現を格納するには、 EnableAuthenticatorModel クラスに次のプロパティを追加します。

public class EnableAuthenticatorModel : PageModel
{
    private readonly UserManager<RazorPagesPizzaUser> _userManager;
    private readonly ILogger<EnableAuthenticatorModel> _logger;
    private readonly UrlEncoder _urlEncoder;

    public string QrCodeAsBase64 { get; set; }

強調表示された変更を OnGetAsync ページハンドラーに組み込みます。

public async Task<IActionResult> OnGetAsync([FromServices] QRCodeService qrCodeService)
{
    var user = await _userManager.GetUserAsync(User);
    if (user == null)
    {
        return NotFound($"Unable to load user with ID '{_userManager.GetUserId(User)}'.");
    }

    await LoadSharedKeyAndQrCodeUriAsync(user);
    QrCodeAsBase64 = qrCodeService.GetQRCodeAsBase64(AuthenticatorUri);

    return Page();
}

前のページハンドラーでは、パラメーターの挿入によって、 QRCodeService シングルトンサービスへの参照が提供されます。

QRCodeServiceへの参照を解決するには、次のusingステートメントをファイルの先頭に追加します。変更を保存します。
```
using RazorPagesPizza.Services;
```

強調表示された変更を GenerateQrCodeUri メソッドに組み込みます。

private string GenerateQrCodeUri(string email, string unformattedKey)
{
    return string.Format(
        CultureInfo.InvariantCulture,
        AuthenticatorUriFormat,
        _urlEncoder.Encode("RazorPagesPizza"),
        _urlEncoder.Encode(email),
        unformattedKey);
}

これにより、TOTP アプリのキーの表示名が設定されます。

Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtmlで、次の強調表示された変更を行って保存します。

<li>
    <p>Scan the QR Code or enter this key <kbd>@Model.SharedKey</kbd> into your two factor authenticator app. Spaces and casing do not matter.</p>
    <div class="alert alert-info">Learn how to <a href="https://go.microsoft.com/fwlink/?Linkid=852423">enable QR code generation</a>.</div>
    <div id="qrCode">
        <img alt="embedded QR code" src="data:image/png;base64,@Model.QrCodeAsBase64" />
    </div>
    <div id="qrCodeData" data-url="@Model.AuthenticatorUri"></div>
</li>

上記のマークアップは、base-64 でエンコードされた画像をページに埋め込みます。

多要素認証のテスト

QR コードに必要なすべての変更は、[ 認証アプリの構成 ] フォームで行いました。 MFA 機能を簡単にテストできるようになりました。

すべての変更を保存していることを確認します。
dotnet runを使用してアプリをビルドして実行します。
まだサインインしていない場合は、サイトに移動し、いずれかの登録済みユーザーでサインインします。 [Hello] [First name] [Last name]! リンクを選択してプロファイル管理ページに移動し、2 要素認証を選択します。
[ 認証アプリの追加] ボタンを選択します。
画面の指示に従って、このユーザーの認証アプリを登録して確認します。

たとえば、Android で Microsoft Authenticator を使用して、次の手順に従ってアカウントをアプリに追加します。
1. Microsoft Authenticator アプリを開きます。
2. 右上にある kebab メニュー (垂直省略記号) を選択します。
3. [ アカウントの追加] を選択します。
4. その他のアカウント (Google、Facebook など) を選択します。
5. 示されているように QR コードをスキャンします。
[確認コード] テキストボックスに、TOTP アプリによって提供される 確認コード を入力します。
[ 確認] を選択します。

検証が成功すると、認証 アプリが検証済 みのバナーといくつかの回復コードがページに表示されます。
VS Code の [SQL Server ] タブで、 RazorPagesPizza データベースを右クリックし、[ 新しいクエリ] を選択します。次のクエリを入力し、 Ctrl+Shift+E キーを押して実行します。
```
SELECT FirstName, LastName, Email, TwoFactorEnabled
FROM dbo.AspNetUsers
```
サインインしているユーザーの場合、 TwoFactorEnabled 列が 1と等しいという出力が表示されます。他の登録済みユーザーに対して多要素認証が有効になっていないため、レコードの列値は 0。
Web アプリで [ ログアウト] を選択し、同じユーザーでもう一度サインインします。
[ Authenticator code]\(認証コード\) テキストボックスに、TOTP 認証アプリの検証コードを入力します。 [ ログイン ] ボタンを選択します。
「Hello, [First name] [Last name]！」を選択してください。次に、[ 2 要素認証 ] タブを選択します。

Microsoft Authenticator が設定されているため、次のボタンが表示されます。
- 2FA を無効にする
- 回復コードをリセットする
- 認証アプリを設定する
- 認証アプリをリセットする
VS Code のターミナルウィンドウで、Ctrl+Cキーを押してアプリを停止します。

概要

このユニットでは、[ 認証アプリの構成 ] フォームに QR コードを生成する機能を追加しました。次のユニットでは、ID を使用してクレームを格納し、承認ポリシーを適用する方法について説明します。

演習 - 多要素認証を構成する

QR コードの生成

QR コード サービスを追加する

多要素認証をカスタマイズする

多要素認証のテスト

概要

フィードバック

QR コードサービスを追加する