Упражнение. Настройка многофакторной проверки подлинности

  • 10 мин

В предыдущем уроке вы узнали, как ASP.NET Core Identity реализует одноразовый пароль на основе времени (TOTP) для многофакторной проверки подлинности (MFA). В этом модуле вы настраиваете существующую форму приложения «Аутентификатор», чтобы предоставить QR-код, содержащий ключ регистрации.

Создание QR-кодов

Для создания QR-кода существует несколько стратегий. Пример в документации использует клиентскую библиотеку JavaScript. Однако в этом уроке сторонний пакет NuGet используется для создания QR-кода с помощью C# на сервере. Полученный QR-код вставляется в замещающий элемент HTML в виде строки в кодировке base-64.

Добавление СЛУЖБЫ QR-кода

Давайте создадим все, что необходимо для генерации QR-кодов на форме настройки приложения-аутентификатора.

  1. В терминале введите команду для установки пакета NuGet QRCoder.

    dotnet add package QRCoder --version 1.6.0

  2. В области обозревателя щелкните правой кнопкой мыши папку "Службы" и добавьте новый файл с именем QRCodeService.cs. Добавьте следующий код:

    using QRCoder;

namespace RazorPagesPizza.Services;
public class QRCodeService
{
    private readonly QRCodeGenerator _generator;

    public QRCodeService(QRCodeGenerator generator)
    {
        _generator = generator;
    }

    public string GetQRCodeAsBase64(string textToEncode)
    {
        QRCodeData qrCodeData = _generator.CreateQrCode(textToEncode, QRCodeGenerator.ECCLevel.Q);
        var qrCode = new PngByteQRCode(qrCodeData);

        return Convert.ToBase64String(qrCode.GetGraphic(4));
    }
}

    Предыдущий код:

    • Использует инъекцию конструктора для доступа к экземпляру класса QRCodeGenerator библиотеки.
    • Открывает доступ к методу GetQRCodeAsBase64 для возврата строки в формате кодировки Base-64. Целочисленное значение, передаваемое в GetGraphic, определяет размеры QR-кода. В этом случае созданный QR-код состоит из блоков размером четыре пикселя.

  3. В Program.cs добавьте выделенные строки:

    using Microsoft.AspNetCore.Identity;
using Microsoft.EntityFrameworkCore;
using RazorPagesPizza.Areas.Identity.Data;
using Microsoft.AspNetCore.Identity.UI.Services;
using RazorPagesPizza.Services;
using QRCoder;

var builder = WebApplication.CreateBuilder(args);
var connectionString = builder.Configuration.GetConnectionString("RazorPagesPizzaAuthConnection");
builder.Services.AddDbContext<RazorPagesPizzaAuth>(options => options.UseSqlServer(connectionString)); 
builder.Services.AddDefaultIdentity<RazorPagesPizzaUser>(options => options.SignIn.RequireConfirmedAccount = true)
      .AddEntityFrameworkStores<RazorPagesPizzaAuth>();

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddTransient<IEmailSender, EmailSender>();
builder.Services.AddSingleton(new QRCodeService(new QRCodeGenerator()));

var app = builder.Build();

    QRCodeService регистрируется в качестве однотонной службы в контейнере IoC в Program.cs.

Настройка многофакторной проверки подлинности

Теперь, когда вы можете создавать QR-коды, вы можете внедрить QR-код в форму приложения Configure Authenticator .

  1. Откройте Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.cs и внесите следующие изменения:

    1. Чтобы сохранить базовое строковое представление QR-кода в формате 64, добавьте следующее свойство в класс EnableAuthenticatorModel:

      public class EnableAuthenticatorModel : PageModel
{
    private readonly UserManager<RazorPagesPizzaUser> _userManager;
    private readonly ILogger<EnableAuthenticatorModel> _logger;
    private readonly UrlEncoder _urlEncoder;

    public string QrCodeAsBase64 { get; set; }

    2. Включите выделенные изменения в обработчик страницы OnGetAsync:

      public async Task<IActionResult> OnGetAsync([FromServices] QRCodeService qrCodeService)
{
    var user = await _userManager.GetUserAsync(User);
    if (user == null)
    {
        return NotFound($"Unable to load user with ID '{_userManager.GetUserId(User)}'.");
    }

    await LoadSharedKeyAndQrCodeUriAsync(user);
    QrCodeAsBase64 = qrCodeService.GetQRCodeAsBase64(AuthenticatorUri);

    return Page();
}

