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.

Die ASP.NET Core-Web-App-Vorlagen unterstützen Authentifikatoren, bieten jedoch keine Unterstützung für die Generierung von QR-Codes. 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 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.jsJavaScript-Bibliothek in den wwwroot\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 zum Scripts-Abschnitt am Ende der Datei:

@section Scripts {
    @await Html.PartialAsync("_ValidationScriptsPartial")
}

• Erstellen Sie eine neue JavaScript-Datei namens qr.js in wwwroot/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 heruntergeladene qrcode.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 im qrCodeData-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.