允許為 ASP.NET Core 中的 TOTP 驗證器應用程式產生 QR 代碼

ASP.NET Core 隨附於支援驗證器應用程式以進行個別驗證。 使用以時間為基礎的一次性密碼演算法 (TOTP) 的雙因素驗證 (2FA) 驗證器應用程式是 2FA 的業界建議方法。 使用 TOTP 的 2FA 偏好使用 SMS 2FA。 驗證器應用程式提供 6 到 8 位數的代碼，使用者必須在確認其使用者名稱和密碼之後輸入。 一般而言，驗證器應用程式會安裝在智慧型手機上。

ASP.NET Core Web 應用程式範本支援驗證器，但不支援 QR 代碼產生。 QR 代碼產生器可簡化 2FA 的設定。 本檔提供頁面和MVC應用程式的指引Razor，說明如何將QR代碼產生新增至2FA設定頁面。 如需適用於 Blazor Web 應用程式的指引，請參閱 在 ASP.NET Core Blazor Web 應用程式中啟用 TOTP 驗證器應用程式的 QR 代碼產生。

雙因素驗證不會使用外部驗證提供者進行，例如 Google 或 Facebook。 外部登入受到外部登入提供者提供的任何機制保護。 例如，例如，Microsoft 驗證提供者需要硬體金鑰或其他 2FA 方法。 如果預設範本強制執行「本機」2FA，則使用者必須滿足兩個 2FA 方法，這不是常用的情節。

將 QR 代碼新增至 2FA 設定頁面

這些指示會從 https://davidshimjs.github.io/qrcodejs/ 存放庫使用 qrcode.js。

• 將 qrcode.js JavaScript 程式庫 下載至專案中 wwwroot\lib 資料夾。
• 遵循 Scaffold Identity 中的指示來產生 /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml。
• 在 /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml 中，找出檔案結尾處的 Scripts 區段：

@section Scripts {
    @await Html.PartialAsync("_ValidationScriptsPartial")
}

• 在 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
    });
});

• 更新 Scripts 區段，以新增先前下載 qrcode.js 程式庫的參考。
• 新增具有呼叫的 qr.js 檔案，以產生 QR 代碼：

@section Scripts {
    @await Html.PartialAsync("_ValidationScriptsPartial")

    <script type="text/javascript" src="~/lib/qrcode.js"></script>
    <script type="text/javascript" src="~/js/qr.js"></script>
}

• 刪除將您連結到這些指示的段落。

執行您的應用程式，並確定您可以掃描 QR 代碼，並驗證驗證器所證明的程式碼。

變更 QR 代碼中的網站名稱

QR 代碼中的網站名稱取自您一開始建立專案時所選擇的專案名稱。 您可以在 /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.cs 中尋找 GenerateQrCodeUri(string email, string unformattedKey) 方法來變更它。

範本中的預設程式碼如下所示：

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

呼叫 string.Format 的第二個參數是您的網站名稱，取自解決方案名稱。 它可以變更為任何值，但必須一律為 URL 編碼。

使用不同的 QR 代碼程式庫

您可以將 QR 代碼程式庫取代為慣用的程式庫。 HTML 包含 qrCode 元素，您可以透過程式庫所提供的任何機制來放置 QR 代碼。

QR 代碼的格式正確 URL 可在下列項目中取得：

• 模型 AuthenticatorUri 屬性。
• qrCodeData 元素中的 data-url 屬性。

TOTP 用戶端和伺服器時間扭曲

TOTP (以時間為基礎的單次密碼) 驗證取決於伺服器和驗證器裝置有精確的時間。 權杖僅持續 30 秒。 如果 TOTP 2FA 登入失敗，請檢查伺服器時間是否正確，最好同步處理至正確的 NTP 服務。