Включение создания QR-кодов для приложений проверки подлинности TOTP в ASP.NET Core

ASP.NET Core поставляется с поддержкой приложений authenticator для отдельной проверки подлинности. Два приложения проверки подлинности (2FA) с использованием однократного алгоритма пароля на основе времени (TOTP) — это рекомендуемый в отрасли подход для 2FA. 2FA, использующий TOTP, предпочтителен для SMS 2FA. Приложение authenticator предоставляет код от 6 до 8 цифр, которые пользователи должны ввести после подтверждения имени пользователя и пароля. Обычно приложение authenticator устанавливается на смартфоне.

Шаблоны веб-приложений ASP.NET Core поддерживают средства проверки подлинности, но не обеспечивают поддержку создания QR-кода. Генераторы QR-кода упрощают настройку 2FA. Этот документ содержит рекомендации по приложениям Pages и MVC по Razor добавлению создания QR-кода на страницу конфигурации 2FA. Инструкции, применимые к Blazor веб-приложения, см. в разделе "Включение создания QR-кода" для приложений проверки подлинности TOTP в ASP.NET Core Blazor Web App.

Шаблоны веб-приложений ASP.NET Core поддерживают средства проверки подлинности, но не обеспечивают поддержку создания QR-кода. Генераторы QR-кода упрощают настройку 2FA. В этом документе описано, как добавить создание QR-кода на страницу конфигурации 2FA.

Двухфакторная проверка подлинности не выполняется с помощью внешнего поставщика проверки подлинности, например Google или Facebook. Внешние имена входа защищены любым механизмом, предоставляемым внешним поставщиком входа. Рассмотрим, например, поставщик проверки подлинности Майкрософт требует аппаратного ключа или другого подхода 2FA. Если шаблоны по умолчанию применяли "local" 2FA, пользователям потребуется выполнить два подхода 2FA, что не является часто используемым сценарием.

Добавление QR-кодов на страницу конфигурации 2FA

Эти инструкции используются qrcode.js из репозитория https://davidshimjs.github.io/qrcodejs/ .

  • Скачайте библиотеку qrcode.js JavaScript в папку wwwroot\lib в проекте.
  • Следуйте инструкциям в шаблоне Identity , чтобы создать /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.
  • Найдите /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtmlScripts раздел в конце файла:
@section Scripts {
    @await Html.PartialAsync("_ValidationScriptsPartial")
}
  • Создайте новый вызываемый файл qr.jswwwroot/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-коде берется из имени проекта, выбранного при первоначальном создании проекта. Его можно изменить, найдите GenerateQrCodeUri(string email, string unformattedKey) метод в элементе /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.cs.

Код по умолчанию из шаблона выглядит следующим образом:

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-код с помощью любого механизма, предоставляемого библиотекой.

Правильно отформатированный URL-адрес QR-кода доступен в следующих параметрах:

  • AuthenticatorUri свойство модели.
  • data-url свойство в элементе qrCodeData .

Отклонение времени клиента и сервера TOTP

Проверка подлинности TOTP (одноразовый пароль на основе времени) зависит от сервера и устройства проверки подлинности с точным временем. Маркеры длились только в течение 30 секунд. Если не удается выполнить входы TOTP 2FA, проверка, что время сервера является точным и предпочтительно синхронизировано с точной службой NTP.