Google OAuth 2.0 en ASP.NET Core

En este post veremos cómo integrar Google OAuth 2.0 en una aplicación ASP.NET Core MVC. La idea es permitir que los usuarios inicien sesión utilizando sus cuentas de Google, lo que simplifica la autenticación, mejora la experiencia de usuario y reduce la necesidad de gestionar contraseñas propias. A continuación, te presento una guía paso a paso, conceptos clave y algunas preguntas frecuentes.

¿Qué es OAuth 2.0?

OAuth 2.0 es un protocolo de autorización que permite a las aplicaciones acceder a recursos protegidos sin necesidad de que el usuario comparta sus credenciales. En lugar de enviar nombre de usuario y contraseña, la aplicación recibe un token de acceso, lo que garantiza mayor seguridad. En el caso de Google OAuth 2.0, se utiliza el Authorization Code Flow, un proceso en el que el usuario inicia sesión en Google, se genera un código de autorización y, finalmente, este código se canjea por un token de acceso.

Diferencia entre Autenticación y Autorización

Autenticación: Verifica la identidad del usuario (¿quién eres?).
Autorización: Define qué recursos o acciones puede realizar el usuario (¿qué puedes hacer?).

Google OAuth 2.0 se centra en la autenticación, pero también puede usarse para autorizar el acceso a recursos protegidos mediante scopes (permisos).

Componentes Clave de la Integración

Credenciales de la Aplicación:
- Client ID y Client Secret: Son generados al registrar tu aplicación en la Google Cloud Console.
- Redirect URI (Callback Path): Es la URL a la que Google redirige al usuario después de autenticarse. Por ejemplo, https://localhost:7011/signin-google. Es fundamental que esta URL coincida exactamente con la configurada en la consola de Google.
Middleware en .NET Core:
Utilizamos el paquete Microsoft.AspNetCore.Authentication.Google para manejar el flujo OAuth dentro de nuestra aplicación. Este middleware se encarga de redirigir al usuario a Google, recibir el código de autorización y canjearlo por un token.
Manejo de Claims:
Al autenticarse, Google envía información (claims) del usuario, como su correo electrónico, nombre y foto de perfil. Estos datos se pueden extraer desde el objeto User en el controlador para personalizar la experiencia.
Buenas Prácticas de Seguridad:
- Almacenar las credenciales en appsettings.json, o mejor aún, en User Secrets o variables de entorno.
- Utilizar un archivo .gitignore para evitar que estos datos sensibles se suban a repositorios públicos.

Configuración en ASP.NET Core MVC

1. Archivo de Configuración (appsettings.json)

{
  "Authentication": {
    "Google": {
      "ClientId": "tu-client-id.apps.googleusercontent.com",
      "ClientSecret": "tu-client-secret"
    }
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  }
}

Nota: Asegúrate de registrar el URI de redireccionamiento correcto (por ejemplo, https://localhost:7011/signin-google) en la Google Cloud Console.

2. Configuración del Middleware (Program.cs)

using Microsoft.AspNetCore.Authentication.Cookies;
using Microsoft.AspNetCore.Authentication.Google;
using Microsoft.EntityFrameworkCore;
using MvcNetCoreCryptography.Data;
using MvcNetCoreCryptography.Repositories;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddControllersWithViews();

// ----------------- CONEXIÓN A LA BASE DE DATOS -----------------
builder.Services.AddTransient<RepositoryUsuarios>();
string connectionString = builder.Configuration.GetConnectionString("SqlHospital");
builder.Services.AddDbContext<UsuariosContext>(options =>
    options.UseSqlServer(connectionString));

//-- GOOGLE AUTH 2.0 --
builder.Services.AddAuthentication(options =>
{
    options.DefaultAuthenticateScheme = CookieAuthenticationDefaults.AuthenticationScheme;
    options.DefaultSignInScheme = CookieAuthenticationDefaults.AuthenticationScheme;
    options.DefaultChallengeScheme = GoogleDefaults.AuthenticationScheme;
})
.AddCookie()
.AddGoogle(options =>
{
    // Se leen las credenciales desde appsettings.json
    options.ClientId = builder.Configuration["Authentication:Google:ClientId"];
    options.ClientSecret = builder.Configuration["Authentication:Google:ClientSecret"];
    options.CallbackPath = "/signin-google"; // URL interna que gestiona la respuesta de Google
});

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseRouting();

app.UseAuthentication();  // Importante: Se debe activar antes de UseAuthorization
app.UseAuthorization();

app.MapStaticAssets();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}")
    .WithStaticAssets();

