啟用 ASP.NET Core 中 TOTP 認證器應用程式的 QR 碼產生

ASP.NET Core 支援用於使用者驗證的認證器應用程式。 雙重驗證（2FA）驗證應用程式採用基於時間的一次性密碼演算法（TOTP），這是業界推薦的 2FA 方式。 （基於 TOTP 的雙重驗證比簡訊雙重驗證更受青睞。）使用者通常會在智慧型手機上安裝認證器應用程式。 應用程式提供一個 6 到 8 位數的代碼，使用者在確認用戶名和密碼後輸入。

警告

請保密 ASP.NET Core 的 TOTP 程式碼。 使用者可多次輸入驗證碼，並在驗證碼過期前成功驗證。

ASP.NET Core 網頁應用程式範本支援認證器，但不支援 QR 碼產生。 QR 碼產生器讓設定 2FA 變得更簡單。 本文為 Pages 和 MVC 應用程式提供如何在 2FA 配置頁面新增 Razor生成的指引。

ASP.NET Core 網頁應用程式範本支援認證器，但不支援 QR 碼產生。 QR 碼產生器讓設定 2FA 變得更簡單。 本文將引導你如何在雙重驗證設定頁面新增 QR 碼 產生功能。

雙重驗證並非透過外部認證提供者（如 Google 或 Facebook）來實現。 外部登入會受到外部驗證提供者所支援的任何機制保護。 例如，Microsoft 認證提供者需要硬體金鑰或其他雙重驗證方式。 當預設範本要求網頁應用程式與外部認證提供者皆需雙重驗證時，使用者需同時滿足兩種雙重驗證方式。 要求兩個 2FA 方法偏離已建立的安全性做法，其典型做法是依賴單一強健的 2FA 方法來進行驗證。

如果你使用的是 ASP.NET Core 8.0 或更新版本的 Blazor，你可以在以下文章中找到類似的指引：

在 2FA 設定頁面新增 QR 碼

以下指令使用了該庫的 https://davidshimjs.github.io/qrcodejs/ 檔案。

  1. 將 'qrcode.js'JavaScript 函式庫 下載到你的專案中的 wwwroot\lib 資料夾。

  2. 依照 Scaffold 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 碼中的網站名稱來自你建立專案時所選擇的專案名稱。 你可以在 /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 碼網址：

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

請檢查 TOTP 用戶端和伺服器的時間

TOTP (以時間為基礎的單次密碼) 驗證取決於伺服器和驗證器裝置有精確的時間。 令牌僅有效 30 秒。 若 TOTP 2FA 登入失敗，請確認伺服器時間準確，且最好與準確的 NTP 服務同步。

相關內容

  • Last updated on