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

ASP.NET Core incluye compatibilidad con aplicaciones autenticadoras para la autenticación de usuarios. Las aplicaciones de autenticación en dos fases (2FA) usan un algoritmo de contraseña de un solo uso (TOTP) basado en tiempo, el enfoque recomendado por el sector para 2FA. (Se prefiere la 2FA basada en TOTP frente a la 2FA por SMS). Los usuarios suelen instalar la aplicación de autenticación en un teléfono inteligente. La aplicación proporciona un código de 6 a 8 dígitos que el usuario escribe después de confirmar su nombre de usuario y contraseña.

Advertencia

Mantenga el secreto de código TOTP de ASP.NET Core. El usuario puede escribir el código varias veces y autenticarse correctamente antes de que expire.

Las plantillas de aplicación web 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 artículo se proporcionan instrucciones para Razor las aplicaciones Pages y MVC sobre cómo agregar la generación de código QR a la página de configuración de 2FA.

Las plantillas de aplicación web 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. Este artículo le guía a través de la adición de la generación de código QR a la página de configuración de 2FA.

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 admita el proveedor de autenticación externo. Por ejemplo, el proveedor de autenticación Microsoft requiere una clave de hardware u otro enfoque de 2FA. Cuando las plantillas predeterminadas requieren 2FA para la aplicación web y el proveedor de autenticación externa, los usuarios deben satisfacer dos enfoques de 2FA. Requerir dos enfoques de 2FA se desvía de las prácticas de seguridad establecidas, que normalmente se basan en un único método 2FA seguro para la autenticación.

Si trabaja con Blazor en ASP.NET Core 8.0 o posterior, puede encontrar instrucciones similares en los siguientes artículos:

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

En las instrucciones siguientes se usa el archivo qrcode.js del https://davidshimjs.github.io/qrcodejs/ repositorio.

  1. Descargue la biblioteca de JavaScript "qrcode.js" en la carpeta wwwroot\lib del proyecto.

  2. Siga las instrucciones de Scaffold Identity para generar el archivo /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml .

  3. En el archivo /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml , busque la Scripts sección al final del archivo:

    @section Scripts {
   <partial name="_ValidationScriptsPartial" />
}

  4. Cree un nuevo archivo JavaScript denominado qr.js en la carpeta wwwroot/js y agregue el código siguiente que genera 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
   });
});

  5. Actualice la Scripts sección para agregar una referencia a la qrcode.js biblioteca que descargó anteriormente.

  6. Agregue el archivo qr.js con la llamada que genera el código QR:

    @section Scripts {
   <partial name="_ValidationScriptsPartial" />
   <script type="text/javascript" src="~/lib/qrcode.js"></script>
   <script type="text/javascript" src="~/js/qr.js"></script>
}

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

  8. Ejecute la aplicación. Confirme que puede escanear el código QR y validar el código que proporciona el autenticador.

Cambiar el nombre del sitio en el código QR

El nombre del sitio en el código QR procede del nombre del proyecto que seleccione al crear el proyecto. Puede cambiarlo buscando el GenerateQrCodeUri(string email, string unformattedKey) método en el archivo /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.cs .

Este es el código predeterminado de la plantilla:

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

El segundo parámetro en la llamada a string.Format es el nombre de tu sitio, que se obtiene del nombre de tu solución. Puede cambiarlo a cualquier valor, pero siempre debe estar codificado en dirección URL.

Usar otra biblioteca de códigos QR

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

Puede encontrar la dirección URL con formato correcto para el código QR en las siguientes ubicaciones:

  • AuthenticatorUri propiedad del modelo
  • data-url propiedad del elemento qrCodeData

Compruebe la hora 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 de TOTP 2FA, confirme que la hora del servidor es precisa y preferiblemente sincronizada con un servicio NTP preciso.

Contenido relacionado

  • Last updated on