app.Run();

3. Controlador y Manejo de Claims

En el controlador, creamos una acción que extraiga el correo del usuario y lo pase a una vista de bienvenida.

using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using System.Security.Claims;

namespace GoogleAuthMVC.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

        [Authorize]
        public IActionResult Welcome()
        {
            // Extraemos la claim de correo electrónico del usuario autenticado
            var email = User.Claims.FirstOrDefault(c => c.Type == ClaimTypes.Email)?.Value;
            return View(model: email);
        }

        public IActionResult Logout()
        {
            return SignOut("Cookies", "Google");
        }
    }
}

4. Vista de Bienvenida (Welcome.cshtml)

Creamos una vista sencilla que muestre el correo del usuario autenticado:

@model string
@{
    ViewData["Title"] = "Bienvenido";
}

<div class="container mt-5">
    <div class="card shadow">
        <div class="card-header text-center bg-success text-white">
            <h2>Bienvenido a través de Google!</h2>
        </div>
        <div class="card-body">
            <p>Has iniciado sesión correctamente utilizando tu cuenta de Google.</p>
            @if (!string.IsNullOrEmpty(Model))
            {
                <p>Tu correo electrónico es: <strong>@Model</strong></p>
            }
            <div class="text-center mt-3">
                <a href="@Url.Action("Logout", "Home")" class="btn btn-danger">Cerrar sesión</a>
            </div>
        </div>
    </div>
</div>

Buenas Prácticas y Preguntas Frecuentes

Conceptos Clave a Recordar

Client ID y Client Secret: Se obtienen al registrar la aplicación en Google Cloud Console.
Redirect URI: Debe coincidir con el valor configurado en Google Cloud Console (por ejemplo, https://localhost:7011/signin-google).
Claims: Información que provee Google (como el correo electrónico) que se extrae en la acción de bienvenida.
Middleware: El paquete Microsoft.AspNetCore.Authentication.Google gestiona el flujo de autenticación sin necesidad de crear una vista específica para /signin-google.

Posibles Preguntas Durante la Charla

¿Cuál es la diferencia entre autenticación y autorización en OAuth 2.0?
- La autenticación verifica la identidad del usuario, mientras que la autorización determina los permisos para acceder a recursos.
¿Por qué es importante configurar correctamente el Redirect URI?
- Porque Google valida la URL a la que redirige y, si no coincide, se produce un error de redirect_uri_mismatch.
¿Cómo se manejan los datos del usuario en la aplicación?
- A través de las claims, que se pueden extraer del objeto User en el controlador, permitiéndote acceder a datos como el correo electrónico.
¿Qué medidas de seguridad se recomiendan?
- Utilizar User Secrets o variables de entorno para las credenciales, y excluir archivos sensibles mediante .gitignore.

Conclusión

Integrar Google OAuth 2.0 en ASP.NET Core MVC es un proceso sencillo y seguro que mejora la experiencia de usuario al permitir iniciar sesión con una cuenta de Google. Con la configuración correcta, la gestión de claims y las buenas prácticas de seguridad, puedes implementar esta funcionalidad en tus proyectos full stack de manera óptima.

Esta guía te proporciona una base sólida para comprender los conceptos clave y responder a las posibles preguntas que surjan durante la charla. ¡Éxito en tu presentación!

Autor: Jaime Jesús Laguna Moreno

Máster: Desarrollo Web Full Stack + MultiCloud

Centro: Tajamar Tech

Año académico: 2024-2025

Otros datos de interés:

GitHub: https://github.com/jjlagunamoreno
LinkedIn: https://www.linkedin.com/in/jaime-laguna-moreno/
Código del proyecto: https://github.com/jjlagunamoreno/GoogleAuthMVC