      В предыдущем обработчике страницы инъекция параметров предоставляет ссылку на службу-одиночку QRCodeService.

    3. Чтобы разрешить ссылку на QRCodeService, добавьте следующую инструкцию using в начало файла. Сохраните изменения.

      using RazorPagesPizza.Services;

    4. Включите выделенное изменение в метод GenerateQrCodeUri.

      private string GenerateQrCodeUri(string email, string unformattedKey)
{
    return string.Format(
        CultureInfo.InvariantCulture,
        AuthenticatorUriFormat,
        _urlEncoder.Encode("RazorPagesPizza"),
        _urlEncoder.Encode(email),
        unformattedKey);
}

      Это задает отображаемое имя ключа в приложении TOTP.

  2. В Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtmlвнесите следующие выделенные изменения и сохраните:

    <li>
    <p>Scan the QR Code or enter this key <kbd>@Model.SharedKey</kbd> into your two factor authenticator app. Spaces and casing do not matter.</p>
    <div class="alert alert-info">Learn how to <a href="https://go.microsoft.com/fwlink/?Linkid=852423">enable QR code generation</a>.</div>
    <div id="qrCode">
        <img alt="embedded QR code" src="data:image/png;base64,@Model.QrCodeAsBase64" />
    </div>
    <div id="qrCodeData" data-url="@Model.AuthenticatorUri"></div>
</li>

    Приведенная выше разметка внедряет изображение с кодировкой Base-64 на странице.

Проверка многофакторной проверки подлинности

Вы внесли все изменения, необходимые для QR-кода в форме приложения Configure Authenticator . Теперь можно легко протестировать функциональные возможности MFA.

  1. Убедитесь, что вы сохранили все изменения.

  2. Создайте и запустите приложение с помощью dotnet run.

  3. Перейдите на сайт и войдите с помощью зарегистрированного пользователя, если вы еще не вошли. Выберите Hello, [Имя] [Фамилия]! Ссылка, чтобы перейти на страницу управления профилями, а затем выберите двухфакторную проверку подлинности.

  4. Нажмите кнопку «Добавить приложение Authenticator».

  5. Следуйте инструкциям на экране, чтобы зарегистрировать и активировать приложение аутентификатора для этого пользователя.

    Например, используя Microsoft Authenticator в Android, выполните следующие действия, чтобы добавить учетную запись в приложение:

    1. Откройте приложение Microsoft Authenticator.
    2. Выберите меню kebab (вертикальный многоточие) в правом верхнем углу.
    3. Выберите "Добавить учетную запись".
    4. Выберите другую учетную запись (Google, Facebook и т. д.).
    5. Сканируйте QR-код, как указано.

  6. Введите код проверки, предоставленный приложением TOTP, в текстовом поле "Код проверки ".

  7. Нажмите кнопку "Проверить".

    После успешной проверки на странице отображается баннер 'Ваше приложение для аутентификации подтверждено' и предоставляются коды восстановления.

  8. На вкладке SQL Server в VS Code щелкните правой кнопкой мыши базу данных RazorPagesPizza и выберите новый запрос. Введите следующий запрос и нажмите клавиши CTRL+SHIFT+E , чтобы запустить его.

    SELECT FirstName, LastName, Email, TwoFactorEnabled
FROM dbo.AspNetUsers

    Для пользователя, выполнившего вход, выходные данные показывают, что столбец TwoFactorEnabled равен 1. Поскольку многофакторная аутентификация не включена для другого зарегистрированного пользователя, значение столбца записи — 0.

  9. В веб-приложении выберите "Выход" и снова войдите с помощью того же пользователя.

  10. Введите код проверки из приложения аутентификации TOTP в текстовом поле кода аутентификатора. Нажмите кнопку "Войти".

  11. Выберите Привет, [Имя] [Фамилия]!. Затем перейдите на вкладку "Двухфакторная проверка подлинности ".

    Так как Microsoft Authenticator настроен, отображаются следующие кнопки:

    • Отключение 2FA
    • Сброс кодов восстановления
    • Настройка приложения authenticator
    • Сбросить приложение аутентификатор

  12. В области терминала в VS Code нажмите клавиши CTRL+C , чтобы остановить приложение.

Сводка

В этом уроке вы добавили возможность создания QR-кода в форму приложения Configure Authenticator . В следующем уроке вы можете узнать об использовании удостоверения для хранения утверждений и применения политик авторизации.