Configuración de inicio de sesión externo de Google en ASP.NET Core

Por Valeriy Novytskyy, Rick Anderson y Sharaf Abacery

En este tutorial se muestra cómo habilitar el inicio de sesión de usuario con cuentas de Google mediante un proyecto de ejemplo ASP.NET Core creado en Uso de proveedores de inicio de sesión externos con Identity en ASP.NET Core. Siga la guía oficial de Google en Iniciar sesión con Google para la Web: Configuración para crear un identificador de cliente de la API de Google.

Creación de la aplicación en Google

• Vaya a la página Google API & Services de la plataforma Google Cloud.
• Si no existe ningún proyecto, cree un nuevo proyecto seleccionando el botón Crear proyecto . Para seleccionar un proyecto diferente al de un proyecto existente que se cargue, seleccione el botón del proyecto cargado en la esquina superior izquierda de la interfaz de usuario, seguido del proyecto. Para agregar un nuevo proyecto, seleccione el botón del proyecto cargado en la esquina superior izquierda de la interfaz de usuario, seguido del botón Nuevo proyecto .
• Al crear un proyecto:
  • Escriba un nombre de proyecto.
  • Opcionalmente, seleccione una organización para el proyecto.
  • Seleccione el botón Crear.

Después de crear el proyecto, la página Panel del proyecto se carga, donde es posible configurar el proyecto.

Abra la pestaña Credenciales para crear el cliente de OAuth.

El requisito previo para crear las credenciales es configurar la pantalla de consentimiento de OAuth. Si el consentimiento no está configurado, hay un mensaje para configurar la pantalla de consentimiento.

• Seleccione Configurar pantalla de consentimiento o seleccione pantalla de consentimiento de OAuth en la barra lateral.
• En la pantalla de consentimiento de OAuth, seleccione Introducción.
• Establezca el nombre de la aplicación y el correo electrónico de soporte técnico del usuario.
• Establezca el tipo de audiencia en Externo.
• Para agregar información de contacto , escriba una dirección de correo electrónico de contacto.
• Acepte los términos.
• Selecciona Crear.

Cree las credenciales de cliente para la aplicación abriendo el elemento de menú De la barra lateral Clientes :

• Seleccione el botón Crear cliente .
• Seleccione Aplicación web como tipo de aplicación.
• Escriba un nombre para el cliente.
• Agregue un URI de redirección autorizado. Para las pruebas locales, use la dirección https://localhost:{PORT}/signin-googlepredeterminada , donde el {PORT} marcador de posición es el puerto de la aplicación.
• Seleccione el botón Crear para crear el cliente.
• Guarde el identificador de cliente y el secreto de cliente, que se usan más adelante en la configuración de la aplicación ASP.NET.

Nota:

El segmento de URI /signin-google se establece como la devolución de llamada predeterminada del proveedor de autenticación de Google. Se puede cambiar la URL de devolución de llamada predeterminada al configurar el middleware de autenticación de Google a través de la propiedad heredada RemoteAuthenticationOptions.CallbackPath de la clase de GoogleOptions.

Al implementar la aplicación, ya sea:

• Actualice el URI de redirección de la aplicación en la consola de Google al URI de redirección implementado de la aplicación.
• Cree un nuevo registro de API de Google en la consola de Google para la aplicación de producción con su URI de redirección de producción.

Almacenar el identificador y el secreto de cliente de Google

Almacene la configuración confidencial, como el identificador de cliente de Google y los valores secretos, con secret Manager. Para este ejemplo, siga estos pasos:

1. Inicialice el proyecto para el almacenamiento secreto según las instrucciones de Almacenamiento seguro de secretos de aplicación en desarrollo en ASP.NET Core.

2. Guarde la configuración confidencial en el almacén de secretos local con las claves secretas Authentication:Google:ClientId (valor: {CLIENT ID} placeholder) y Authentication:Google:ClientSecret (valor: {CLIENT SECRET} placeholder):

   dotnet user-secrets set "Authentication:Google:ClientId" "{CLIENT ID}"
   dotnet user-secrets set "Authentication:Google:ClientSecret" "{CLIENT SECRET}"
   

El separador de : no funciona con claves jerárquicas de variables de entorno en todas las plataformas. Por ejemplo, el separador de : no es compatible con Bash. El carácter de subrayado doble, __, tiene las siguientes características:

• Compatible con todas las plataformas.
• Se reemplaza automáticamente por dos puntos :.

Administrar las credenciales de API y el uso en la consola de API.

Configuración de la autenticación de Google

Agregue el servicio de autenticación al Program archivo:

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

La sobrecarga de AddAuthentication(IServiceCollection, String) establece la propiedad DefaultScheme. La sobrecarga de AddAuthentication(IServiceCollection, Action<AuthenticationOptions>) permite configurar las opciones de autenticación, que se pueden usar para configurar esquemas de autenticación predeterminados con distintos fines. Las llamadas posteriores a AddAuthentication invalidan las propiedades configuradas anteriormente de AuthenticationOptions.

Los métodos de extensión AuthenticationBuilder que registran un controlador de autenticación solo pueden ser llamados una vez por esquema de autenticación. Existen sobrecargas que permiten configurar las propiedades del esquema, el nombre del esquema y el nombre para mostrar.

Inicio de sesión con Google

• Ejecute la aplicación y seleccione Iniciar sesión.
• En Usar otro servicio para iniciar sesión, seleccione Google.
• El explorador se redirige a Google para la autenticación.
• Seleccione la cuenta de Google para iniciar sesión o escribir las credenciales de Google.
• Si es la primera vez que inicia sesión, hay un aviso para permitir que la aplicación acceda a la información de la cuenta de Google.
• El explorador se redirige de nuevo a la aplicación, donde es posible establecer el correo electrónico.

El usuario ahora ha iniciado sesión con las credenciales de Google.

Solución de problemas

• Si el inicio de sesión no funciona y no se recibe ningún error, cambie al modo de desarrollo para que el proceso de registro de la aplicación y Google sea más fácil de depurar.
• Si la base de datos del sitio no se ha creado aplicando la migración inicial, se produce el siguiente error: Error en una operación de base de datos al procesar la solicitud. Seleccione Aplicar migraciones para crear la base de datos y actualizar la página para continuar después del error.
• Para obtener información sobre el error HTTP 500 después de que la solicitud haya sido autenticada con éxito por parte del proveedor de OAuth 2.0, como Google, y sobre cómo implementar autenticación externa con Google for React y otras aplicaciones SPA, véase Middleware not handling 'signin-google' route after successful authentication in Asp.Net Core Web Api External Login Authentication (dotnet/AspNetCore.Docs #14169).

Pasos siguientes

• En este artículo se muestra la autenticación con Google. Para obtener información sobre la autenticación con otros proveedores externos, consulte Uso de proveedores de inicio de sesión externos con Identity en ASP.NET Core.
• Una vez implementada la aplicación en Azure, restablezca el ClientSecret en la consola de la API de Google.
• Establezca Authentication:Google:ClientId y Authentication:Google:ClientSecret como configuraciones de aplicación en el portal de Azure. El sistema de configuración está configurado para leer claves de las variables de entorno.