Oefening: meervoudige verificatie configureren

10 minuten

In de vorige les hebt u geleerd hoe ASP.NET Core Identity eenmalige wachtwoord (TOTP) op basis van tijd implementeert voor meervoudige verificatie (MFA). In deze les past u het bestaande formulier authenticator-app configureren aan om een QR-code met de registratiesleutel op te geven.

QR-codes genereren

Er zijn meerdere strategieën om de QR-code te genereren. Een voorbeeld in de documentatie maakt gebruik van een JavaScript-bibliotheek aan de clientzijde. In deze les wordt echter een NuGet-pakket van derden gebruikt om de QR-code met C# op de server te genereren. De resulterende QR-codeafbeelding wordt in een tijdelijke aanduiding voor een HTML-element ingevoegd als een tekenreeks met Base 64-codering.

Een QR-codeservice toevoegen

Laten we alles bouwen wat u nodig hebt om QR-codes te genereren op het formulier Authenticator-app configureren.

Installeer het QRCoder NuGet-pakket in het terminalvenster:
```
dotnet add package QRCoder --version 1.6.0
```
Klik in het deelvenster Explorer met de rechtermuisknop op de map Services en voeg een nieuw bestand toe met de naam QRCodeService.cs. Voeg de volgende code toe:
```
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));
    }
}
```
Met de voorgaande code wordt:
- Maakt gebruik van constructorinjectie om toegang te krijgen tot een exemplaar van de klasse QRCodeGenerator van de bibliotheek.
- Stelt de methode GetQRCodeAsBase64 beschikbaar voor het retourneren van de tekenreeks met Base 64-codering. De waarde die is doorgegeven aan GetGraphic het gehele getal, bepaalt de dimensies van de QR-code. In dit geval bestaat de gegenereerde QR-code uit blokken met de grootte van vier pixels.

Voeg in Program.cs de gemarkeerde regels toe:

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 is geregistreerd als een singleton-service in de IoC-container binnen Program.cs.

Meervoudige verificatie aanpassen

Nu u QR-codes kunt genereren, kunt u een QR-code insluiten in het formulier Authenticator-app configureren.

Open Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.cs en breng de volgende wijzigingen aan:

Als u de basis-64-tekenreeksweergave van de QR-code wilt opslaan, voegt u de volgende eigenschap toe aan de EnableAuthenticatorModel klasse:

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

    public string QrCodeAsBase64 { get; set; }

Neem de gemarkeerde wijzigingen op in de paginahandler van 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();
}

In deze paginahandler zorgt de parameterinjectie voor een verwijzing naar de singletonservice QRCodeService.

Als u de verwijzing wilt QRCodeServiceoplossen, voegt u de volgende using instructie toe aan het begin van het bestand. Sla uw wijzigingen op.
```
using RazorPagesPizza.Services;
```

Neem de gemarkeerde wijziging in de GenerateQrCodeUri methode op.

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

Hiermee stelt u de weergavenaam voor de sleutel in uw TOTP-app in.

Breng in Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml de volgende gemarkeerde wijzigingen aan en sla deze op:

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

Met de voorgaande markeringen wordt de afbeelding met Base 64-codering ingesloten in de pagina.

Meervoudige verificatie testen

U hebt alle wijzigingen aangebracht die nodig zijn voor een QR-code in het formulier Authenticator-app configureren. U kunt nu eenvoudig de MFA-functionaliteit testen.

Zorg ervoor dat u al uw wijzigingen hebt opgeslagen.
Bouw en voer de app uit met dotnet run.
Navigeer naar de site en meld u aan met een van beide geregistreerde gebruikers als u nog niet bent aangemeld. Selecteer Hallo, [Voornaam] [Achternaam]! koppeling om naar de profielbeheerpagina te navigeren en selecteer vervolgens Tweeledige verificatie.
Selecteer de knop Authenticator-app toevoegen.
Volg de instructies op het scherm om uw Authenticator-app voor deze gebruiker te registreren en te controleren.

Voer bijvoorbeeld de volgende stappen uit om het account toe te voegen aan de app met Behulp van Microsoft Authenticator op Android:
1. Open de app Microsoft Authenticator.
2. Selecteer in de rechterbovenhoek het verticale beletselteken.
3. Selecteer Account toevoegen.
4. Selecteer Een ander account (Google, Facebook, enzovoort).
5. Scan de QR-code zoals aangegeven.
Voer de verificatiecode die door uw TOTP-app wordt aangeboden in het tekstvak Verificatiecode in.
Selecteer Verifiëren.

Wanneer de verificatie is geslaagd, wordt de banner Uw Authenticator-app is geverifieerd weergegeven op de pagina, plus een aantal herstelcodes.
Klik op het tabblad SQL Server in VS Code met de rechtermuisknop op de RazorPagesPizza-database en selecteer Nieuwe query. Voer de volgende query in en druk op Ctrl+Shift+E om deze uit te voeren.
```
SELECT FirstName, LastName, Email, TwoFactorEnabled
FROM dbo.AspNetUsers
```
Voor de aangemelde gebruiker geeft de uitvoer aan dat de TwoFactorEnabled kolom gelijk is aan 1. Omdat meervoudige verificatie niet is ingeschakeld voor de andere geregistreerde gebruiker, is 0de kolomwaarde van de record.
Selecteer Afmelden in de web-app en meld u opnieuw aan met dezelfde gebruiker.
Voer de verificatiecode uit de TOTP Authenticator-app in het tekstvak Authenticator-code in. Selecteer de knop Aanmelden.
Selecteer de koppeling Hallo, [voornaam] [achternaam]!. Selecteer vervolgens het tabblad Tweeledige verificatiemethode.

Omdat Microsoft Authenticator is ingesteld, worden de volgende knoppen weergegeven:
- 2FA uitschakelen
- Herstelcodes opnieuw instellen
- Authenticator-app instellen
- Authenticator-app opnieuw instellen
Druk in het terminalvenster in VS Code op Ctrl+C om de app te stoppen.

Samenvatting