Abilitare la generazione di codice QR per le app di autenticazione TOTP in ASP.NET Core

ASP.NET Core include il supporto per le applicazioni di autenticazione per l'autenticazione utente. Le app di autenticazione a due fattori (2FA) usano un Algoritmo basato su Tempo per Password Temporanee (TOTP), l'approccio consigliato dal settore per 2FA. L'autenticazione 2FA basata su TOTP è preferibile rispetto a SMS 2FA. Gli utenti installano in genere l'app di autenticazione su uno smartphone. L'app fornisce un codice da 6 a 8 cifre immesso dall'utente dopo aver confermato il nome utente e la password.

L'autenticazione a due fattori non avviene usando un provider di autenticazione esterno, ad esempio Google o Facebook. Gli accessi esterni sono protetti da qualsiasi meccanismo supportato dal provider di autenticazione esterno. Ad esempio, il provider di autenticazione Microsoft richiede una chiave hardware o un altro approccio 2FA. Quando i modelli predefiniti richiedono 2FA sia per l'app Web che per il provider di autenticazione esterno, gli utenti devono soddisfare due approcci 2FA. La richiesta di due approcci 2FA devia dalle procedure di sicurezza stabilite, che in genere si basano su un unico metodo 2FA sicuro per l'autenticazione.

Se si usa Blazor in ASP.NET Core 8.0 o versione successiva, è possibile trovare indicazioni simili negli articoli seguenti:

• Abilitare la generazione di codice QR per le app di autenticazione TOTP in un'app ASP.NET Core Blazor Web App
• Abilitare la generazione di codici QR per le app di autenticazione TOTP in ASP.NET Core Blazor WebAssembly con ASP.NET Core Identity

Aggiungere codici QR alla pagina di configurazione della 2FA

Le istruzioni seguenti usano il file qrcode.js dal https://davidshimjs.github.io/qrcodejs/ repository.

1. Scaricare la libreria JavaScriptqrcode.js nella cartella wwwroot\lib del progetto.

2. Seguire le istruzioni in Scaffold Identity per generare il file /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml .

3. Nel file /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml individuare la Scripts sezione alla fine del file:

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

4. Creare un nuovo file JavaScript denominato qr.js nella cartella wwwroot/js e aggiungere il codice seguente che genera il codice a matrice:

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

5. Aggiornare la Scripts sezione per aggiungere un riferimento alla qrcode.js libreria scaricata in precedenza.

6. Aggiungere il file qr.js con la chiamata che genera il QR code:

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

7. Eliminare il paragrafo che collega l'utente a queste istruzioni.

8. Eseguire l'app. Conferma di poter scansionare il codice QR e verificare il codice fornito dall'app di autenticazione.

Modificare il nome del sito nel codice QR

Il nome del sito nel codice a matrice deriva dal nome del progetto selezionato quando si crea il progetto. È possibile modificarlo cercando il GenerateQrCodeUri(string email, string unformattedKey) metodo nel file /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.cs .

Ecco il codice predefinito del modello:

private string GenerateQrCodeUri(string email, string unformattedKey)
{
    return string.Format(
        AuthenticatorUriFormat,
        _urlEncoder.Encode("Razor Pages"),
        _urlEncoder.Encode(email),
        unformattedKey);
}

Il secondo parametro nella chiamata a string.Format è il nome del sito, ottenuto dal nome della soluzione. È possibile modificarlo in qualsiasi valore, ma deve essere sempre codificato in URL.

Usa una libreria per codici QR diversa

È possibile sostituire la libreria del codice QR con la libreria preferita. Il codice HTML contiene un elemento `qrCode` in cui è possibile inserire un codice QR utilizzando qualunque meccanismo fornito dalla libreria.

È possibile trovare l'URL correttamente formattato per il codice QR nelle posizioni seguenti:

• AuthenticatorUri proprietà del modello
• data-urlproprietà nell'elemento qrCodeData

Controllare l'ora del client e del server TOTP

L'autenticazione TOTP (password monouso basata sul tempo) dipende sia dal server sia dal dispositivo di autenticazione che abbiano un'ora precisa. I token durano solo 30 secondi. Se l'accesso a TOTP 2FA ha esito negativo, verificare che l'ora del server sia accurata e preferibilmente sincronizzata con un servizio NTP accurato.

Contenuti correlati

• Abilitare la generazione di codice QR per le app di autenticazione TOTP in un'app ASP.NET Core Blazor Web App
• Abilitare la generazione del codice QR per le app di autenticazione TOTP in ASP.NET Core Blazor WebAssembly con ASP.NET Core Identity