Cvičení – konfigurace vícefaktorového ověřování

10 min

V předchozí lekci jste zjistili, jak ASP.NET Core Identity implementuje jednorázové heslo (TOTP) založené na čase pro vícefaktorové ověřování (MFA). V této lekci přizpůsobíte existující Konfiguraci ověřovací aplikace formulář pro zadání kódu QR, který obsahuje registrační klíč.

Generování kódů QR

Existuje několik strategií pro generování kódu QR. Příklad v dokumentaci používá klientskou javascriptovou knihovnu . V této jednotce se ale k vygenerování kódu QR na serveru pomocí C# používá balíček NuGet třetí strany. Výsledný obrázek kódu QR se vloží do zástupného prvku HTML jako řetězec kódovaný v base-64.

Přidání služby kódu QR

Pojďme vytvořit vše, co potřebujete k vygenerování kódů QR ve formuláři Konfigurace ověřovací aplikace.

V podokně terminálu nainstalujte balíček QRCoder NuGet:
```
dotnet add package QRCoder --version 1.6.0
```
V podokně Explorer klikněte pravým tlačítkem myši na složku Services a přidejte nový soubor s názvem QRCodeService.cs. Přidejte následující kód:
```
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));
    }
}
```
Předchozí kód:
- Použitím injekce konstruktoru získá přístup k instanci třídy QRCodeGenerator z knihovny.
- Zpřístupňuje GetQRCodeAsBase64 metodu pro vrácení řetězce s kódováním base-64. Celočíselná hodnota předaná GetGraphic určuje rozměry kódu QR. V tomto případě se vygenerovaný kód QR skládá z bloků o velikosti čtyř pixelů čtverců.

V Program.cspřidejte zvýrazněné řádky:

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 je v Program.cs vkontejneru IoC zaregistrována jako singletonová služba.

Přizpůsobení vícefaktorového ověřování

Teď, když můžete generovat kódy QR, můžete kód QR vložit do formuláře Konfigurovat ověřovací aplikaci.

Otevřete Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.cs a proveďte následující změny:

Chcete-li uložit řetězcovou reprezentaci kódu QR base-64, přidejte do třídy EnableAuthenticatorModel následující vlastnost:

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

    public string QrCodeAsBase64 { get; set; }

Začleňte zvýrazněné změny do obslužné rutiny stránky 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();
}

Injektáž parametrů v předchozí obslužné rutině stránky poskytuje odkaz na službu QRCodeService singleton.

Chcete-li vyřešit odkaz na QRCodeService, přidejte do horní části souboru následující příkaz using. Uložte změny.
```
using RazorPagesPizza.Services;
```

Začleňte zvýrazněnou změnu do metody GenerateQrCodeUri.

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

Tím se nastaví zobrazovaný název klíče v aplikaci TOTP.

V Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtmlproveďte následující zvýrazněné změny a uložte:

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

Předchozí kód vloží na stránku zakódovaný obrázek base-64.

Testování vícefaktorového ověřování

Provedli jste všechny změny potřebné pro kód QR ve formuláři Konfigurace ověřovací aplikace. Teď můžete snadno otestovat funkčnost vícefaktorového ověřování.

Ujistěte se, že jste uložili všechny změny.
Sestavte a spusťte aplikaci pomocí dotnet run.
Přejděte na web a přihlaste se pomocí některého registrovaného uživatele, pokud ještě nejste přihlášení. Vyberte Hello, [Jméno] [Příjmení]! Klikněte na odkaz a přejděte na stránku pro správu profilu, poté vyberte Dvoufaktorové ověřování.
Vyberte tlačítko Přidat ověřovací aplikaci.
Podle pokynů na obrazovce zaregistrujte a ověřte ověřovací aplikaci pro tohoto uživatele.

Pokud například používáte Microsoft Authenticator v Androidu, přidejte účet do aplikace takto:
1. Otevřete aplikaci Microsoft Authenticator.
2. V pravém horním rohu vyberte nabídku kebabu (svislé tři tečky).
3. Vyberte Přidat účet.
4. Vyberte Jiný účet (Google, Facebook atd.).
5. Naskenujte kód QR, jak je uvedeno.
Do textového pole Ověřovací kód zadejte ověřovací kód poskytnutý vaší aplikací TOTP.
Vyberte Ověřit.

Po úspěšném ověření se na stránce zobrazí Ověřovací aplikace byla ověřena banner a některé kódy obnovení.
Na kartě SQL Server v nástroji VS Code klikněte pravým tlačítkem na databázi RazorPagesPizza a vyberte Nový dotaz. Zadejte následující dotaz a stisknutím klávesy Ctrl+Shift+E ho spusťte.
```
SELECT FirstName, LastName, Email, TwoFactorEnabled
FROM dbo.AspNetUsers
```
Pro přihlášeného uživatele výstup ukazuje, že TwoFactorEnabled sloupec je roven 1. Vzhledem k tomu, že pro jiného registrovaného uživatele není povolené vícefaktorové ověřování, hodnota sloupce záznamu je 0.
Ve webové aplikaci vyberte Odhlásita pak se znovu přihlaste pomocí stejného uživatele.
Do textového pole Ověřovací kód zadejte ověřovací kód z ověřovací aplikace TOTP. Vyberte tlačítko Přihlásit se.
Vyberte Hello, [Jméno] [Příjmení]!. Pak vyberte záložku dvoufaktorové ověřování.

Vzhledem k tomu, že je aplikace Microsoft Authenticator nastavená, zobrazí se následující tlačítka:
- Zakázat dvoufaktorové ověřování
- resetování kódů obnovení
- Nastavte ověřovací aplikaci
- Resetování ověřovací aplikace
V podokně terminálu v editoru VS Code stisknutím klávesy Ctrl+C aplikaci zastavte.

Shrnutí