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

ASP.NET Core viene fornito con supporto per le applicazioni di autenticazione per l'autenticazione singola. Le app di autenticazione a due fattori (2FA), che usano un algoritmo TOTP (One-Time Password Algorithm), sono l'approccio consigliato dal settore per 2FA. 2FA con TOTP è preferibile a SMS 2FA. Un'app di autenticazione fornisce un codice da 6 a 8 cifre che gli utenti devono immettere dopo aver confermato il nome utente e la password. In genere, un'app di autenticazione viene installata su uno smartphone.

I modelli di app Web core ASP.NET supportano gli autenticatori, ma non forniscono supporto per la generazione di codice a matrice. I generatori di codice a matrice semplificano la configurazione di 2FA. Questo documento fornisce indicazioni per Razor le app Pages e MVC su come aggiungere la generazione di codice a matrice alla pagina di configurazione 2FA. Per indicazioni valide per Blazor App Web, vedere Abilitare la generazione di codice a matrice per le app di autenticazione TOTP in un'app Web principale Blazor di ASP.NET.

L'autenticazione a due fattori non avviene usando un provider di autenticazione esterno, ad esempio Google o Facebook. Gli account di accesso esterni sono protetti da qualsiasi meccanismo fornito dal provider di accesso esterno. Si consideri, ad esempio, che il provider di autenticazione Microsoft richieda una chiave hardware o un altro approccio 2FA. Se i modelli predefiniti applicavano "local" 2FA, gli utenti sarebbero tenuti a soddisfare due approcci 2FA, che non è uno scenario comunemente usato.

Aggiunta di codici a matrice alla pagina di configurazione 2FA

Queste istruzioni usano qrcode.js dal https://davidshimjs.github.io/qrcodejs/ repository.

• Scaricare la qrcode.js libreria JavaScript nella wwwroot\lib cartella del progetto.
• Seguire le istruzioni in Scaffold Identity per generare /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.
• In /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtmlindividuare la Scripts sezione alla fine del file:

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

• Creare un nuovo file JavaScript denominato qr.js in wwwroot/js e aggiungere il codice seguente per generare 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
    });
});

• Aggiornare la Scripts sezione per aggiungere un riferimento alla qrcode.js libreria scaricata in precedenza.
• Aggiungere il qr.js file con la chiamata per generare il codice a matrice:

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

    <script type="text/javascript" src="~/lib/qrcode.js"></script>
    <script type="text/javascript" src="~/js/qr.js"></script>
}

• Eliminare il paragrafo che vi collega a queste istruzioni.

Eseguire l'app e assicurarsi di poter analizzare il codice a matrice e convalidare il codice dimostrato dall'autenticatore.

Modificare il nome del sito nel codice a matrice

Il nome del sito nel codice a matrice viene ricavato dal nome del progetto scelto durante la creazione iniziale del progetto. È possibile modificarlo cercando il GenerateQrCodeUri(string email, string unformattedKey) metodo in /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.cs.

Il codice predefinito del modello è simile al seguente:

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, ricavato dal nome della soluzione. Può essere modificato in qualsiasi valore, ma deve essere sempre codificato in URL.

Uso di una diversa libreria di codice a matrice

È possibile sostituire la libreria del codice a matrice con la libreria preferita. Il codice HTML contiene un qrCode elemento in cui è possibile inserire un codice a matrice tramite qualsiasi meccanismo fornito dalla libreria.

L'URL formattato correttamente per il codice a matrice è disponibile in:

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

Asimmetria dell'ora del client e del server TOTP

L'autenticazione TOTP (one-time-based One-Time Password) dipende sia dal server che dal dispositivo di autenticazione con un tempo preciso. I token durano solo 30 secondi. Se gli account di accesso TOTP 2FA hanno esito negativo, verificare che l'ora del server sia accurata e preferibilmente sincronizzata con un servizio NTP accurato.