Övning – Konfigurera multifaktorautentisering

10 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 Konfigurera autentiseringsappen formuläret 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 autentiseringsappen.

Installera QRCoder NuGet-paketet i terminalfönstret:
```
dotnet add package QRCoder --version 1.6.0
```

I fönstret Explorer högerklickar du på mappen Services 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));
    }
}

Föregående kod:

Använder konstruktorinmatning för att få åtkomst till en instans av bibliotekets QRCodeGenerator-klass.
Exponerar GetQRCodeAsBase64-metoden för att returnera den base-64-kodade strängen. Heltalsvärdet som skickas till GetGraphic avgör QR-koddimensionerna. 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 registreras 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 Konfigurera autentiseringsappen formuläret.

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

Om du vill lagra QR-kodens base-64-strängrepresentation lägger du till följande egenskap i klassen EnableAuthenticatorModel :

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

    public string QrCodeAsBase64 { get; set; }

Införliva de markerade ändringarna i OnGetAsync sidhanterare:

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();
}

I föregående sidhanterare innehåller parameterinmatning en referens till QRCodeService singleton-tjänsten.

Lös referensen till QRCodeServicegenom att lägga till följande using-instruktion överst i filen. Spara ändringarna.
```
using RazorPagesPizza.Services;
```

Införliva den markerade ändringen i metoden GenerateQrCodeUri.

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.

I Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtmlgör du följande markerade ändringar och sparar:

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

Föregående kod 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 Konfigurera autentiseringsappen formuläret. Nu kan du enkelt testa MFA-funktionerna.

Se till 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 Lägg till autentiseringsapp.
Följ anvisningarna på skärmen för att registrera och verifiera din autentiseringsapp 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 menyn för kebab (lodrät ellips) i det övre högra hörnet.
3. Välj Lägg till konto.
4. Välj Annat konto (Google, Facebook osv.).
5. Skanna QR-koden enligt angivet.
Ange verifieringskoden som tillhandahålls av din TOTP-app i textrutan Verification Code.
Välj Verifiera.

När verifieringen är klar visar sidan en Din autentiseringsapp har verifierats banderoll och vissa återställningskoder.
På fliken SQL Server i VS Code högerklickar du på databasen RazorPagesPizza 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 kolumnen TwoFactorEnabled är lika med 1. Eftersom multifaktorautentisering inte är aktiverat för den andra registrerade användaren är postens kolumnvärde 0.
I webbappen väljer du Utloggningoch loggar sedan in igen med samma användare.
Ange verifieringskoden från TOTP-autentiseringsappen i textrutan Authenticator-kod. Välj knappen Logga in.
Välj Hello, [Förnamn] [Efternamn]!. Välj sedan fliken tvåfaktorautentisering.

Eftersom Microsoft Authenticator har konfigurerats visas följande knappar:
- Inaktivera 2FA-
- Återställ återställningskoder
- Konfigurera autentiseringsappen
- Återställ autentiseringsappen
I terminalfönstret i VS Code trycker du på Ctrl+C för att stoppa appen.

Sammanfattning