Övning – Konfigurera multifaktorautentisering

8 minuter

I föregående lektion lärde du dig hur ASP.NET Core Identity implementerar tidsbaserat engångslösenord (TOTP) för multifaktorautentisering (MFA). I den här lektionen anpassar du det befintliga formuläret Konfigurera autentiseringsapp för att tillhandahålla en QR-kod som innehåller registreringsnyckeln.

Generera QR-koder

Det finns flera strategier för att generera QR-koden. Ett exempel i dokumentationen använder ett JavaScript-bibliotek på klientsidan. I den här lektionen används dock ett NuGet-paket från tredje part för att generera QR-koden med C# på servern. Den resulterande QR-kodbilden matas in i ett HTML-platshållarelement som en base-64-kodad sträng.

Lägga till en QR-kodtjänst

Nu ska vi skapa allt du behöver för att generera QR-koder i formuläret Konfigurera autentiseringsapp .

Installera NuGet-paketet i QRCoder terminalfönstret:
```
dotnet add package QRCoder --version 1.4.3
```
I utforskarfönstret högerklickar du på mappen Tjänster och lägger till en ny fil med namnet QRCodeService.cs. Lägg till följande kod:
```
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));
    }
}
```
Koden ovan:
- Använder konstruktorinmatning för att få åtkomst till en instans av bibliotekets QRCodeGenerator-klass.
- Exponerar metoden GetQRCodeAsBase64 för att returnera den base-64-kodade strängen. QR-koddimensionerna fastställs av heltalsvärdet som överförts till GetGraphic. I det här fallet består den genererade QR-koden av block med storleken fyra bildpunkter i kvadrat.

Lägg till de markerade raderna i 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 är registrerad som en singleton-tjänst i IoC-containern i Program.cs.

Anpassa multifaktorautentisering

Nu när du kan generera QR-koder kan du bädda in en QR-kod i formuläret Konfigurera autentiseringsapp .

Öppna Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.cs och gör följande ändringar:

Lägg till följande egenskap i klassen EnableAuthenticatorModel för att lagra QR-kodens base-64-strängrepresentation:

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

    public string QrCodeAsBase64 { get; set; }

Inkludera de markerade ändringarna i sidhanteraren 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();
}

I sidhanteraren ovan tillhandahåller parameterinmatning en referens till QRCodeService-singleton-tjänsten.

Lägg till följande using-instruktion överst i filen för att lösa referensen till QRCodeService. Spara ändringarna.
```
using RazorPagesPizza.Services;
```

Införliva den markerade ändringen i GenerateQrCodeUri metoden.

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

Detta anger visningsnamnet för nyckeln i TOTP-appen.

Gör följande markerade ändringar och spara i 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>

Markeringen ovan bäddar in den base-64-kodade bilden på sidan.

Testa multifaktorautentisering

Du har gjort alla ändringar som behövs för en QR-kod i formuläret Konfigurera autentiseringsapp . Nu kan du enkelt testa MFA-funktionerna.

Kontrollera att du har sparat alla dina ändringar.
Skapa och kör appen med dotnet run.
Gå till webbplatsen och logga in med någon av de registrerade användarna, om du inte redan är inloggad. Välj Hello, [Förnamn] [Efternamn]! länk för att navigera till profilhanteringssidan och välj sedan Tvåfaktorautentisering.
Välj knappen Add authenticator app (Lägg till autentiseringsapp).
Följ instruktionerna på skärmen för att registrera och verifiera autentiseringsappen för den här användaren.

Om du till exempel använder Microsoft Authenticator på Android följer du dessa steg för att lägga till kontot i appen:
1. Öppna Microsoft Authenticator-appen.
2. Välj kebabmenyn (vertikal ellips) uppe till höger.
3. Välj Add account (Lägg till konto).
4. Välj Other account (Google, Facebook, etc.) (Annat konto (Google, Facebook osv.)).
5. Skanna QR-koden enligt instruktionen.
Ange verifieringskoden som tillhandahålls av din TOTP-app i textrutan Verification Code (Verifieringskod).
Välj Verify (Verifiera).

När verifieringen är klar visas på sidan meddelandet Your authenticator app has been verified (Din autentiseringsapp har verifierats) och några återställningskoder.
På fliken SQL Server i VS Code högerklickar du på RazorPagesPizza-databasen och väljer Ny fråga. Ange följande fråga och tryck på Ctrl+Skift+E för att köra den.
```
SELECT FirstName, LastName, Email, TwoFactorEnabled
FROM dbo.AspNetUsers
```
För den inloggade användaren visar utdata att TwoFactorEnabled kolumnen är lika med 1. Eftersom multifaktorautentisering inte har aktiverats för den andra registrerade användaren är postens kolumnvärde 0.
I webbappen väljer du Logga ut och loggar sedan in igen med samma användare.
Ange verifieringskoden från TOTP-autentiseringsappen i textrutan Authenticator code (Autentiseringskod). Välj knappen Log in (Logga in).
Välj Hello, [Förnamn] [Efternamn]!. Välj sedan fliken Two-factor authentication (Tvåfaktorautentisering).

Eftersom Microsoft Authenticator har konfigurerats visas följande knapper:
- Disable 2FA (Inaktivera tvåfaktorautentisering)
- Reset recovery codes (Återställ återställningskoder)
- Set up authenticator app (Konfigurera autentiseringsapp)
- Reset authenticator app (Återställ autentiseringsapp)
I terminalfönstret i VS Code trycker du på Ctrl+C för att stoppa appen.

Sammanfattning

I den här lektionen har du lagt till möjligheten att generera en QR-kod i formuläret Konfigurera autentiseringsapp . I nästa lektion kan du lära dig att använda Identity för att lagra anspråk och tillämpa auktoriseringsprinciper.

Fortsätt