Aktivieren der QR-Codegenerierung für TOTP-Authentifizierungs-Apps in ASP.NET Core

ASP.NET Core wird mit Unterstützung für Authentifizierungsanwendungen für einzelne Authentifizierungen ausgeliefert. Zwei Faktorauthentifizierungs-Apps (2FA) authenticator-Apps, die einen Zeitbasierten Kennwortalgorithmus (TOTP) verwenden, sind der industrie empfohlene Ansatz für 2FA. 2FA-Verwendung von TOTP wird für SMS 2FA bevorzugt. Eine Authentifizierungs-App stellt einen 6 bis 8-stelligen Code bereit, den Benutzer eingeben müssen, nachdem sie ihren Benutzernamen und ihr Kennwort bestätigt haben. Normalerweise wird eine Authentifizierungs-App auf einem Smartphone installiert.

Die ASP.NET Core Web-App-Vorlagen unterstützen Authentifizierer, bieten jedoch keine Unterstützung für die QR-Codegenerierung. QR-Code-Generatoren erleichtern die Einrichtung von 2FA. Dieses Dokument führt Sie durch das Hinzufügen der QR-Codegenerierung zur Seite der 2FA-Konfiguration.

Die zweistufige Authentifizierung erfolgt nicht mit einem externen Authentifizierungsanbieter, z. B. Google oder Facebook. Externe Anmeldungen sind durch jeden Mechanismus geschützt, den der externe Anmeldeanbieter bereitstellt. Berücksichtigen Sie beispielsweise, dass der Microsoft-Authentifizierungsanbieter einen Hardwareschlüssel oder einen anderen 2FA-Ansatz erfordert. Wenn die Standardvorlagen "local" 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 Seite der 2FA-Konfiguration

Diese Anweisungen werden aus dem https://davidshimjs.github.io/qrcodejs/ Repo verwendetqrcode.js.

  • Laden Sie die qrcode.js JavaScript-Bibliothek in den wwwroot\lib Ordner in Ihrem Projekt herunter.
  • Folgen Sie den Anweisungen in Gerüst Identity , um zu generieren /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.
  • /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtmlSuchen Sie Scripts im Abschnitt am Ende der Datei nach:
@section Scripts {
    @await Html.PartialAsync("_ValidationScriptsPartial")
}
  • Erstellen Sie eine neue JavaScript-Datei namens In qr.jswwwroot/js , und fügen Sie den folgenden Code hinzu, um den QR-Code zu generieren:
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 qrcode.js zuvor heruntergeladene 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, der Sie mit diesen Anweisungen verknüpft.

Führen Sie Ihre App aus, und stellen Sie sicher, dass Sie den QR-Code scannen und den Code überprüfen können, den der Authentifizierungscode bestätigt.

Ändern des Websitenamens im QR-Code

Der Websitename im QR-Code wird aus dem Projektnamen abgeleitet, den Sie beim anfänglichen Erstellen Ihres Projekts auswählen. Sie können es ändern, indem Sie nach der GenerateQrCodeUri(string email, string unformattedKey) Methode in der /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.cs.

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 string.Format ist Ihr Websitename, der von Ihrem Lösungsnamen abgeleitet wird. Sie kann auf einen beliebigen Wert geändert werden, muss aber immer URL codiert sein.

Verwenden einer anderen QR-Codebibliothek

Sie können die QR-Codebibliothek durch Ihre bevorzugte Bibliothek ersetzen. Der HTML-Code enthält ein Element, in dem Sie einen qrCode QR-Code durch jeden Mechanismus platzieren können, in dem Ihre Bibliothek bereitgestellt wird.

Die korrekt formatierte URL für den QR-Code ist in der folgenden Datei verfügbar:

  • AuthenticatorUri Eigenschaft des Modells.
  • data-url Eigenschaft im qrCodeData Element.

TOTP-Client- und Serverzeit-Skew

DIE TOTP-Authentifizierung (zeitbasierte One-Time Kennwort) hängt sowohl vom Server als auch vom Authentifizierungsgerät ab, das eine genaue Zeit hat. Token dauern nur für 30 Sekunden. Wenn TOTP 2FA-Anmeldungen fehlschlagen, überprüfen Sie, ob die Serverzeit genau ist und vorzugsweise mit einem genauen NTP-Dienst synchronisiert wird.