Übung: Konfigurieren der mehrstufigen Authentifizierung

8 Minuten

In der vorherigen Lerneinheit haben Sie erfahren, wie ASP.NET Core Identity zeitbasiertes Einmalkennwort (Time-Based One-Time Password, TOTP) für die mehrstufige Authentifizierung (Multi-Factor Authentication, MFA) implementiert. In dieser Lerneinheit passen Sie das vorhandene Formular zum Konfigurieren einer Authentifikator-App an, um einen QR-Code zur Verfügung zu stellen, der den Registrierungsschlüssel enthält.

Generieren von QR-Codes

Zum Generieren des QR-Codes gibt es mehrere Strategien. Ein Beispiel in der Dokumentation umfasst die Verwendung einer clientseitigen JavaScript-Bibliothek. In dieser Lerneinheit wird jedoch ein NuGet-Paket eines Drittanbieters verwendet, um den QR-Code mit C# auf dem Server zu generieren. Das daraus resultierende QR-Codebild wird als Base64-codierte Zeichenfolge in ein HTML-Platzhalterelement eingefügt.

Hinzufügen eines QR-Codediensts

Lassen Sie uns nun all das erstellen, was Sie zum Generieren von QR-Codes im Formular zum Konfigurieren einer Authentifikator-App benötigen.

Installieren Sie im Terminalbereich das NuGet-Paket QRCoder:
```
dotnet add package QRCoder --version 1.4.3
```
Klicken Sie im Explorer-Bereich mit der rechten Maustaste auf den Ordner Dienste, und fügen Sie eine neue Datei namens QRCodeService.cs hinzu. Fügen Sie den folgenden Code hinzu:
```
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));
    }
}
```
Der vorangehende Code:
- verwendet die Konstruktorinjektion, um Zugriff auf eine Instanz der QRCodeGenerator-Klasse der Bibliothek zu erhalten.
- stellt die GetQRCodeAsBase64-Methode zur Verfügung, um die Base64-codierte Zeichenfolge zurückzugeben. Die Maße des QR-Codes werden vom ganzzahligen Wert bestimmt, der an GetGraphic übergeben wird. In diesem Fall besteht der generierte QR-Code aus Blöcken, die aus vier Pixeln im Quadrat bestehen.

Fügen Sie in Program.cs die hervorgehobenen Zeilen hinzu:

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 wird im IoC-Container in Program.cs als Singletondienst registriert.

Anpassen der mehrstufigen Authentifizierung

Nachdem Sie jetzt QR-Codes generieren können, können Sie einen QR-Code in das Formular zum Konfigurieren einer Authentifikator-App einbetten.

Öffnen Sie Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.cs, und nehmen Sie die folgenden Änderungen vor:

Fügen Sie die folgende Eigenschaft zur EnableAuthenticatorModel-Klasse hinzu, um die Base64-Zeichenfolgendarstellung des QR-Codes zu speichern:

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

    public string QrCodeAsBase64 { get; set; }

Fügen Sie die hervorgehobenen Änderungen in den Seitenhandler OnGetAsync ein:

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

Im vorangehenden Seitenhandler stellt die Parameterinjektion einen Verweis auf den Singletondienst QRCodeService bereit.

Fügen Sie am Anfang der Datei die folgende using-Anweisung hinzu, um den Verweis auf QRCodeService aufzulösen. Speichern Sie die Änderungen.
```
using RazorPagesPizza.Services;
```

Fügen Sie die hervorgehobene Änderung in die GenerateQrCodeUri-Methode ein.

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

Dadurch wird der Anzeigename für den Schlüssel in Ihrer TOTP-App festgelegt.

Nehmen Sie die folgenden hervorgehobenen Änderungen in Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml vor, und speichern Sie diese:

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

Mit dem obigen Markup wird das Base64-codierte Bild in die Seite eingebettet.

Testen der mehrstufigen Authentifizierung

Sie haben alle Änderungen vorgenommen, die für einen QR-Code im Formular zum Konfigurieren einer Authentifikator-App erforderlich sind. Jetzt können Sie die MFA-Funktionalität ganz einfach testen.

