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

  • 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-код в форму Настроить приложение-аутентификатор.

  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-кода на форме Настройка приложения аутентификатора. Теперь можно легко протестировать функциональные возможности MFA.

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

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

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

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

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

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

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

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

  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)
    • Сброс кодов восстановления
    • Настройте приложение аутентификатор
    • Сброс приложения для проверки подлинности

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

Сводка

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