Cómo configurar la autenticación de dos factores en ASP.NET Core usando Google Authenticator

Foto de Tommy Lee Walker en Unsplash

Introducción

En este artículo, aprenderemos cómo realizar la autenticación de dos factores en una aplicación ASP.NET Core usando la aplicación Google Authenticator.

Para usarlo, debe configurar la aplicación Google Authenticator en su teléfono inteligente utilizando el código QR generado en la aplicación web. Cuando inicia sesión en la aplicación web, debe ingresar un pin de seis dígitos que se generará en la aplicación para finalizar la autenticación de dos factores. La clave generada en la aplicación será exclusiva de su ID de usuario y es una contraseña de un solo uso (TOTP) basada en el tiempo, es decir, caducará después de un cierto tiempo.

Prerrequisitos

  • Instale .NET Core 2.0.0 o superior SDK desde aquí.
  • Instale la última versión de Visual Studio 2017 Community Edition desde aquí.

Código fuente

Antes de continuar, recomendaría que obtenga el código fuente de GitHub

Crear la aplicación web MVC

Abra Visual Studio y seleccione Archivo >> Nuevo >> Proyecto. Después de seleccionar el proyecto, se abrirá un cuadro de diálogo "Nuevo proyecto". Seleccione .NET Core dentro del menú Visual C # del panel izquierdo. Luego, seleccione "Aplicación web ASP.NET Core" de los tipos de proyectos disponibles. Nombre el proyecto "TwoFactAuth" y presione OK.

Después de hacer clic en Aceptar, se abrirá un nuevo cuadro de diálogo que le pedirá que seleccione la plantilla del proyecto. Puede ver dos menús desplegables en la esquina superior izquierda de la ventana de la plantilla. Seleccione ".NET Core" y "ASP.NET Core 2.0" de estos menús desplegables. Luego, seleccione la plantilla "Aplicación web (Modelo-Vista-Controlador)". Haga clic en el botón "Cambiar autenticación". Se abrirá un cuadro de diálogo "Cambiar autenticación". Seleccione "Cuenta de usuario individual" y haga clic en Aceptar. Ahora, haga clic nuevamente en Aceptar para crear su aplicación web.

Agregar códigos QR para configurar la autenticación de dos factores

Utilizaremos un código QR para configurar y sincronizar la aplicación de autenticación de Google con nuestra aplicación web. Descargue la biblioteca JavaScript qrcode.js de https://davidshimjs.github.io/qrcodejs/ y póngala en la carpeta "wwwroot \ lib" de su aplicación. Ahora, su carpeta "wwwroot" tendrá la siguiente estructura.

Abra el archivo "Views \ Manage \ EnableAuthenticator.cshtml". Encontrará @section Scripts al final del archivo. Pon el siguiente código en él.

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

Este archivo "EnableAuthenticator.cshtml" ya tiene un div con el id "qrCode" (consulte el fragmento de código a continuación). Estamos generando un código QR dentro de ese div utilizando la biblioteca qrcode.js. También estamos definiendo las dimensiones del código QR en términos de ancho y alto.

Finalmente, su archivo "EnableAuthenticator.cshtml" se verá así.

@model EnableAuthenticatorViewModel
@ {
    ViewData ["Title"] = "Habilitar autenticador";
    ViewData.AddActivePage (ManageNavPages.TwoFactorAuthentication);
}
  

@ViewData ["Título"]

    

Para usar una aplicación de autenticación, siga los siguientes pasos:

    
            
  1.             

                    Descargue una aplicación de autenticación de dos factores como Microsoft Authenticator para                  Windows Phone ,                  Android y                  iOS o                 Autenticador de Google para                  Android y                  iOS .             

            
  2.         
  3.             

    Escanee el código QR o ingrese esta clave @ Model.SharedKey en su aplicación de autenticación de dos factores. Los espacios y la carcasa no importan.

                
    Para habilitar la generación de código QR, lea nuestra documentación .             
                
            
  4.         
  5.             

                    Una vez que haya escaneado el código QR o ingrese la clave anterior, su aplicación de autenticación de dos factores le proporcionará                 con un código único Ingrese el código en el cuadro de confirmación a continuación.             

                
                    
                        
                            
                                                                                                                   
                                                     
                        
                    
                
            
  6.     
@section Scripts {     @await Html.PartialAsync ("_ ValidationScriptsPartial")           }

Cuando ejecutamos el programa, se generará un código QR en esta Vista. Luego, puede configurar la autenticación de dos factores utilizando el autenticador de Google con la ayuda de este código QR.

