Ejercicio: configuración de la autenticación multifactor

10 minutos

De forma predeterminada, las plantillas de proyecto de ASP.NET Core que usan Identity incluyen compatibilidad con la autenticación multifactor para las aplicaciones de autenticación TOTP. El formulario Configuración de la aplicación de autenticación de la plantilla de Razor Pages proporciona una clave de registro de 32 caracteres para inicializar el valor del token. En esta unidad, personalizará el formulario Configuración de la aplicación de autenticación para proporcionar un código QR que contenga la clave de registro. El código QR actuará como un mecanismo de autenticación alternativo a la clave de 32 caracteres.

Existen varias estrategias para generar el código QR. Un ejemplo incluye el uso de una biblioteca JavaScript de terceros. Sin embargo, en esta unidad se usa un paquete NuGet de terceros para generar el código QR con C#. La imagen del código QR resultante se inserta en un elemento de marcador de posición HTML como una cadena codificada en base64.

Revisión de la infraestructura de generación de códigos QR

Para evitar que las distracciones alteren la atención en Identity, se ha proporcionado texto reutilizable para admitir la generación de código QR. Los cambios de compatibilidad incluyen lo siguiente:

El paquete NuGet, QRCoder, ya se ha instalado en el proyecto.
Todas las interacciones con la biblioteca QRCoder se abstraen en el archivo Services/QRCodeService.cs. La clase QRCodeService:
- 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 estará compuesto por bloques de un tamaño de cuatro píxeles cuadrados.
QRCodeService se registra como un servicio singleton en el contenedor de IoC en Startup.cs.

Personalización de la autenticación multifactor

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

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<ContosoPetsUser> _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)
    {
        return 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. QRCodeService es responsable de las interacciones con una biblioteca de terceros que genera códigos QR.

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

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 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="@Html.Raw(@Model.AuthenticatorUri)"></div>
</li>

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

Prueba de la autenticación multifactor

Ejecute el siguiente comando para compilar la aplicación:
```
dotnet build --no-restore
```
La opción --no-restore se incluye porque no se han agregado paquetes NuGet desde la última compilación. El proceso de compilación omite la restauración de paquetes NuGet y se realiza correctamente sin ninguna advertencia. Si se produce un error en la compilación, compruebe la salida con el fin de obtener información para solucionar problemas.
Implemente la aplicación en Azure App Service ejecutando el comando siguiente:
```
az webapp up
```
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 de pila] [Apellidos] para navegar a la página de administración de perfiles y luego seleccione Autenticación en dos fases.

Observe la presencia del mensaje siguiente en la página:
```
Privacy and cookie policy have not been accepted.
You must accept the policy before you can enable two factor authentication.
```
Para aceptar la directiva, haga clic en el vínculo Aceptar en el banner de privacidad y de directiva de uso de cookies. Actualice la página.

Se crea una cookie llamada .AspNet.Consent para marcar la aceptación de la directiva. La cookie expira un año después de la fecha de aceptación.
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.
6. Seleccione Finalizar para comprobar la clave de 32 caracteres.
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.
Ejecute el comando siguiente para ver el efecto en la columna TwoFactorEnabled de la tabla AspNetUsers:
```
db -c 'SELECT "FirstName", "LastName", "Email", "TwoFactorEnabled" FROM "AspNetUsers"'
```
Para el usuario que ha iniciado sesión, el resultado muestra que la columna TwoFactorEnabled es igual a t. Dado que no se ha habilitado la autenticación multifactor para el otro usuario registrado, el valor de la columna del registro es f.
```
db -Q "SELECT FirstName, LastName, Email, TwoFactorEnabled FROM dbo.AspNetUsers" -Y 25
```
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.
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

Continuar