ASP.NET Coreで TOTP 認証アプリの QR コード生成を有効にする

ASP.NET Coreには、ユーザー認証のための認証アプリケーションのサポートが含まれています。 2 要素認証 (2FA) 認証アプリでは、2FA の業界で推奨されるアプローチである、時間ベースのワンタイム パスワード アルゴリズム (TOTP) が使用されます。 (TOTP ベースの 2FA は SMS 2FA よりも優先されます)。ユーザーは通常、スマートフォンに認証アプリをインストールします。 アプリは、ユーザーがユーザー名とパスワードを確認した後に入力する 6 から 8 桁のコードを提供します。

警告

ASP.NET Core TOTP コード シークレットを保持します。 ユーザーはコードを複数回入力し、有効期限が切れる前に正常に認証できます。

ASP.NET Core Web アプリ テンプレートは認証子をサポートしていますが、QR コードの生成はサポートされていません。 QR コード ジェネレーターを使用すると、2FA を簡単に設定できます。 この記事では、2FA 構成ページに Razor生成を追加する方法について、 ページと MVC アプリに関するガイダンスを提供します。

ASP.NET Core Web アプリ テンプレートは認証子をサポートしますが、QR コード生成のサポートは提供していません。 QR コード ジェネレーターを使用すると、2FA を簡単に設定できます。 この記事では、2FA 構成ページに QR コード 生成を追加する手順について説明します。

Google や Facebook などの外部認証プロバイダーを使用しても、2 要素認証は行われません。 外部サインインは、外部認証プロバイダーがサポートするメカニズムによって保護されます。 たとえば、Microsoft 認証プロバイダーには、ハードウェア キーまたは別の 2FA アプローチが必要です。 既定のテンプレートで Web アプリと外部認証プロバイダーの両方に 2FA が必要な場合、ユーザーは 2 つの 2FA アプローチを満たす必要があります。 2 つの 2FA アプローチを必要とすることは、確立されたセキュリティ プラクティスとは異なります。これは通常、認証に 1 つの強力な 2FA メソッドに依存します。

ASP.NET Core 8.0 以降で Blazor を使用している場合は、次の記事で同様のガイダンスを確認できます。

2FA 構成ページに QR コードを追加する

次の手順では、https://davidshimjs.github.io/qrcodejs/ リポジトリのqrcode.jsファイルを使用します。

  1. 'qrcode.js' JavaScript ライブラリをプロジェクトの wwwroot\lib フォルダーにダウンロードします。

  2. スキャフォールディング Identityの指示に従って、/Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml ファイルを生成します。

  3. /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml ファイルで、ファイルの末尾にある Scripts セクションを見つけます。

    @section Scripts {
   <partial name="_ValidationScriptsPartial" />
}

  4. wwwroot/js フォルダー にqr.js という名前の新しい JavaScript ファイルを作成し、QR コードを生成する次のコードを追加します。

    window.addEventListener("load", () => {
const uri = document.getElementById("qrCodeData").getAttribute('data-url');
new QRCode(document.getElementById("qrCode"),
   {
      text: uri,
      width: 150,
      height: 150
   });
});

  5. Scripts セクションを更新して、前にダウンロードしたqrcode.js ライブラリへの参照を追加します。

  6. QR コードを生成する呼び出しで qr.js ファイルを追加します。

    @section Scripts {
   <partial name="_ValidationScriptsPartial" />
   <script type="text/javascript" src="~/lib/qrcode.js"></script>
   <script type="text/javascript" src="~/js/qr.js"></script>
}

  7. これらの手順にリンクしている段落を削除します。

  8. アプリを実行します。 QR コードをスキャンし、認証子が提供するコードを検証できることを確認します。

QR コードのサイト名を変更する

QR コード内のサイト名は、プロジェクトの作成時に選択したプロジェクト名から取得されます。 /Identity ファイルで メソッドを探して変更できます。

テンプレートの既定のコードを次に示します。

private string GenerateQrCodeUri(string email, string unformattedKey)
{
    return string.Format(
        AuthenticatorUriFormat,
        _urlEncoder.Encode("Razor Pages"),
        _urlEncoder.Encode(email),
        unformattedKey);
}

string.Formatの呼び出しの 2 番目のパラメーターは、ソリューション名から取得されるサイト名です。 任意の値に変更できますが、常に URL エンコードする必要があります。

別の QR コード ライブラリを使用する

QR コード ライブラリは、お好みのライブラリに置き換えることができます。 HTML には qrCode 要素が含まれており、ライブラリが提供するメカニズムによって QR コードを配置できます。

QR コードの正しい形式の URL は、次の場所にあります。

  • AuthenticatorUri モデルのプロパティ
  • data-url qrCodeData要素のプロパティ

TOTP クライアントとサーバーの時刻を確認する

TOTP (タイムベースのワンタイム パスワード) 認証は、サーバーと認証デバイスの両方の時間が正確であることに依存しています。 トークンは 30 秒間しか有効ではありません。 TOTP 2FA サインインに失敗した場合は、サーバー時刻が正確であり、正確な NTP サービスに同期されていることが望ましいかどうかを確認します。

関連するコンテンツ

  • Last updated on