Autenticación con Google en ASP.NET Core 2.0

Introducción

A veces, queremos que nuestros usuarios inicien sesión con sus credenciales existentes de aplicaciones de terceros, como Facebook, Twitter, Google, etc. En este artículo, analizaremos la autenticación de una aplicación ASP.NET Core utilizando una cuenta de Google.

Prerrequisitos

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

Crear 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ú de Visual C # en el panel izquierdo. Luego, seleccione "Aplicación web ASP.NET Core" de los tipos de proyectos disponibles. Poner el nombre del proyecto de una s GoogleAuth y pulse OK. Consulte esta imagen.

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 observar dos menús desplegables en la parte superior izquierda de la ventana de la plantilla. Seleccione ".NET Core" y "ASP.NET Core 2.0" en estos menús desplegables. Luego, seleccione la plantilla “Aplicación web (Modelo-Vista-Controlador)”. Haga clic en el botón Cambiar autenticación y se abrirá un cuadro de diálogo "Cambiar autenticación". Seleccione "Cuenta de usuario individual" y haga clic en Aceptar. Ahora, haga clic en Aceptar nuevamente para crear nuestra aplicación web.

Antes de ejecutar la aplicación, debemos aplicar las migraciones a nuestra aplicación.

Vaya a Herramientas >> Administrador de paquetes Nuget >> Consola del administrador de paquetes.

Abrirá la Consola del Administrador de paquetes. Ingrese el comando Update-Database y presione enter. Esto actualizará la base de datos mediante las migraciones de Entity Framework Code First.

Presione F5 para ejecutar la aplicación. Verá una página de inicio, como se muestra a continuación.

Anote la URL de la barra de direcciones del navegador. En este caso, la URL es // localhost: 51792 /. Necesitamos esta URL para configurar nuestra aplicación de Google, lo que haremos en la siguiente sección.

Crea la aplicación de Google

Necesitamos crear una nueva aplicación de Google en la consola API de Google. Vaya a //console.developers.google.com/projectselector/apis/library e inicie sesión con su cuenta de Google. Si no tiene una cuenta de Google, debe crear una. No puede continuar sin una cuenta de Google. Una vez que haya iniciado sesión, será redirigido a la página de la biblioteca de API Manager, similar a la que se muestra a continuación.

Haga clic en el botón Crear para pasar a la página "Nuevo proyecto", donde necesita crear un nuevo proyecto. El campo "Nombre del proyecto" se completará automáticamente con un nombre predeterminado proporcionado por Google. Si lo desea, puede anularlo con su propio nombre personalizado. Para este tutorial, usaremos el nombre predeterminado. Acepte los términos de servicio y luego haga clic en Crearbotón .

Su proyecto se creará con éxito y será redirigido a la página de la Biblioteca API similar a la que se muestra a continuación.

Busque la API de Google+ en la barra de búsqueda y seleccione la API de Google+ en los resultados de búsqueda. Consulte la siguiente imagen.

Después de seleccionar la opción API de Google+, se le redirigirá a una página como se muestra a continuación, donde debe hacer clic en el botón Habilitar .

Después de esto, se habilitará la API de Google+ y se le redirigirá a la página de inicio de la API. Haga clic en Crear credencialesen el lado derecho de la página para configurar los secretos de su API.

Verá un formulario "Agregar credenciales a su proyecto".

Este formulario tiene tres secciones.

Complete los detalles de las secciones como se describe a continuación.

Sección 1: averigüe qué tipo de credenciales necesita

  • ¿Qué API estás usando? - API de Google+
  • ¿Desde dónde llamarás a la API? - Servidor web (por ejemplo, Node.js, Tomcat)
  • ¿A qué datos accederás? - Datos del usuario

Y haga clic en el botón ¿Qué credenciales necesito ? Serás redirigido a la sección 2.

Sección 2: Cree un ID de cliente de OAuth 2.0

  • Nombre: el valor predeterminado proporcionado por Google.
  • Orígenes de JavaScript autorizados: déjelo en blanco.
  • URI de redireccionamiento autorizado: proporcione la URL base de su aplicación con / signin-google adjunto. Para este tutorial, la URL será // localhost: 51792 / signin-google. Después de ingresar la URL, presione TAB para agregar el valor.

Después de esto, haga clic en el botón Crear ID de cliente . Será redirigido a la sección 3.

Sección 3: configurar la pantalla de consentimiento de OAuth 2.0

  • Dirección de correo electrónico: seleccione su dirección de correo electrónico en el menú desplegable. Este valor está enmascarado en la imagen anterior por motivos de privacidad.
  • Nombre del producto mostrado a los usuarios: ingrese cualquier nombre de producto. Aquí estamos usando "AuthDemo" como el nombre del producto.

Nota : No utilice la palabra "Google" en el nombre de su producto. Se le indicará un error y no se le permitirá crear la aplicación. Esto significa que "GoogleAuthDemo" es un nombre no válido.

