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

8 мин

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

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

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

Добавление службы QR-кодов

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

На панели терминала установите пакет NuGet QRCoder:
```
dotnet add package QRCoder --version 1.4.3
```
В области Обозреватель щелкните правой кнопкой мыши папку Службы и добавьте новый файл с именем 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. Размеры QR-кода определяются целочисленным значением, передаваемым в GetGraphic. В этом случае созданный QR-код состоит из блоков размером четыре пикселя в квадрате.

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

Откройте Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.cs и внесите следующие изменения.
1. Добавьте в класс EnableAuthenticatorModel следующее свойство для хранения строкового представления QR-кода в кодировке Base 64:
```
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)
    {
        NotFound($"Unable to load user with ID '{_userManager.GetUserId(User)}'.");
    }

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

    return Page();
}
```
  В предыдущем обработчике страниц внедрение параметра предоставляет ссылку на одноэлементную службу QRCodeService.
3. Добавьте следующий оператор using в начало файла, чтобы разрешить ссылку на QRCodeService. Сохраните изменения.
```
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.

В 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 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.

Убедитесь, что вы сохранили все изменения.
Выполните сборку и запуск приложения с помощью команды dotnet run.
Перейдите на сайт и войдите с помощью зарегистрированного пользователя, если вы еще не вошли в систему. Выберите Hello, [First name] [Last name]!, чтобы перейти на страницу управления профилями, и выберите Двухфакторная проверка подлинности.
Нажмите кнопку Add authenticator app (Добавить приложение для проверки подлинности).
Следуйте инструкциям на экране, чтобы зарегистрировать и проверить приложение проверки подлинности для этого пользователя.

Например, используя Microsoft Authenticator на Android, выполните следующие действия, чтобы добавить учетную запись в приложение:
1. Откройте приложение Microsoft Authenticator.
2. Выберите меню в виде вертикального многоточия в правом верхнем углу.
3. Выберите Add account (Добавить учетную запись).
4. Выберите Other account (Google, Facebook, etc.) (Другая учетная запись — Google, Facebook и т. д.).
5. Сосканируйте QR-код, как указано в инструкциях.
Введите код проверки, предоставленный приложением TOTP, в текстовом поле Код проверки.
Нажмите кнопку Проверить.

После успешной проверки на странице отображается баннер Your authenticator app has been verified (Ваше приложение для проверки подлинности проверено) и несколько кодов восстановления.
На вкладке SQL Server в VS Code щелкните правой кнопкой мыши базу данных RazorPagesPizza и выберите Создать запрос. Введите следующий запрос и нажмите клавиши CTRL+SHIFT+E, чтобы запустить его.
```
SELECT FirstName, LastName, Email, TwoFactorEnabled
FROM dbo.AspNetUsers
```
Для пользователя, выполнившего вход, выходные данные показывают, что TwoFactorEnabled столбец равен 1. Так как многофакторная проверка подлинности не была включена для другого зарегистрированного пользователя, значение столбца записи равно 0.
В веб-приложении выберите Выход, а затем снова войдите с тем же пользователем.
Введите код проверки из приложения проверки подлинности TOTP в текстовом поле Код Authenticator. Нажмите кнопку Log in (Войти).
Выберите ссылку Hello, [First name] [Last name]! (Здравствуйте, [Имя] [Фамилия]). Откройте вкладку Two-Factor Authentication (Двухфакторная проверка подлинности).

Так как Microsoft Authenticator был настроен, появляются следующие кнопки:
- Disable 2FA (Отключить двухфакторную проверку подлинности)
- Reset recovery codes (Сброс кодов восстановления)
- Set up authenticator app (Настроить приложение для проверки подлинности)
- Reset authenticator app (Сброс приложения для проверки подлинности)
На панели терминала в VS Code нажмите клавиши CTRL+C, чтобы остановить приложение.

Сводка

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

Продолжить

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

Добавление службы QR-кодов

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

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

Сводка

Обратная связь