Compartir a través de

Habilitar la generación de código QR para aplicaciones de autenticador TOTP en una Blazor Web App de ASP.NET Core.

Nota:

Esta no es la versión más reciente de este artículo. Para la versión actual, consulte la versión de .NET 9 de este artículo.

Importante

Esta información hace referencia a un producto en versión preliminar, el cual puede sufrir importantes modificaciones antes de que se publique la versión comercial. Microsoft no proporciona ninguna garantía, expresa o implícita, con respecto a la información proporcionada aquí.

Para la versión actual, consulte la versión de .NET 9 de este artículo.

En este artículo se explica cómo configurar una Blazor Web App de ASP.NET Core para la autenticación en dos fases (2FA) con códigos QR generados por aplicaciones de autenticación con algoritmo de contraseña de un solo uso basado en tiempo (TOTP).

Para conocer aspectos básicos de 2FA con aplicaciones de autenticación TOTP, consulte Habilitar generación de códigos QR para aplicaciones de autenticación TOTP en ASP.NET Core.

La guía de este artículo se basa en la creación de la aplicación con cuentas individuales para el tipo de autenticación de la nueva aplicación o scaffolding Identity en una aplicación existente. Para obtener instrucciones sobre cómo usar la CLI de .NET en lugar de Visual Studio para aplicar scaffolding Identity a una aplicación existente, consulte la Herramienta generador de código ASP.NET Core ("aspnet-codegenerator").

Advertencia

Los códigos TOTP deben ser secretos porque se pueden usar para autenticarse varias veces antes de caducar.

Agregar códigos QR a la página de configuración de 2FA

Un código QR generado por la aplicación para configurar el método 2FA con una aplicación de autenticación TOTP debe generarse mediante una biblioteca de códigos QR.

En las instrucciones de este artículo se usa manuelbl/QrCodeGenerator, pero puede usar cualquier biblioteca de generación de códigos QR.

Agregue una referencia de paquete al paquete NuGet Net.Codecrete.QrCodeGenerator.

Nota:

Para obtener instrucciones sobre cómo agregar paquetes a aplicaciones .NET, consulte los artículos de Instalación y administración de paquetes en Flujo de trabajo de consumo de paquetes (documentación de NuGet). Confirme las versiones correctas del paquete en NuGet.org.

Abra el componente EnableAuthenticator en la carpeta Components/Account/Pages/Manage. En la parte superior del archivo, bajo la directiva @page, agregue una directiva @using para el espacio de nombres QrCodeGenerator:

@using Net.Codecrete.QrCodeGenerator

Elimine el elemento <div> que contiene las instrucciones de código QR y los dos elementos <div> donde debe aparecer el código QR y dónde se almacenan los datos del código QR en la página:

- <div class="alert alert-info">
-     Learn how to <a href="https://go.microsoft.com/fwlink/?Linkid=852423">enable 
-     QR code generation</a>.
- </div>
- <div></div>
- <div data-url="@authenticatorUri"></div>

Reemplace los elementos eliminados por el siguiente marcado:

<div>
    <svg xmlns="http://www.w3.org/2000/svg" height="300" width="300" stroke="none" 
            version="1.1" viewBox="0 0 50 50">
        <rect width="300" height="300" fill="#ffffff" />
        <path d="@svgGraphicsPath" fill="#000000" />
    </svg>
</div>

Justo dentro del bloque de apertura @code, cambie la declaración de la variable de authenticatorUri a svgGraphicsPath.

- private string? authenticatorUri;
+ private string? svgGraphicsPath;

Cambie el nombre del sitio en el método GenerateQrCodeUri. El valor predeterminado es Microsoft.AspNetCore.Identity.UI. Cambia el valor a un nombre de sitio significativo que los usuarios puedan identificar fácilmente en su aplicación de autenticador. Los desarrolladores suelen establecer un nombre de sitio que coincida con el nombre de la empresa. Se recomienda limitar la longitud del nombre del sitio a 30 caracteres o menos para permitir que el nombre del sitio se muestre en pantallas de dispositivos móviles estrechas.

En el ejemplo siguiente, el valor predeterminado Microsoft.AspNetCore.Identity.UI se cambia por el nombre de la compañía Weyland-Yutani Corporation (©1986 20th Century Studios Aliens).

En el método GenerateQrCodeUri :

- UrlEncoder.Encode("Microsoft.AspNetCore.Identity.UI"),
+ UrlEncoder.Encode("Weyland-Yutani Corporation"),

En la parte inferior del método LoadSharedKeyAndQrCodeUriAsync, agregue la palabra clave var a la línea que establece authenticatorUri, lo que lo convierte en una variable local con tipo implícito:

- authenticatorUri = GenerateQrCodeUri(email!, unformattedKey!);
+ var authenticatorUri = GenerateQrCodeUri(email!, unformattedKey!);

Agregue las siguientes líneas de código al final del método LoadSharedKeyAndQrCodeUriAsync:

var qr = QrCode.EncodeText(authenticatorUri, QrCode.Ecc.Medium);
svgGraphicsPath = qr.ToGraphicsPath();

Ejecuta la aplicación y asegúrate de que el código QR es digitalizable y de que el código se valida.

Advertencia

Se debe mantener un código TOTP de ASP.NET Core secreto porque se puede usar para autenticarse correctamente varias veces antes de que expire.

El componente EnableAuthenticator en el origen de referencia

El componente EnableAuthenticator se puede inspeccionar en el origen de referencia:

El componente EnableAuthenticator de origen de referencia

Nota:

Los vínculos de la documentación al origen de referencia de .NET cargan normalmente la rama predeterminada del repositorio, que representa el desarrollo actual para la próxima versión de .NET. Para seleccionar una etiqueta de una versión específica, usa la lista desplegable Cambiar ramas o etiquetas. Para obtener más información, consulta Procedimientos para seleccionar una etiqueta de versión de código fuente de ASP.NET Core (dotnet/AspNetCore.Docs #26205).

Errores debidos a la asimetría de tiempo de TOTP

La autenticación TOTP depende del tiempo exacto que actúa en el dispositivo de la aplicación de autenticación TOTP y en el servidor de la aplicación. Los tokens TOTP solo son válidos durante 30 segundos. Si se produce un error en los inicios de sesión debido a códigos TOTP rechazados, confirme que se mantiene el tiempo preciso, preferiblemente sincronizado con un servicio NTP preciso.

Recursos adicionales