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

  • Artículo

Por Valeriy Novytskyy y Rick Anderson

En este tutorial se muestra cómo permitir que los usuarios inicien sesión con su cuenta de Google mediante el proyecto de ASP.NET Core creado en la página anterior.

Crear el id. de cliente y el secreto de Google OAuth 2.0

  • Siga las instrucciones de Integrar inicio de sesión de Google en la aplicación web (documentación de Google).

  • Vaya a Google API y servicios.

  • Un proyecto debe existir primero, es posible que tenga que crear uno. Una vez seleccionado un proyecto, escriba el panel.

  • En la pantalla de consentimiento de Oauth del panel:

    • Seleccione Tipo de usuario: externo y CREAR.
    • En el cuadro de diálogo Información de la aplicación, proporcione un nombre de aplicación para la aplicación, el correo electrónico de soporte técnico del usuario y la información de contacto del desarrollador.
    • Ejecutar el paso Ámbitos.
    • Ejecutar el paso Usuarios de prueba.
    • Revise la pantalla de consentimiento de OAuth y vuelva al panel de la aplicación.

  • En la pestaña Credenciales del panel de la aplicación, seleccione CREAR CREDENCIALES>Id. de cliente de OAuth.

  • Seleccione Tipo de aplicación>Aplicación web, y elija un nombre.

  • En la sección URI de redirección autorizado, seleccione AGREGAR URI para establecer el URI de redirección. URI de redirección de ejemplo: https://localhost:{PORT}/signin-google, donde el marcador de posición {PORT} es el puerto de la aplicación.

  • Seleccione el botón CREAR.

  • Guarde el id. de cliente y el secreto de cliente para usarlos en la configuración de la aplicación.

  • Al implementar el sitio:

    • 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 id. de cliente de Google y el secreto

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

  1. Inicialice el proyecto para el almacenamiento de secretos según las instrucciones de Habilitar el almacenamiento de secretos.

  2. Almacene la configuración confidencial en el almacén de secretos local con las claves de secretos Authentication:Google:ClientId y Authentication:Google:ClientSecret:

    dotnet user-secrets set "Authentication:Google:ClientId" "<client-id>"
dotnet user-secrets set "Authentication:Google:ClientSecret" "<client-secret>"

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

  • Es compatible con todas las plataformas. Por ejemplo, el separador : no es compatible con Bash, pero __ sí.
  • Se reemplaza automáticamente por un signo :.

Puede administrar las credenciales de API y el uso en la consola de API.

Configuración de la autenticación de Google

Agregue el paquete NuGet Microsoft.AspNetCore.Authentication.Google a la aplicación.

Agregue el servicio de autenticación al Startup.ConfigureServices:

public void ConfigureServices(IServiceCollection services)
{
    services.AddDbContext<ApplicationDbContext>(options =>
        options.UseSqlServer(
            Configuration.GetConnectionString("DefaultConnection")));
    services.AddDefaultIdentity<IdentityUser>(options =>
        options.SignIn.RequireConfirmedAccount = true)
            .AddEntityFrameworkStores<ApplicationDbContext>();
    services.AddRazorPages();

    services.AddAuthentication()
        .AddGoogle(options =>
        {
            IConfigurationSection googleAuthNSection =
                Configuration.GetSection("Authentication:Google");

            options.ClientId = googleAuthNSection["ClientId"];
            options.ClientSecret = googleAuthNSection["ClientSecret"];
        });
}

Agregue el servicio de autenticación al Program:

var builder = WebApplication.CreateBuilder(args);
var services = builder.Services;
var configuration = builder.Configuration;

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

La llamada a AddIdentity configura los valores de esquema predeterminados. 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 AuthenticationOptions previamente configuradas.

Los métodos de extensión de AuthenticationBuilder que registran un controlador de autenticación solo se pueden llamar 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. Aparece una opción para iniciar sesión con Google.
  • Seleccione el botón Google, que redirige a Google para la autenticación.
  • Después de escribir sus credenciales de Google, se le redirigirá de nuevo al sitio web.

Reenvío de información de solicitud con un servidor proxy o un equilibrador de carga

Si la aplicación se implementa detrás de un servidor proxy o de un equilibrador de carga, parte de la información de solicitud original podría reenviarse a la aplicación en los encabezados de solicitud. Normalmente, esta información incluye el esquema de solicitud seguro (https), el host y la dirección IP del cliente. Las aplicaciones no leen automáticamente estos encabezados de solicitud para detectar y usar la información de solicitud original.

El esquema se usa en la generación de vínculos que afecta al flujo de autenticación con proveedores externos. El resultado de perder el esquema seguro (https) es que la aplicación genera direcciones URL incorrectas poco seguras.

Use middleware de encabezados reenviados para que la información de solicitud original esté disponible para la aplicación para procesar las solicitudes.

Para más información, vea Configurar ASP.NET Core para trabajar con servidores proxy y equilibradores de carga.

Varios proveedores de autenticación

Cuando la aplicación requiera varios proveedores, encadene los métodos de extensión del proveedor de AddAuthentication:

services.AddAuthentication()
    .AddMicrosoftAccount(microsoftOptions => { ... })
    .AddGoogle(googleOptions => { ... })
    .AddTwitter(twitterOptions => { ... })
    .AddFacebook(facebookOptions => { ... });

Para obtener más información sobre las opciones de configuración admitidas por la autenticación de Google, consulte la referencia de API GoogleOptions. Esto se puede usar para solicitar información diferente sobre el usuario.

Cambio del URI de devolución de llamada predeterminado

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

Solución de problemas

  • Si el inicio de sesión no funciona y no recibe ningún error, cambie al modo de desarrollo para que el problema sea más fácil de depurar.
  • Si Identity no se configura llamando a services.AddIdentity en ConfigureServices, al intentar autenticarse se produce una ArgumentException: La opción "SignInScheme" debe proporcionarse. La plantilla de proyecto que se usa en este tutorial garantiza que la Identity está configurada.
  • Si la base de datos del sitio no se ha creado aplicando la migración inicial, se produce un error Se ha producido un 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 omitir el error y continuar.
  • Error HTTP 500 después de autenticar correctamente la solicitud por parte del proveedor de OAuth 2.0, como Google: consulte este problema de GitHub.
  • Cómo implementar la autenticación externa con Google para React y otras aplicaciones de página única: consulte este problema de GitHub.

Pasos siguientes

  • En este artículo se muestra cómo puede autenticarse con Google. Puede seguir un enfoque similar para autenticarse con otros proveedores enumerados en la página anterior.
  • Una vez que publique la aplicación en Azure, restablezca el ClientSecret en la consola de API de Google.
  • Establezca Authentication:Google:ClientId y Authentication:Google:ClientSecret como configuración de la aplicación en Azure Portal. El sistema de configuración se configura para leer las claves de las variables de entorno.