Esercizio - Configurare l'autenticazione a più fattori

10 minuti

Nell'unità precedente, si è appreso come ASP.NET Core Identity implementa una password monouso a tempo (TOTP) per l'autenticazione a più fattori (MFA). In questa unità si personalizzerà il modulo Configurare l'app Authenticator per fornire un codice a matrice contenente la chiave di registrazione.

Generazione di codici a matrice

Esistono più strategie per la generazione del codice a matrice. Un esempio della documentazione usa una libreria JavaScript lato client. In questa unità, tuttavia, viene usato un pacchetto NuGet di terze parti per generare il codice a matrice con C# nel server. L'immagine del codice a matrice risultante viene inserita in un elemento segnaposto HTML come stringa con codifica Base 64.

Aggiungere un servizio codice a matrice

Verranno creati tutti gli elementi necessari per generare codici a matrice nel modulo Configure authenticator app (Configurare l'app Authenticator).

Nel riquadro del terminale installare il pacchetto NuGet QRCoder:
```
dotnet add package QRCoder --version 1.6.0
```
Nel riquadro Explorer fare clic con il pulsante destro del mouse sulla cartella Servizi e aggiungere un nuovo file denominato QRCodeService.cs. Aggiungere il codice seguente:
```
using QRCoder;

namespace RazorPagesPizza.Services;
public class QRCodeService
{
    private readonly QRCodeGenerator _generator;

    public QRCodeService(QRCodeGenerator generator)
    {
        _generator = generator;
    }

    public string GetQRCodeAsBase64(string textToEncode)
    {
        QRCodeData qrCodeData = _generator.CreateQrCode(textToEncode, QRCodeGenerator.ECCLevel.Q);
        var qrCode = new PngByteQRCode(qrCodeData);

        return Convert.ToBase64String(qrCode.GetGraphic(4));
    }
}
```
Il codice precedente:
- Usa l'inserimento del costruttore per ottenere l'accesso a un'istanza della classe QRCodeGenerator della libreria.
- Espone il metodo GetQRCodeAsBase64 per restituire la stringa con codifica Base 64. Il valore intero passato a GetGraphic determina le dimensioni del codice a matrice. In questo caso, il codice a matrice generato sarà composto da blocchi delle dimensioni di quattro pixel quadrati.

In Program.cs aggiungere le righe evidenziate:

using Microsoft.AspNetCore.Identity;
using Microsoft.EntityFrameworkCore;
using RazorPagesPizza.Areas.Identity.Data;
using Microsoft.AspNetCore.Identity.UI.Services;
using RazorPagesPizza.Services;
using QRCoder;

var builder = WebApplication.CreateBuilder(args);
var connectionString = builder.Configuration.GetConnectionString("RazorPagesPizzaAuthConnection");
builder.Services.AddDbContext<RazorPagesPizzaAuth>(options => options.UseSqlServer(connectionString)); 
builder.Services.AddDefaultIdentity<RazorPagesPizzaUser>(options => options.SignIn.RequireConfirmedAccount = true)
      .AddEntityFrameworkStores<RazorPagesPizzaAuth>();

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddTransient<IEmailSender, EmailSender>();
builder.Services.AddSingleton(new QRCodeService(new QRCodeGenerator()));

var app = builder.Build();

QRCodeService è registrato come servizio singleton nel contenitore IoC all'interno di Program.cs.

Personalizzare l'autenticazione a più fattori

Ora che è possibile generare codici a matrice, è possibile incorporare un codice a matrice nel modulo Configure authenticator app (Configurare l'app Authenticator).

Aprire Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.cs e apportare le modifiche seguenti:

Per archiviare la rappresentazione di stringa di base 64 del codice a matrice, aggiungere la proprietà seguente alla classe EnableAuthenticatorModel:

public class EnableAuthenticatorModel : PageModel
{
    private readonly UserManager<RazorPagesPizzaUser> _userManager;
    private readonly ILogger<EnableAuthenticatorModel> _logger;
    private readonly UrlEncoder _urlEncoder;

    public string QrCodeAsBase64 { get; set; }

Incorporare le modifiche evidenziate nel gestore pagina OnGetAsync:

public async Task<IActionResult> OnGetAsync([FromServices] QRCodeService qrCodeService)
{
    var user = await _userManager.GetUserAsync(User);
    if (user == null)
    {
        return NotFound($"Unable to load user with ID '{_userManager.GetUserId(User)}'.");
    }

    await LoadSharedKeyAndQrCodeUriAsync(user);
    QrCodeAsBase64 = qrCodeService.GetQRCodeAsBase64(AuthenticatorUri);

    return Page();
}

Nel gestore pagina precedente, l'inserimento di parametri fornisce un riferimento al servizio singleton QRCodeService.

Per risolvere il riferimento a QRCodeService, aggiungere l'istruzione using seguente all'inizio del file. Salva le modifiche.
```
using RazorPagesPizza.Services;
```

Incorporare la modifica evidenziata al metodo GenerateQrCodeUri.

private string GenerateQrCodeUri(string email, string unformattedKey)
{
    return string.Format(
        CultureInfo.InvariantCulture,
        AuthenticatorUriFormat,
        _urlEncoder.Encode("RazorPagesPizza"),
        _urlEncoder.Encode(email),
        unformattedKey);
}

Verrà impostato il nome visualizzato per la chiave nell'app TOTP.

In Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml apportare le modifiche evidenziate di seguito e salvare:

<li>
    <p>Scan the QR Code or enter this key <kbd>@Model.SharedKey</kbd> into your two factor authenticator app. Spaces and casing do not matter.</p>
    <div class="alert alert-info">Learn how to <a href="https://go.microsoft.com/fwlink/?Linkid=852423">enable QR code generation</a>.</div>
    <div id="qrCode">
        <img alt="embedded QR code" src="data:image/png;base64,@Model.QrCodeAsBase64" />
    </div>
    <div id="qrCodeData" data-url="@Model.AuthenticatorUri"></div>
</li>

Il markup precedente incorpora l'immagine con codifica Base 64 nella pagina.

Testare l'autenticazione a più fattori

Sono state apportate tutte le modifiche necessarie per un codice a matrice nel modulo Configura app di autenticazione. Ora è possibile testare facilmente la funzionalità MFA.

Assicurarsi di aver salvato tutte le modifiche.
Compilare ed eseguire l'app con dotnet run.
Passare al sito e accedere con uno dei due utenti registrati, se non è già stato eseguito l'accesso. Selezionare il collegamento Hello, [First name] [Last name]! per passare alla pagina di gestione del profilo, quindi selezionare Autenticazione a due fattori.
Selezionare il pulsante Add authenticator app (Aggiungi app di autenticazione).
Seguire le istruzioni visualizzate per registrare e verificare l'app di autenticazione per questo utente.

Se ad esempio si usa Microsoft Authenticator in Android, seguire questa procedura per aggiungere l'account all'app:
1. Aprire l'app Microsoft Authenticator.
2. Selezionare il menu con i puntini verticali in alto a destra.
3. Selezionare Aggiungi account.
4. Selezionare Altro account (Google, Facebook e così via).
5. Eseguire la scansione del codice a matrice come indicato.
Immettere il codice di verifica fornito dall'app TOTP nella casella di testoVerification Code (Codice di verifica).
Selezionare Verifica.

Se la verifica ha esito positivo, nella pagina compaiono il banner Your authenticator app has been verified (L'app di autenticazione è stata verificata) e alcuni codici di ripristino.
Nella scheda SQL Server in VS Code fare clic on il pulsante destro del mouse sul database RazorPagesPizza e scegliere Nuova query. Immettere la query seguente e premere CTRL+MAIUSC+E per eseguirla.
```
SELECT FirstName, LastName, Email, TwoFactorEnabled
FROM dbo.AspNetUsers
```
Per l'utente connesso, l'output mostra che la colonna TwoFactorEnabled è uguale a 1. Poiché l'autenticazione a più fattori non è abilitata per l'altro utente registrato, il valore della colonna del record è 0.
Nell'app Web selezionare Logout (Disconnetti) e quindi eseguire di nuovo l'accesso con lo stesso utente.
Immettere il codice di verifica dall'app TOTP nella casella di testo Authenticator code (Codice autenticazione). Selezionare il pulsante Log in (Accedi).
Selezionare Hello, [Nome] [Cognome]!. Selezionare quindi la scheda Two-factor authentication (Autenticazione a due fattori).

Poiché Microsoft Authenticator è configurato, vengono visualizzati i pulsanti seguenti:
- Disable 2FA (Disabilita autenticazione a due fattori)
- Reset recovery codes (Reimposta codici di ripristino)
- Set up authenticator app (Configura app di autenticazione)
- Reset authenticator app (Reimposta app di autenticazione)
Premere CTRL+C nel riquadro del terminale in VS Code per arrestare l'app.

Riepilogo