ASP.NET Core Blazor Web App で TOTP 認証アプリ用の QR コードを生成できるようにする

2025-01-20

Note

これは、この記事の最新バージョンではありません。現在のリリースについては、この記事の .NET 9 バージョンを参照してください。

重要

この情報はリリース前の製品に関する事項であり、正式版がリリースされるまでに大幅に変更される可能性があります。 Microsoft はここに示されている情報について、明示か黙示かを問わず、一切保証しません。

現在のリリースについては、この記事の .NET 9 バージョンを参照してください。

この記事では、時間ベースのワンタイムパスワードアルゴリズム (TOTP) 認証アプリによって生成された QR コードを使用して、2 要素認証 (2FA) 用の ASP.NET Core Blazor Web App アプリを構成する方法について説明します。

TOTP 認証アプリを使用した 2FA の概要については、「ASP.NET Core で TOTP 認証アプリ用の QR コードを生成できるようにする」を参照してください。

この記事のガイダンスは、新しいアプリの認証の種類として個別のアカウントを使用してアプリを作成するか、既存のアプリに Identity をスキャフォールディングすることを前提としています。 Identity を既存のアプリにスキャフォールディングするために Visual Studio の代わりに .NET CLI を使用する方法のガイダンスについては、「ASP.NET Core コードジェネレーターツール ('aspnet-codegenerator')」を参照してください。

警告

TOTP コードは期限切れになる前に複数回認証するために使用できるため、シークレットを保持する必要があります。

2FA 構成ページへの QR コードの追加

TOTP 認証アプリで 2FA を設定するためにアプリによって生成された QR コードは、QR コードライブラリによって生成される必要があります。

この記事のガイダンスでは manuelbl/QrCodeGenerator を使用しますが、どの QR コード生成ライブラリを使用しても構いません。

Net.Codecrete.QrCodeGenerator NuGet パッケージのパッケージ参照を追加します。

Note

.NET アプリへのパッケージの追加に関するガイダンスについては、「パッケージ利用のワークフロー」 (NuGet ドキュメント) の "パッケージのインストールと管理" に関する記事を参照してください。 NuGet.org で正しいパッケージバージョンを確認します。

Components/Account/Pages/Manage フォルダー内の EnableAuthenticator コンポーネントを開きます。 @page ディレクティブの下のファイルの先頭に、QrCodeGenerator 名前空間の @using ディレクティブを追加します。

@using Net.Codecrete.QrCodeGenerator

QRコードの指示を含む<div>要素と、QRコードが表示される場所とQRコードデータがページに格納される場所である2つの<div>要素を削除します。

- <div class="alert alert-info">
-     Learn how to <a href="https://go.microsoft.com/fwlink/?Linkid=852423">enable 
-     QR code generation</a>.
- </div>
- <div></div>
- <div data-url="@authenticatorUri"></div>

削除された要素を次のマークアップに置き換えます。

<div>
    <svg xmlns="http://www.w3.org/2000/svg" height="300" width="300" stroke="none" 
            version="1.1" viewBox="0 0 50 50">
        <rect width="300" height="300" fill="#ffffff" />
        <path d="@svgGraphicsPath" fill="#000000" />
    </svg>
</div>

開始 @code ブロック内で、authenticatorUri の変数宣言を svgGraphicsPath に変更します。

- private string? authenticatorUri;
+ private string? svgGraphicsPath;

GenerateQrCodeUri メソッドでサイト名を変更します。既定値は Microsoft.AspNetCore.Identity.UI です。値を、ユーザーが認証アプリで簡単に識別できる意味のあるサイト名に変更します。開発者は通常、会社の名前と一致するサイト名を設定します。狭いモバイルデバイス画面にサイト名を表示できるようにするには、サイト名の長さを 30 文字以下に制限することをお勧めします。

GenerateQrCodeUri メソッドで:

- UrlEncoder.Encode("Microsoft.AspNetCore.Identity.UI"),
+ UrlEncoder.Encode("Weyland-Yutani Corporation"),

LoadSharedKeyAndQrCodeUriAsync メソッドの下部で、authenticatorUri を設定する行に var キーワードを追加し、暗黙的に型指定されたローカル変数に設定します。

- authenticatorUri = GenerateQrCodeUri(email!, unformattedKey!);
+ var authenticatorUri = GenerateQrCodeUri(email!, unformattedKey!);

LoadSharedKeyAndQrCodeUriAsync メソッドの下部に次のコード行を追加します。

var qr = QrCode.EncodeText(authenticatorUri, QrCode.Ecc.Medium);
svgGraphicsPath = qr.ToGraphicsPath();

アプリを実行し、QR コードがスキャン可能であること、コードが検証されることを確認します。

警告

ASP.NET Core TOTP コードは、有効期限が切れる前に複数回正常に認証するために使用できるため、シークレットを保持する必要があります。

参照元の `EnableAuthenticator` コンポーネント

参照元で EnableAuthenticator コンポーネントを検査できます。

参照元の EnableAuthenticator コンポーネント

Note

通常、.NET 参照ソースへのドキュメントリンクを使用すると、リポジトリの既定のブランチが読み込まれます。このブランチは、.NET の次回リリースに向けて行われている現在の開発を表します。特定のリリースのタグを選択するには、[Switch branches or tags](ブランチまたはタグの切り替え) ドロップダウンリストを使います。詳細については、「ASP.NET Core ソースコードのバージョンタグを選択する方法」 (dotnet/AspNetCore.Docs #26205) を参照してください。

TOTP 時間のずれによるエラー

TOTP 認証は、TOTP 認証アプリデバイスとアプリのホストでの正確な時間維持に依存します。 TOTP トークンは 30 秒間のみ有効です。拒否された TOTP コードが原因でログインが失敗した場合は、正確な時刻が維持されていることを確認します。できれば、正確な NTP サービスに同期されます。

次の方法で共有

ASP.NET Core Blazor Web App で TOTP 認証アプリ用の QR コードを生成できるようにする

2FA 構成ページへの QR コードの追加

参照元の EnableAuthenticator コンポーネント

TOTP 時間のずれによるエラー

その他のリソース

フィードバック

その他のリソース

参照元の `EnableAuthenticator` コンポーネント