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

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

Двухфакторная проверка подлинности не происходит с помощью внешнего поставщика проверки подлинности, например Google или Facebook. Внешние входы защищены любым механизмом, поддерживаемым внешним поставщиком проверки подлинности. Например, поставщик проверки подлинности Microsoft требует аппаратного ключа или другого подхода 2FA. Если в шаблонах по умолчанию требуется 2FA для веб-приложения и внешнего поставщика проверки подлинности, пользователям необходимо выполнить два подхода 2FA. Требование двух подходов 2FA отклоняется от установленных методик безопасности, которые обычно используют один надежный метод 2FA для проверки подлинности.

Если вы работаете с Blazor в ASP.NET Core 8.0 или более поздней версии, вы можете найти аналогичные рекомендации в следующих статьях:

• Включение создания QR-кода для приложений проверки подлинности TOTP в ASP.NET Core Blazor Web App
• Включение создания QR-кодов для приложений-аутентификаторов TOTP в ASP.NET Core Blazor WebAssembly с ASP.NET Core Identity

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

Следующие инструкции используют файлqrcode.js из репозитория https://davidshimjs.github.io/qrcodejs/ .

1. Скачайте библиотеку JavaScript 'qrcode.js' в папку wwwroot\lib вашего проекта.

2. Следуйте инструкциям в шаблоне Identity , чтобы создать файл /Areas/Pages/Account/IdentityManage/EnableAuthenticator.cshtml .

3. В файле /Areas/Pages/Account/IdentityManage/EnableAuthenticator.cshtml найдите Scripts раздел в конце файла:

   @section Scripts {
      <partial name="_ValidationScriptsPartial" />
   }
   

4. Создайте файл JavaScript с именем qr.js в папке wwwroot/js и добавьте следующий код, который создает 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.js с вызовом, который создает QR-код:

   @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-коде поступает из имени проекта, выбранного при создании проекта. Это можно изменить, найдя метод 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, убедитесь, что время на сервере указано правильно и, по возможности, синхронизировано с точным NTP-сервисом.

Связанный контент

• Включение создания QR-кода для приложений проверки подлинности TOTP в ASP.NET Core Blazor Web App
• Включение создания QR-кодов для приложений-аутентификаторов TOTP в ASP.NET Core Blazor WebAssembly с ASP.NET Core Identity