允許為 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 代碼產生。
ASP.NET Core Web 應用程式範本支援驗證器,但不支援 QR 代碼產生。 QR 代碼產生器可簡化 2FA 的設定。 本文件會引導您將 QR 代碼產生新增至 2FA 設定頁面。
雙因素驗證不會使用外部驗證提供者進行,例如 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 服務。
意見反應
https://aka.ms/ContentUserFeedback。
即將登場:在 2024 年,我們將逐步淘汰 GitHub 問題作為內容的意見反應機制,並將它取代為新的意見反應系統。 如需詳細資訊,請參閱:提交並檢視相關的意見反應