Freigeben über

Aktivieren der QR-Code-Generierung für TOTP-Authentifikator-Apps in einer ASP.NET Core Blazor Web App

Hinweis

Dies ist nicht die neueste Version dieses Artikels. Die aktuelle Version finden Sie in der .NET 9-Version dieses Artikels.

Wichtig

Diese Informationen beziehen sich auf ein Vorabversionsprodukt, das vor der kommerziellen Freigabe möglicherweise noch wesentlichen Änderungen unterliegt. Microsoft gibt keine Garantie, weder ausdrücklich noch impliziert, hinsichtlich der hier bereitgestellten Informationen.

Die aktuelle Version finden Sie in der .NET 9-Version dieses Artikels.

In diesem Artikel wird erläutert, wie Sie eine ASP.NET Core-Blazor Web App für die Zwei-Faktor-Authentifizierung (2FA) konfigurieren, wobei QR-Codes verwendet werden, die von zeitbasierten Einmalkennwort-Algorithmus (TOTP)-Authentifikator-Apps generiert werden.

Eine Einführung in die Zwei-Faktor-Authentifizierung (2FA) bei TOTP-Authentifikator-Apps finden Sie unter Aktivieren der QR-Code-Generierung für TOTP-Authentifikator-Apps in ASP.NET Core.

Die Anleitung in diesem Artikel bezieht sich entweder darauf, die App mit individuellen Konten für den Authentifizierungstyp der neuen App zu erstellen oder auf das Einbinden von Identity in einer vorhandenen App. Anleitungen zur Verwendung der .NET CLI anstelle von Visual Studio für das Einbinden von Identity in einer vorhandenen App finden Sie unter ASP.NET Core Codegenerator-Tool (`aspnet-codegenerator`).

Warnung

TOTP-Codes sollten geheim gehalten werden, da sie vor ihrem Ablauf mehrmals zur Authentifizierung verwendet werden können.

Hinzufügen von QR-Codes zur 2FA-Konfigurationsseite

Ein von der App erstellter QR-Code zum Einrichten von 2FA mit einer TOTP-Authentifikator-App muss von einer QR-Code-Bibliothek generiert werden.

Die Anleitung in diesem Artikel verwendet manuelbl/QrCodeGenerator, Sie können jedoch jede QR-Codegenerierungsbibliothek verwenden.

Fügen Sie einen Paketverweis für das NuGet-Paket Net.Codecrete.QrCodeGenerator hinzu.

Hinweis

Einen Leitfaden zum Hinzufügen von Paketen zu .NET-Apps finden Sie in Installieren und Verwalten von Paketen unter Workflow der Nutzung von Paketen (NuGet-Dokumentation). Überprüfen Sie unter NuGet.org, ob die richtige Paketversion verwendet wird.

Öffnen Sie die EnableAuthenticator-Komponente im Ordner Components/Account/Pages/Manage. Fügen Sie oben in der Datei unter der @page-Direktive eine @using-Direktive für den QrCodeGenerator-Namespace hinzu.

@using Net.Codecrete.QrCodeGenerator

Löschen Sie das <div>-Element, das die QR-Codeanweisungen und die beiden <div>-Elemente enthält, in denen der QR-Code angezeigt werden soll und in denen die QR-Code-Daten auf der Seite gespeichert sind:

- <div class="alert alert-info">
-     Learn how to <a href="https://go.microsoft.com/fwlink/?Linkid=852423">enable 
-     QR code generation</a>.
- </div>
- <div></div>
- <div data-url="@authenticatorUri"></div>

Ersetzen Sie die gelöschten Elemente durch das folgende Markup:

<div>
    <svg xmlns="http://www.w3.org/2000/svg" height="300" width="300" stroke="none" 
            version="1.1" viewBox="0 0 50 50">
        <rect width="300" height="300" fill="#ffffff" />
        <path d="@svgGraphicsPath" fill="#000000" />
    </svg>
</div>

Ändern Sie gleich innerhalb des öffnenden @code-Blocks die Variablendeklaration für authenticatorUri in svgGraphicsPath:

- private string? authenticatorUri;
+ private string? svgGraphicsPath;

Ändern Sie den Websitenamen in der GenerateQrCodeUri-Methode. Der Standardwert ist Microsoft.AspNetCore.Identity.UI. Ändern Sie den Wert in einen aussagekräftigen Websitenamen, den Benutzende in ihrer Authentifikator-App leicht identifizieren können. Entwickler legen in der Regel einen Websitenamen fest, der dem Namen des Unternehmens entspricht. Es wird empfohlen, die Länge des Websitenamens auf maximal 30 Zeichen zu beschränken, damit der Websitename auf schmalen Bildschirmen mobiler Geräte angezeigt werden kann.

Im folgenden Beispiel wird der Standardwert Microsoft.AspNetCore.Identity.UI in den Firmennamen Weyland-Yutani Corporation geändert (©1986 20th Century Studios Aliens).

In der GenerateQrCodeUri -Methode:

- UrlEncoder.Encode("Microsoft.AspNetCore.Identity.UI"),
+ UrlEncoder.Encode("Weyland-Yutani Corporation"),

Fügen Sie unten in der LoadSharedKeyAndQrCodeUriAsync-Methode das var-Schlüsselwort zu der Zeile hinzu, mit der authenticatorUri festlegt wird, sodass daraus eine implizit typisierte lokale Variable wird.

- authenticatorUri = GenerateQrCodeUri(email!, unformattedKey!);
+ var authenticatorUri = GenerateQrCodeUri(email!, unformattedKey!);

Fügen Sie am Ende der LoadSharedKeyAndQrCodeUriAsync-Methode die folgenden Codezeilen hinzu:

var qr = QrCode.EncodeText(authenticatorUri, QrCode.Ecc.Medium);
svgGraphicsPath = qr.ToGraphicsPath();

Führen Sie die App aus, und stellen Sie sicher, dass der QR-Code gescannt werden kann und dass der Code überprüft wird.

Warnung

Ein ASP.NET Core-TOTP-Code sollte geheim gehalten werden, da er vor seinem Ablaufdatum mehrmals erfolgreich zur Authentifizierung verwendet werden kann.

EnableAuthenticator Komponente in Referenzquelle

Die EnableAuthenticator Komponente kann in der Referenzquelle geprüft werden:

EnableAuthenticator Komponente in Referenzquelle

Hinweis

Dokumentationslinks zur .NET-Referenzquelle laden in der Regel den Standardbranch des Repositorys, der die aktuelle Entwicklung für das nächste Release von .NET darstellt. Um ein Tag für ein bestimmtes Release auszuwählen, wählen Sie diesen mit der Dropdownliste Switch branches or tags (Branches oder Tags wechseln) aus. Weitere Informationen finden Sie unter How to select a version tag of ASP.NET Core source code (dotnet/AspNetCore.Docs #26205) (Auswählen eines Versionstags von ASP.NET Core-Quellcode (dotnet/AspNetCore.Docs #26205)).

Fehler aufgrund einer TOTP-Zeitabweichung

Die TOTP-Authentifizierung hängt von einem genauen Zeitabgleich zwischen dem TOTP-Authentifizierungsgerät und dem Host der App ab. TOTP-Token sind nur für 30 Sekunden gültig. Wenn Anmeldungen aufgrund abgelehnter TOTP-Codes fehlschlagen, überprüfen Sie, ob die korrekte Uhrzeit eingehalten wird, vorzugsweise synchronisiert mit einem genauen NTP-Dienst.

Zusätzliche Ressourcen