Enable QR Code generation for authenticator apps in ASP.NET Core (Aktivieren der QR-Code-Generierung für TOTP-Authentifikator-Apps in ASP.NET Core)
ASP.NET Core wird mit Unterstützung für Authenticator-Anwendungen zur individuellen Authentifizierung bereitgestellt. Authenticator-Apps mit Zwei-Faktor-Authentifizierung (Two Factor Authentication, 2FA), die einen Algorithmus für ein zeitbasiertes Einmalkennwort (Time-based One-time Password Algorithm, TOTP) verwenden, sind der branchenweit empfohlene Ansatz für 2FA. 2FA mit TOTP wird gegenüber SMS 2FA bevorzugt. Eine Authenticator-App stellt einen 6 bis 8-stelligen Zifferncode bereit, den Benutzer eingeben müssen, nachdem sie ihren Benutzernamen und ihr Kennwort bestätigt haben. In der Regel wird eine Authenticator-App auf einem Smartphone installiert.
Warnung
Ein ASP.NET Core-TOTP-Code sollte geheim gehalten werden, da er vor Ablauf mehrmals zum Authentifizieren verwendet werden kann.
Die ASP.NET Core-Web-App-Vorlagen unterstützen Authentifikatoren, bieten jedoch keine Unterstützung für die Generierung von QR-Code. QR-Code-Generatoren erleichtern die Einrichtung von 2FA. Dieses Dokument enthält Anleitungen für Razor Pages und MVC-Apps zum Hinzufügen der QR-Code-Generierung zur 2FA-Konfigurationsseite. Anleitungen, die für Blazor Web-Apps gelten, finden Sie unter Aktivieren der QR-Code-Generierung für TOTP-Authentifikator-Apps in einer ASP.NET Core Blazor Web App.
Die ASP.NET Core-Web-App-Vorlagen unterstützen Authentifikatoren, bieten jedoch keine Unterstützung für die Generierung von QR-Code. QR-Code-Generatoren erleichtern die Einrichtung von 2FA. Dieses Dokument führt Sie durch das Hinzufügen der Generierung von QR-Code zur 2FA-Konfigurationsseite.
Die Zwei-Faktor-Authentifizierung erfolgt nicht über einen externen Authentifizierungsanbieter wie Google oder Facebook. Externe Anmeldungen werden durch jeden Mechanismus geschützt, den der externe Anmeldeanbieter bereitstellt. Beachten Sie beispielsweise, dass der Microsoft-Authentifizierungsanbieter einen Hardwareschlüssel oder einen anderen 2FA-Ansatz erfordert. Wenn die Standardvorlagen die „lokale“ 2FA erzwungen haben, müssen Benutzer zwei 2FA-Ansätze erfüllen, was kein häufig verwendetes Szenario ist.
Hinzufügen von QR-Codes zur 2FA-Konfigurationsseite
Diese Anweisungen verwenden qrcode.js
aus dem https://davidshimjs.github.io/qrcodejs/-Repository.
- Laden Sie die
qrcode.js
JavaScript-Bibliothek in denwwwroot\lib
-Ordner Ihres Projekts herunter. - Folgen Sie den Anweisungen im Gerüst Identity, um
/Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml
zu generieren. - Navigieren Sie in
/Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml
zumScripts
-Abschnitt am Ende der Datei:
@section Scripts {
@await Html.PartialAsync("_ValidationScriptsPartial")
}
- Erstellen Sie eine neue JavaScript-Datei namens
qr.js
inwwwroot/js
, und fügen Sie den folgenden Code zum Generieren von QR-Code hinzu:
window.addEventListener("load", () => {
const uri = document.getElementById("qrCodeData").getAttribute('data-url');
new QRCode(document.getElementById("qrCode"),
{
text: uri,
width: 150,
height: 150
});
});
- Aktualisieren Sie den
Scripts
-Abschnitt, um einen Verweis auf die zuvor heruntergeladeneqrcode.js
-Bibliothek hinzuzufügen. - Fügen Sie die
qr.js
-Datei mit dem Aufruf hinzu, um den QR-Code zu generieren:
@section Scripts {
@await Html.PartialAsync("_ValidationScriptsPartial")
<script type="text/javascript" src="~/lib/qrcode.js"></script>
<script type="text/javascript" src="~/js/qr.js"></script>
}
- Löschen Sie den Absatz mit der Verknüpfung zu diesen Anweisungen.
Führen Sie Ihre App aus, und vergewissern Sie sich, dass Sie den QR-Code scannen und den Code, den der Authentifikator liefert, validieren können.
Ändern des Websitenamens im QR-Code
Der Websitename im QR-Code stammt aus dem Projektnamen, den Sie beim ersten Erstellen Ihres Projekts auswählen. Sie können ihn ändern, indem Sie nach der GenerateQrCodeUri(string email, string unformattedKey)
-Methode in /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.cs
suchen.
Der Standardcode aus der Vorlage sieht wie folgt aus:
private string GenerateQrCodeUri(string email, string unformattedKey)
{
return string.Format(
AuthenticatorUriFormat,
_urlEncoder.Encode("Razor Pages"),
_urlEncoder.Encode(email),
unformattedKey);
}
Der zweite Parameter im Aufruf von string.Format
ist Ihr Websitename, der aus dem Namen Ihrer Lösung stammt. Er kann beliebig geändert werden, muss aber immer URL-codiert sein.
Verwenden einer anderen QR-Code-Bibliothek
Sie können die QR-Code-Bibliothek durch Ihre bevorzugte Bibliothek ersetzen. Der HTML-Code enthält ein qrCode
-Element, in dem Sie einen QR-Code platzieren können, unabhängig davon, welchen Mechanismus Ihre Bibliothek bereitstellt.
Die korrekt formatierte URL für den QR-Code ist unter verfügbar:
AuthenticatorUri
-Eigenschaft des Modells.data-url
-Eigenschaft imqrCodeData
-Element.
TOTP-Client- und Server-Zeitabweichung
Die TOTP-Authentifizierung (Time-based One-Time Password) hängt davon ab, dass sowohl der Server als auch das Authentifikatorgerät eine genaue Zeit haben. Token sind nur 30 Sekunden lang verfügbar. Wenn TOTP 2FA-Anmeldungen fehlschlagen, überprüfen Sie, ob die Serverzeit korrekt ist und vorzugsweise mit einem genauen NTP-Dienst synchronisiert wird.
ASP.NET Core