ASP.NET Core での TOTP authenticator アプリの QR コード生成を有効にするEnable QR Code generation for TOTP authenticator apps in ASP.NET Core

QR コードには ASP.NET Core 2.0 以降が必要です。QR Codes requires ASP.NET Core 2.0 or later.

ASP.NET Core には、個々の認証用の authenticator アプリケーションのサポートが付属しています。ASP.NET Core ships with support for authenticator applications for individual authentication. 2要素認証 (2FA) 認証アプリは、時間ベースのワンタイムパスワードアルゴリズム (TOTP) を使用して、2FA に業界で推奨されるアプローチです。Two factor authentication (2FA) authenticator apps, using a Time-based One-time Password Algorithm (TOTP), are the industry recommended approach for 2FA. TOTP を使用した2FA は、SMS 2FA に適しています。2FA using TOTP is preferred to SMS 2FA. Authenticator アプリには、ユーザー名とパスワードを確認した後に入力する必要がある 6 ~ 8 桁のコードが用意されています。An authenticator app provides a 6 to 8 digit code which users must enter after confirming their username and password. 通常、認証アプリはスマートフォンにインストールされます。Typically an authenticator app is installed on a smart phone.

ASP.NET Core web アプリテンプレートでは認証子がサポートされていますが、QRCode の生成はサポートされていません。The ASP.NET Core web app templates support authenticators, but don't provide support for QRCode generation. QRCode ジェネレーターにより、2FA のセットアップが簡単になります。QRCode generators ease the setup of 2FA. このドキュメントでは、[2FA] 構成ページに QR コード 生成を追加する手順について説明します。This document will guide you through adding QR Code generation to the 2FA configuration page.

GoogleFacebookなどの外部認証プロバイダーを使用した場合、2要素認証は行われません。Two factor authentication does not happen using an external authentication provider, such as Google or Facebook. 外部ログインは、外部ログインプロバイダーによって提供されるメカニズムによって保護されます。External logins are protected by whatever mechanism the external login provider provides. たとえば、 Microsoft 認証プロバイダーでは、ハードウェアキーまたは別の2fa アプローチが必要です。Consider, for example, the Microsoft authentication provider requires a hardware key or another 2FA approach. 既定のテンプレートで "ローカル" 2FA が適用されている場合は、ユーザーは2つの2FA アプローチを満たす必要があります。これは、一般的には使用されないシナリオです。If the default templates enforced "local" 2FA then users would be required to satisfy two 2FA approaches, which is not a commonly used scenario.

2FA 構成ページへの QR コードの追加Adding QR Codes to the 2FA configuration page

この手順では、リポジトリの qrcode.js を使用し https://davidshimjs.github.io/qrcodejs/ ます。These instructions use qrcode.js from the https://davidshimjs.github.io/qrcodejs/ repo.

  • Identity スキャフォールディングに記載されている手順に従って、/Areas//を生成します。 IdentityFollow the instructions in Scaffold Identity to generate /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml .
  • /Areas/で、ファイルの最後にあるセクションを見つけます (& a)。この場合は、次の手順を Identity Scripts 実行します。In /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml , locate the Scripts section at the end of the file:
  • Pages/Account/Manage/EnableAuthenticator. cshtml ( Razor pages) または Views/manage/enableauthenticator (MVC) で、 Scripts ファイルの末尾にあるセクションを探します。In Pages/Account/Manage/EnableAuthenticator.cshtml (Razor Pages) or Views/Manage/EnableAuthenticator.cshtml (MVC), locate the Scripts section at the end of the file:
@section Scripts {
    @await Html.PartialAsync("_ValidationScriptsPartial")
}
  • セクションを更新して、 Scripts 追加したライブラリへの参照 qrcodejs と、QR コードを生成するための呼び出しを追加します。Update the Scripts section to add a reference to the qrcodejs library you added and a call to generate the QR Code. 次のようになります。It should look as follows:
@section Scripts {
    @await Html.PartialAsync("_ValidationScriptsPartial")

    <script type="text/javascript" src="~/lib/qrcode.js"></script>
    <script type="text/javascript">
        new QRCode(document.getElementById("qrCode"),
            {
                text: "@Html.Raw(Model.AuthenticatorUri)",
                width: 150,
                height: 150
            });
    </script>
}
  • 次の手順にリンクする段落を削除します。Delete the paragraph which links you to these instructions.

アプリを実行して、QR コードをスキャンし、認証子が証明するコードを検証できることを確認します。Run your app and ensure that you can scan the QR code and validate the code the authenticator proves.

QR コードのサイト名を変更するChange the site name in the QR Code

QR コードのサイト名は、プロジェクトを最初に作成するときに選択したプロジェクト名から取得されます。The site name in the QR Code is taken from the project name you choose when initially creating your project. これを変更するには GenerateQrCodeUri(string email, string unformattedKey)/Areas/ Identity /Pages/Account/Manage/EnableAuthenticator.cshtml.cs のメソッドを検索します。You can change it by looking for the GenerateQrCodeUri(string email, string unformattedKey) method in the /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.cs .

QR コードのサイト名は、プロジェクトを最初に作成するときに選択したプロジェクト名から取得されます。The site name in the QR Code is taken from the project name you choose when initially creating your project. これを変更するには GenerateQrCodeUri(string email, string unformattedKey)Pages/Account/Manage/enableauthenticator. cshtml ( Razor pages) ファイルまたは Controllers/ManageController (MVC) ファイルのメソッドを検索します。You can change it by looking for the GenerateQrCodeUri(string email, string unformattedKey) method in the Pages/Account/Manage/EnableAuthenticator.cshtml.cs (Razor Pages) file or the Controllers/ManageController.cs (MVC) file.

テンプレートの既定のコードは、次のようになります。The default code from the template looks as follows:

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

の呼び出しの2番目のパラメーター string.Format は、ソリューション名から取得したサイト名です。The second parameter in the call to string.Format is your site name, taken from your solution name. 任意の値に変更できますが、常に URL エンコードされている必要があります。It can be changed to any value, but it must always be URL encoded.

別の QR コードライブラリの使用Using a different QR Code library

QR コードライブラリを任意のライブラリに置き換えることができます。You can replace the QR Code library with your preferred library. HTML には、 qrCode ライブラリが提供するメカニズムによって QR コードを配置できる要素が含まれています。The HTML contains a qrCode element into which you can place a QR Code by whatever mechanism your library provides.

QR コード用に正しく書式設定された URL は、で入手できます。The correctly formatted URL for the QR Code is available in the:

  • AuthenticatorUri モデルのプロパティ。AuthenticatorUri property of the model.
  • data-url 要素のプロパティ qrCodeDatadata-url property in the qrCodeData element.

TOTP クライアントとサーバーの時刻のずれTOTP client and server time skew

TOTP (時間ベースの One-Time パスワード) 認証は、サーバーと authenticator デバイスの正確な時刻の両方に依存します。TOTP (Time-based One-Time Password) authentication depends on both the server and authenticator device having an accurate time. トークンは30秒間のみ最後にあります。Tokens only last for 30 seconds. TOTP 2FA ログインが失敗した場合は、サーバーの時刻が正確であること、および適切な NTP サービスに同期されていることを確認します。If TOTP 2FA logins are failing, check that the server time is accurate, and preferably synchronized to an accurate NTP service.