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

ASP.NET Core umfasst Unterstützung für Authentifizierungsanwendungen für die Benutzerauthentifizierung. Zwei-Faktor-Authentifizierung (2FA)-Authentifikator-Apps verwenden einen zeitbasierten Einmalkennwortalgorithmus (TOTP), den vom Branchenstandard empfohlenen Ansatz für 2FA. (TOTP-basierte 2FA wird gegenüber SMS 2FA bevorzugt.) Benutzer installieren die Authentifikator-App in der Regel auf einem Smartphone. Die App stellt einen 6 bis 8-stelligen Code bereit, den der Benutzer eingibt, nachdem er seinen Benutzernamen und sein Kennwort bestätigt hat.

Die zweistufige Authentifizierung erfolgt nicht mithilfe eines externen Authentifizierungsanbieters, z. B. Google oder Facebook. Externe Anmeldungen sind durch jeden Mechanismus geschützt, den der externe Authentifizierungsanbieter unterstützt. Beispielsweise erfordert der Microsoft-Authentifizierungsanbieter einen Hardwareschlüssel oder einen anderen 2FA-Ansatz. Wenn für die Standardvorlagen 2FA sowohl für die Web-App als auch für den externen Authentifizierungsanbieter erforderlich ist, müssen die Benutzer zwei 2FA-Ansätze erfüllen. Das Erfordern von zwei 2FA-Ansätzen unterscheidet sich von etablierten Sicherheitspraktiken, die in der Regel auf eine einzelne, starke 2FA-Methode für die Authentifizierung basieren.

Wenn Sie mit Blazor in ASP.NET Core 8.0 oder höher arbeiten, finden Sie ähnliche Anleitungen in den folgenden Artikeln:

• Aktivieren der QR-Codegenerierung für TOTP-Authentifikator-Apps in ASP.NET Core-Blazor Web App
• QR-Codegenerierung für TOTP-Authentifizierungs-Apps in ASP.NET Core Blazor WebAssembly mit ASP.NET Core Identity aktivieren

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

Die folgenden Anweisungen verwenden die qrcode.js Datei aus dem https://davidshimjs.github.io/qrcodejs/ Repository.

1. Laden Sie die JavaScript-Bibliothek "qrcode.js" in den Ordner "wwwroot\lib " in Ihrem Projekt herunter.

2. Befolgen Sie die Anweisungen im Gerüst Identity , um die Datei "/Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml " zu generieren.

3. Suchen Sie in der Datei "/Areas/IdentityPages/Account/Manage/EnableAuthenticator.cshtml " den Scripts Abschnitt am Ende der Datei:

   @section Scripts {
      <partial name="_ValidationScriptsPartial" />
   }
   

4. Erstellen Sie eine neue JavaScript-Datei namens qr.js im Ordner "wwwroot/js ", und fügen Sie den folgenden Code hinzu, der den QR-Code generiert:

   window.addEventListener("load", () => {
   const uri = document.getElementById("qrCodeData").getAttribute('data-url');
   new QRCode(document.getElementById("qrCode"),
      {
         text: uri,
         width: 150,
         height: 150
      });
   });
   

5. Aktualisieren Sie den Scripts-Abschnitt, um einen Verweis auf die qrcode.js-Bibliothek hinzuzufügen, die Sie zuvor heruntergeladen haben.

6. Fügen Sie die Datei qr.js mit dem Aufruf hinzu, der den QR-Code generiert:

   @section Scripts {
      <partial name="_ValidationScriptsPartial" />
      <script type="text/javascript" src="~/lib/qrcode.js"></script>
      <script type="text/javascript" src="~/js/qr.js"></script>
   }
   

7. Löschen Sie den Absatz, der Sie mit diesen Anweisungen verknüpft.

8. Führen Sie die App aus. Vergewissern Sie sich, dass Sie den QR-Code scannen und den vom Authentifikator bereitgestellten Code überprüfen können.

Ändern des Websitenamens im QR-Code

Der Websitename im QR-Code stammt aus dem Projektnamen, den Sie beim Erstellen des Projekts auswählen. Sie können sie ändern, indem Sie in der Datei Identity" nach der Methode suchen.

Dies ist der Standardcode aus der Vorlage:

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 der Name Ihrer Website, der vom Namen Ihrer Lösung abgeleitet wird. Sie können ihn in einen beliebigen Wert ändern, aber er muss 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 qrCode Element, in das Sie einen QR-Code mithilfe des von Ihrer Bibliothek bereitgestellten Mechanismus platzieren können.

Die URL für den QR-Code im korrekten Format finden Sie an den folgenden Stellen:

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

Überprüfen der TOTP-Client- und Serverzeiten

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 die TOTP 2FA-Anmeldung fehlschlägt, bestätigen Sie, dass die Serverzeit korrekt ist und vorzugsweise mit einem genauen NTP-Dienst synchronisiert wird.

Verwandte Inhalte

• Aktivieren der QR-Codegenerierung für TOTP-Authentifikator-Apps in ASP.NET Core-Blazor Web App
• Aktivieren der QR-Code-Generierung für TOTP-Authentifikator-Apps in ASP.NET Core Blazor WebAssembly mit ASP.NET Core Identity