Haga clic en continuar.

Sus credenciales se han creado correctamente. Haga clic en Descargar para descargar un archivo JSON a su máquina local con todos los secretos de su aplicación, y luego haga clic en Listo para completar el proceso.

Abra el archivo client_id.json que acaba de descargar y tome nota de los campos ClientId y ClientSecret . Necesitaremos estos valores para configurar la autenticación de Google en nuestra aplicación web.

Configure su aplicación web para usar la autenticación de Google

Necesitamos almacenar los valores de los campos ClientId y ClientSecret en nuestra aplicación. Usaremos la herramienta Secret Manager para este propósito. La herramienta Secret Manager es una herramienta de proyecto que se puede usar para almacenar secretos como contraseña, clave de API, etc. para un proyecto .NET Core durante el proceso de desarrollo. Con la herramienta Secret Manager, podemos asociar secretos de aplicaciones con un proyecto específico y compartirlos en varios proyectos.

Abra su aplicación web una vez más y haga clic con el botón derecho en el proyecto en el Explorador de soluciones. Seleccione Administrar secretos de usuario en el menú contextual.

Se abrirá un archivo secrets.json . Pon el siguiente código en él:

{ "Authentication:Google:ClientId": "Your Google ClientId here", "Authentication:Google:ClientSecret": "Your Google ClientSecret here" }

Ahora abra el archivo Startup.cs y coloque el siguiente código en el método ConfigureServices :

services.AddAuthentication().AddGoogle(googleOptions => { googleOptions.ClientId = Configuration["Authentication:Google:ClientId"]; googleOptions.ClientSecret = Configuration["Authentication:Google:ClientSecret"]; });

En esta sección de código, estamos leyendo ClientId y ClientSecret con fines de autenticación. Entonces, finalmente, Startup.csse verá así:

using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; using Microsoft.AspNetCore.Builder; using Microsoft.AspNetCore.Identity; using Microsoft.EntityFrameworkCore; using Microsoft.AspNetCore.Hosting; using Microsoft.Extensions.Configuration; using Microsoft.Extensions.DependencyInjection; using GoogleAuth.Data; using GoogleAuth.Models; using GoogleAuth.Services; namespace GoogleAuth { public class Startup { public Startup(IConfiguration configuration) { Configuration = configuration; } public IConfiguration Configuration { get; } // This method gets called by the runtime. Use this method to add services to the container. public void ConfigureServices(IServiceCollection services) { services.AddDbContext(options => options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection"))); services.AddIdentity() .AddEntityFrameworkStores() .AddDefaultTokenProviders(); services.AddAuthentication().AddGoogle(googleOptions => { googleOptions.ClientId = Configuration["Authentication:Google:ClientId"]; googleOptions.ClientSecret = Configuration["Authentication:Google:ClientSecret"]; }); // Add application services. services.AddTransient(); services.AddMvc(); } // This method gets called by the runtime. Use this method to configure the HTTP request pipeline. public void Configure(IApplicationBuilder app, IHostingEnvironment env) { if (env.IsDevelopment()) { app.UseBrowserLink(); app.UseDeveloperExceptionPage(); app.UseDatabaseErrorPage(); } else { app.UseExceptionHandler("/Home/Error"); } app.UseStaticFiles(); app.UseAuthentication(); app.UseMvc(routes => { routes.MapRoute( name: "default", template: "{controller=Home}/{action=Index}/{id?}"); }); } } }

Y con esto, nuestra aplicación está lista.

Demostración de ejecución

Inicie la aplicación y haga clic en Iniciar sesión en la esquina superior derecha de la página de inicio.

Se le redirigirá a // localhost: 51792 / Account / Login page, donde podrá ver la opción para iniciar sesión con Google en el lado derecho de la página.

Al hacer clic en el botón de Google, accederá a la página de inicio de sesión de Google. Allí, se le pedirá que complete sus credenciales de Google y autorice a la aplicación de Google a usar su cuenta de Google.

After successful authentication from Google, you will be redirected to a registration page inside your application where you need to fill in an email id to tag with your account. The Gmail id that you have used to login will already be populated in the Email id field. If you want to use another mail id, you can change it here.

Click register, you will be redirected to the home page again. But this time you can also see that your registered email is on the top right corner.

Conclusion

We have successfully created and configured a Google+ app and used it to authenticate our ASP.NET Core application.

You can get the source code from GitHub.

Please note that the secrets.json file contains dummy values. You’ll need to replace the values with the keys of your Google app before executing it.

You can also find this article at C# Corner.

You can check my other articles on ASP .NET Core here

See Also

  • Authentication Using LinkedIn In ASP.NET Core 2.0
  • Authentication Using Twitter In ASP.NET Core 2.0
  • Authentication Using Facebook In ASP.NET Core 2.0
  • Cookie Authentication With ASP.NET Core 2.0
  • ASP.NET Core — Two Factor Authentication Using Google Authenticator

Originally published at ankitsharmablogs.com