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

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

警告

ASP.NET Core TOTP 代碼應保密，因其在到期之前可成功驗證多次。

ASP.NET Core Web 應用程式範本支援驗證器，但不支援 QR 代碼生成。 QR 代碼產生器可簡化 2FA 的設定。 本文件提供 Razor 頁面與 MVC 應用程式指導，說明如何將 QR 代碼生成新增至 2FA 設定頁面。 如需適用 Blazor Web App 的指導，請參閱在 ASP.NET Core Blazor Web App 針對 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 服務。