Vergewissern Sie sich, dass Sie alle Änderungen gespeichert haben.
Erstellen Sie die App, und führen Sie sie mit dotnet run aus.
Navigieren Sie zur Website, und melden Sie sich mit einem registrierten Benutzer an, wenn Sie noch nicht angemeldet sind. Wählen Sie den Link Hallo [Vorname] [Nachname], aus, um die Profilverwaltungsseite aufzurufen, und klicken Sie dann auf Zweistufige Authentifizierung.
Klicken Sie auf Add authenticator app (Authentifikator-App hinzufügen).
Befolgen Sie die angezeigten Anweisungen, um sich zu registrieren und die Authentifikator-App für diesen Benutzer zu verifizieren.

Wenn Sie beispielsweise die Microsoft Authenticator-App unter Android verwenden, führen Sie die folgenden Schritte zum Hinzufügen des Kontos zur App aus:
1. Öffnen Sie die Microsoft Authenticator-App.
2. Klicken Sie oben rechts auf die vertikalen Auslassungspunkte.
3. Klicken Sie auf Add Account (Konto hinzufügen).
4. Klicken Sie auf Other account (Google, Facebook, etc.) (Anderes Konto (Google, Facebook usw.)).
5. Scannen Sie den QR-Code wie angegeben.
Geben Sie den von Ihrer TOTP-App bereitgestellten Verifizierungscode in das Textfeld Verification Code (Verifizierungscode) ein.
Klicken Sie auf Verify (Verifizieren).

Bei erfolgreicher Verifizierung zeigt die Seite den Banner Your authenticator app has been verified (Ihre Authentifikator-App wurde verifiziert) und Wiederherstellungscodes an.
Klicken Sie auf der Registerkarte SQL Server in VS Code mit der rechten Maustaste auf die Datenbank RazorPagesPizza, und wählen Sie Neue Abfrage aus. Geben Sie die folgende Abfrage ein, und drücken Sie STRG+UMSCHALTASTE+E,um sie auszuführen.
```
SELECT FirstName, LastName, Email, TwoFactorEnabled
FROM dbo.AspNetUsers
```
Für den angemeldeten Benutzer zeigt die Ausgabe an, dass die TwoFactorEnabled-Spalte 1 entspricht. Da die mehrstufige Authentifizierung nicht für den anderen registrierten Benutzer aktiviert wurde, lautet der Spaltenwert des Eintrags 0.
Wählen Sie in der Web-App Abmelden aus, und melden Sie sich dann noch mal mit demselben Benutzerkonto an.
Geben Sie den Verifizierungscode der TOTP-Authentifikator-App in das Textfeld Authenticator code (Authentifizierungscode) ein. Klicken Sie auf Log in (Anmelden).
Klicken Sie auf Hello, [Vorname] [Nachname]!. Wählen Sie dann die Registerkarte Two-factor authentication (Zweistufige Authentifizierung) aus.

Da die Microsoft Authenticator-App eingerichtet wurde, werden die folgenden Schaltflächen angezeigt:
- Disable 2FA (Zweistufige Authentifizierung deaktivieren)
- Reset recovery codes (Wiederherstellungscodes zurücksetzen)
- Set up authenticator app (Authentifikator-App einrichten)
- Reset authenticator app (Authentifikator-App zurücksetzen)
Drücken Sie im Terminalbereich in VS Code STRG+C, um die App zu beenden.

Zusammenfassung

In dieser Einheit haben Sie die Möglichkeit, einen QR-Code zu generieren, zum Formular zum Konfigurieren einer Authentifikator-App hinzugefügt. In der nächsten Lerneinheit erfahren Sie, wie Sie Identity verwenden, um Ansprüche zu speichern und Autorisierungsrichtlinien anzuwenden.

Weiter

Generieren von QR-Codes

Hinzufügen eines QR-Codediensts

Anpassen der mehrstufigen Authentifizierung

Testen der mehrstufigen Authentifizierung

Zusammenfassung

Feedback