Configurar autenticación de dos factores

Antes de ejecutar la aplicación, necesitamos aplicar migraciones a nuestra aplicación. Vaya a Herramientas >> Administrador de paquetes NuGet >> Consola del Administrador de paquetes. Se abrirá la consola del Administrador de paquetes. Coloque el comando "Actualizar-Base de datos" y presione Entrar. Esto actualizará la base de datos utilizando Entity Framework Code First Migrations.

Presione F5 para iniciar la aplicación y haga clic en "Registrarse" en la esquina superior derecha de la página de inicio. Puede ver una página de registro de usuario. Complete los detalles y haga clic en el botón "Registrarse" como se muestra en la imagen a continuación.

Luego de un registro exitoso, iniciará sesión en la aplicación y navegará a la página de inicio. Aquí, puede ver su identificación de correo electrónico registrada en la esquina superior derecha de la página. Haga clic en él para navegar a la página "Administre su cuenta". Seleccione "Autenticación TwoFactor" en el menú de la izquierda. Verá una página similar a la que se muestra a continuación.

Haga clic en el botón "Configurar la aplicación de autenticación". Puede ver un código QR generado en su pantalla: está pidiendo un "Código de verificación", también como se muestra en la imagen a continuación.

Debe instalar la aplicación Google Authenticator en su teléfono inteligente. Le permitirá escanear este código QR para generar un Código de verificación y completar la configuración de autenticación de dos factores.

Descargue e instale el autenticador de Google desde Play Store para Android y desde App Store para iOS. Estamos utilizando un dispositivo Android para esta demostración.

Inicie la aplicación en su teléfono inteligente. Puede ver la pantalla de bienvenida como se muestra en la imagen a continuación.

Haga clic en "Comenzar". Le pedirá que agregue una cuenta proporcionando dos opciones:

  1. Escanear un código de barras
  2. Ingrese una clave proporcionada

Haga clic en "Escanear un código de barras" y escanee el código QR generado por la aplicación web. Esto agregará una nueva cuenta al autenticador de Google y generará un pin de seis dígitos en la pantalla de su dispositivo móvil. Este es nuestro código de autenticación de dos factores. Este es un TOTP (contraseña de un solo uso basada en el tiempo). Puede observar que sigue cambiando con frecuencia (vida útil de 30 segundos).

Ahora puede ver el nombre de la aplicación, así como su identificación de correo electrónico registrada en la aplicación, como se muestra a continuación.

Coloque este pin en el cuadro de texto Código de verificación y haga clic en verificar. Tras una verificación exitosa, verá una pantalla similar a la que se muestra a continuación. Esto le dará los códigos de recuperación para su cuenta que lo ayudarán a recuperar su cuenta en caso de que quede bloqueado. Tome nota de estos códigos y guárdelos en un lugar seguro.

Y así, la configuración de autenticación de dos factores está completa. Verifiquemos si nuestra autenticación de dos factores funciona correctamente o no.

Demo de ejecución

Cierre la sesión de la aplicación y haga clic en iniciar sesión nuevamente. Ingrese su identificación de correo electrónico registrada y contraseña y haga clic en iniciar sesión

Ahora puede ver una pantalla de autenticación de dos factores que solicita el código del Autenticador. Ingrese el código que se genera en su aplicación Google Authenticator y haga clic en Iniciar sesión. Se iniciará sesión correctamente en la aplicación y se lo dirigirá a la página de inicio.

Si marca la opción "Recordar esta máquina", no volverá a solicitar el código del autenticador en la misma máquina. Puede omitir la autenticación de dos factores en este caso.

Conclusión

Hemos generado con éxito un código QR utilizando la biblioteca JavaScript qrcode.js y lo hemos utilizado para configurar la aplicación Google Authenticator. Esta aplicación generará un TOTP de seis dígitos que debe ingresar al iniciar sesión en la aplicación web. Esto implementa la autenticación de dos factores en una aplicación ASP.NET Core.

También puede encontrar este artículo en C # Corner.

Puede consultar mis otros artículos sobre ASP .NET Core aquí.

Ver también

  • Autenticación de cookies con ASP.NET Core 2.0
  • Autenticación con Facebook en ASP.NET Core 2.0
  • Autenticación con Google en ASP.NET Core 2.0
  • Autenticación usando Twitter en ASP.NET Core 2.0
  • Autenticación con LinkedIn en ASP.NET Core 2.0

Publicado originalmente en https://ankitsharmablogs.com/