Ejercicio: configuración de la autenticación multifactor

8 minutos

En la unidad anterior, ha obtenido información sobre cómo Identity de ASP.NET Core implementa la contraseña de un solo uso basada en tiempo (TOTP) para la autenticación multifactor (MFA). En esta unidad, personalizará el formulario Configuración de la aplicación de autenticación existente para proporcionar un código QR que contiene la clave de registro.

Generación de códigos QR

Existen varias estrategias para generar el código QR. Un ejemplo de la documentación usa una biblioteca JavaScript del lado cliente. Pero en esta unidad se usa un paquete NuGet de terceros para generar el código QR con C# en el servidor. La imagen del código QR resultante se inserta en un elemento de marcador de posición HTML como una cadena codificada en base64.

Adición de un servicio de código QR

Ahora se creará todo lo que necesita para generar códigos QR en el formulario Configurar aplicación de autenticación.

En el panel de terminal, instale el paquete NuGet QRCoder:
```
dotnet add package QRCoder --version 1.4.3
```
En el panel Explorador, haga clic con el botón derecho en la carpeta Services y agregue un nuevo archivo denominado QRCodeService.cs. Agregue el siguiente código:
```
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));
    }
}
```
El código anterior:
- Utiliza la inserción de constructores para obtener acceso a una instancia de la clase QRCodeGenerator de la biblioteca.
- Expone el método GetQRCodeAsBase64 para devolver la cadena codificada en base64. Las dimensiones del código QR vienen determinadas por el valor entero que se pasa a GetGraphic. En este caso, el código QR generado está compuesto por bloques de un tamaño de cuatro píxeles cuadrados.

En Program.cs, agregue las líneas resaltadas:

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 se registra como un servicio singleton en el contenedor de IoC dentro de Program.cs.

Personalización de la autenticación multifactor

Ahora que puede generar códigos QR, puede insertar uno en el formulario Configurar aplicación de autenticación.

Abra Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.cs y realice los siguientes cambios:

Agregue la propiedad siguiente a la clase EnableAuthenticatorModel para almacenar la representación de cadena de base64 del código QR:

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

    public string QrCodeAsBase64 { get; set; }

Incorpore los cambios resaltados en el controlador de página OnGetAsync:

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

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

    return Page();
}

En el controlador de página anterior, la inserción de parámetros proporciona una referencia al servicio singleton QRCodeService.

Agregue la instrucción using siguiente en la parte superior del archivo para resolver la referencia a QRCodeService. Guarde los cambios.
```
using RazorPagesPizza.Services;
```

Incorpore el cambio resaltado en el método GenerateQrCodeUri.

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

Esto establece el nombre para mostrar de la clave en la aplicación TOTP.

En Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml, realice los cambios resaltados siguientes y guárdelos:

<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 id="qrCode">
        <img alt="embedded QR code" src="data:image/png;base64,@Model.QrCodeAsBase64" />
    </div>
    <div id="qrCodeData" data-url="@Model.AuthenticatorUri"></div>
</li>

El marcado anterior inserta la imagen codificada en base64 en la página.

Prueba de la autenticación multifactor

Ha realizado todos los cambios necesarios para un código QR en el formulario Configurar aplicación de autenticación. Ahora puede probar fácilmente la funcionalidad de MFA.

Asegúrese de que ha guardado todos los cambios.
Compile y ejecute la aplicación con dotnet run.
Vaya al sitio e inicie sesión con un usuario registrado, si aún no ha iniciado sesión. Seleccione el vínculo Hola, [nombre], [apellidos] para navegar a la página de administración de perfiles y luego seleccione Autenticación en dos fases.
Seleccione el botón Agregar aplicación de autenticación.
Siga las instrucciones en pantalla para registrar y comprobar la aplicación de autenticación para este usuario.

Por ejemplo, con Microsoft Authenticator en Android, siga estos pasos para agregar la cuenta a la aplicación:
1. Abra la aplicación Microsoft Authenticator.
2. Seleccione el menú kebab (puntos suspensivos verticales) en la esquina superior derecha.
3. Seleccione Agregar cuenta.
4. Seleccione Otra cuenta (Google, Facebook, etc.).
5. Examine el código QR tal como se indica.
Escriba el código de verificación proporcionado por la aplicación TOTP en el cuadro de texto Código de verificación.
Seleccione Comprobar.

Una vez realizada la comprobación correctamente, la página muestra un banner que indica que Se ha comprobado la aplicación de autenticación y algunos códigos de recuperación.
En la pestaña SQL Server de VS Code, haga clic con el botón derecho en la base de datos RazorPagesPizza y seleccione Nueva consulta. Escriba la consulta siguiente y presione Ctrl+Mayús+E para ejecutarla.
```
SELECT FirstName, LastName, Email, TwoFactorEnabled
FROM dbo.AspNetUsers
```
Para el usuario que ha iniciado sesión, el resultado muestra que la columna TwoFactorEnabled es igual a 1. Dado que no se ha habilitado la autenticación multifactor para el otro usuario registrado, el valor de la columna del registro es 0.
En la aplicación web, seleccione Cerrar sesión y vuelva a iniciar sesión con el mismo usuario.
Escriba el código de verificación de la aplicación de autenticación TOTP en el cuadro de texto Código del autenticador. Seleccione el botón Iniciar sesión.
Seleccione Hola, [Nombre de pila] [Apellidos]. Luego, seleccione la pestaña Autenticación en dos fases.

Dado que se ha configurado Microsoft Authenticator, aparecen los siguientes botones:
- Deshabilitar 2FA
- Restablecer códigos de recuperación
- Configurar aplicación de autenticación
- Restablecer aplicación de autenticación
En el panel de terminal de VS Code, presione Ctrl+C para detener la aplicación.

Resumen

En esta unidad, ha agregado la capacidad de generar un código QR al formulario Configurar aplicación de autenticación. En la unidad siguiente, puede aprender a usar Identity para almacenar notificaciones y aplicar directivas de autorización.

Continuar