Habilitación de la generación de códigos QR para las aplicaciones de autenticación TOTP en ASP.NET Core

ASP.NET Core incluye compatibilidad con aplicaciones autenticadoras para la autenticación individual. Las aplicaciones autenticadoras de autenticación en dos fases (2FA), que usan un algoritmo de contraseña única basado en tiempo (TOTP), son el enfoque recomendado por el sector para 2FA. La 2FA con TOTP se prefiere a SMS 2FA. Una aplicación autenticadora proporciona un código de 6 a 8 dígitos que los usuarios deben escribir después de confirmar su nombre de usuario y contraseña. Normalmente, una aplicación autenticadora está instalada en un smartphone.

Las plantillas de aplicación web de ASP.NET Core admiten autenticadores, pero no proporcionan compatibilidad con la generación de código QR. Los generadores de código QR facilitan la configuración de 2FA. En este documento se proporcionan instrucciones para Razor Pages y aplicaciones MVC sobre cómo agregar la generación de código QR a la página de configuración de 2FA. Para obtener instrucciones que se aplican a Blazor Web Apps, consulte Habilitación de la generación de código QR para aplicaciones de autenticación TOTP en una aplicación web Blazor de ASP.NET Core.

La autenticación en dos fases no se produce mediante un proveedor de autenticación externo, como Google o Facebook. Los inicios de sesión externos están protegidos por cualquier mecanismo que proporcione el proveedor de inicio de sesión externo. Consideremos, por ejemplo, que el proveedor de autenticación de Microsoft requiere una clave de hardware u otro enfoque de 2FA. Si las plantillas predeterminadas aplicaron 2FA "local", los usuarios tendrían que satisfacer dos enfoques de 2FA, que no es un escenario que se usa habitualmente.

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

Estas instrucciones usan qrcode.js desde el repositorio https://davidshimjs.github.io/qrcodejs/.

• Descargue la biblioteca qrcode.js JavaScript en la carpeta wwwroot\lib del proyecto.
• Siga las instrucciones de Scaffolding Identity para generar /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.
• En /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml, busque la sección Scripts al final del archivo:

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

• Cree un nuevo archivo JavaScript llamado qr.js en wwwroot/js y agregue el código siguiente para generar el código QR:

window.addEventListener("load", () => {
  const uri = document.getElementById("qrCodeData").getAttribute('data-url');
  new QRCode(document.getElementById("qrCode"),
    {
      text: uri,
      width: 150,
      height: 150
    });
});

• Actualice la sección Scripts para agregar una referencia a la biblioteca qrcode.js descargada anteriormente.
• Agregue el archivo qr.js con la llamada para generar el código QR:

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

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

• Elimine el párrafo que le vincula a estas instrucciones.

Ejecute la aplicación y asegúrese de que puede escanear el código QR y validar el código que le proporciona el autenticador.

Cambiar el nombre del sitio en el código QR

El nombre del sitio en el código QR se toma del nombre del proyecto que elija al crear inicialmente el proyecto. Para cambiarlo, busque el método GenerateQrCodeUri(string email, string unformattedKey) en /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.cs.

El código predeterminado de la plantilla tiene el siguiente aspecto:

private string GenerateQrCodeUri(string email, string unformattedKey)
{
    return string.Format(
        AuthenticatorUriFormat,
        _urlEncoder.Encode("Razor Pages"),
        _urlEncoder.Encode(email),
        unformattedKey);
}

El segundo parámetro de la llamada a string.Format es el nombre del sitio, tomado del nombre de la solución. Se puede cambiar a cualquier valor, pero siempre debe estar codificado como dirección URL.

Uso de una biblioteca de código QR diferente

Puede reemplazar la biblioteca de código QR por su biblioteca preferida. El HTML contiene un elemento qrCode en el que puede colocar un código QR mediante cualquier mecanismo que proporcione la biblioteca.

La dirección URL con formato correcto para el código QR está disponible en:

• Propiedad AuthenticatorUri del modelo.
• Propiedad data-url en el elemento qrCodeData.

Distorsión de tiempo del cliente y del servidor TOTP

La autenticación con contraseña de un solo uso basada en tiempo (TOTP) depende de que tanto el servidor como el dispositivo autenticador tengan una hora exacta. Los tokens solo duran 30 segundos. Si se produce un error en el inicio de sesión TOTP 2FA, compruebe que la hora del servidor es correcta y, preferiblemente, que está sincronizada con un servicio NTP preciso.