Saltar al contenido principal

Usa IA para integrar Auth0

Si usas un asistente de programación con IA, como Claude Code, Cursor o GitHub Copilot, puedes añadir la autenticación de Auth0 automáticamente en cuestión de minutos con agent skills.Instala:
npx skills add auth0/agent-skills --skill auth0-quickstart --skill auth0-aspnetcore-authentication
Luego, pídele a tu asistente de IA:
Add Auth0 authentication to my Blazor Server app
Tu asistente de IA creará automáticamente tu aplicación en Auth0, recuperará las credenciales, instalará el SDK de autenticación de Auth0 para ASP.NET Core, configurará el middleware de autenticación e implementará los flujos de inicio y cierre de sesión. Documentación completa de agent skills →
Requisitos previos: Antes de comenzar, asegúrate de tener instalado lo siguiente:
  • .NET SDK 8.0 o posterior
  • Tu editor de código favorito (Visual Studio, VS Code o Rider)
  • Una cuenta de Auth0 (regístrate gratis)

​
Primeros pasos

Auth0 le permite añadir autenticación rápidamente y acceder a la información del perfil del usuario en su aplicación. Esta guía muestra cómo integrar Auth0 con cualquier aplicación de Blazor Server, nueva o existente, mediante el SDK Auth0.AspNetCore.Authentication.
1

Crea un proyecto nuevo

Cree un proyecto nuevo de Blazor Server para esta guía de inicio rápido
dotnet new blazor -n SampleBlazorApp --interactivity Server
Abre el proyecto
cd SampleBlazorApp
2

Instala el SDK de Auth0

dotnet add package Auth0.AspNetCore.Authentication
3

Configura tu aplicación de Auth0

A continuación, debes crear una nueva aplicación en tu tenant de Auth0 y agregar la configuración a tu proyecto.Puede hacerlo automáticamente ejecutando un comando de CLI o de forma manual a través del Dashboard:
Ejecute el siguiente comando de shell en el directorio raíz de su proyecto para crear una aplicación en Auth0 y actualizar el archivo appsettings.json:
AUTH0_APP_NAME="My Blazor App" && brew tap auth0/auth0-cli && brew install auth0 && auth0 login --no-input && auth0 apps create -n "${AUTH0_APP_NAME}" -t regular -c http://localhost:5000/callback -l http://localhost:5000 -o http://localhost:5000 --reveal-secrets --json --metadata created_by="quickstart-docs-cli" > auth0-app-details.json && CLIENT_ID=$(jq -r '.client_id' auth0-app-details.json) && CLIENT_SECRET=$(jq -r '.client_secret' auth0-app-details.json) && DOMAIN=$(auth0 tenants list --json | jq -r '.[] | select(.active == true) | .name') && rm auth0-app-details.json && cat > appsettings.json << EOF
{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*",
  "Auth0": {
    "Domain": "${DOMAIN}",
    "ClientId": "${CLIENT_ID}",
    "ClientSecret": "${CLIENT_SECRET}"
  }
}
EOF
echo "appsettings.json se creó con sus datos de Auth0:" && cat appsettings.json
Configurar las URL de callback:En la pestaña Settings, configure las siguientes URL:
  • Allowed Callback URLs: http://localhost:5000/callback
  • URL de cierre de sesión permitidas: http://localhost:5000
  • Orígenes web permitidos: http://localhost:5000
Haz clic en Save Changes
Importante: Asegúrate de configurar las conexiones y de habilitarlas para tu aplicación en el Auth0 Dashboard, en la pestaña Conexiones.
4

Configurar la autenticación

Actualiza tu Program.cs para configurar la autenticación con Auth0:
Program.cs
using Auth0.AspNetCore.Authentication;
using SampleBlazorApp.Components;

var builder = WebApplication.CreateBuilder(args);

// Agregar autenticación de Auth0
builder.Services.AddAuth0WebAppAuthentication(options =>
{
    options.Domain = builder.Configuration["Auth0:Domain"];
    options.ClientId = builder.Configuration["Auth0:ClientId"];
    options.ClientSecret = builder.Configuration["Auth0:ClientSecret"];
});

// Agregar componentes Razor y Blazor Server
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

// Agregar estado de autenticación en cascada
builder.Services.AddCascadingAuthenticationState();

// Agregar Razor Pages para los endpoints de autenticación
builder.Services.AddRazorPages();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error", createScopeForErrors: true);
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseAntiforgery();

app.UseAuthentication();
app.UseAuthorization();

app.MapStaticAssets();
app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

// Mapear Razor Pages para autenticación
app.MapRazorPages();

app.Run();
Nota: El orden del middleware es importante. UseAuthentication() debe llamarse antes que UseAuthorization().
5

Agregar páginas de inicio de sesión y cierre de sesión

Cree las páginas de Login y Logout para permitir que los usuarios se autentiquen.Primero, cree la carpeta Pages y los archivos:
mkdir -p Pages && touch Pages/Login.cshtml Pages/Login.cshtml.cs Pages/Logout.cshtml Pages/Logout.cshtml.cs Pages/_ViewImports.razor
Luego, agregue los siguientes fragmentos de código:
6

Crear la página de perfil y actualizar el diseño

Cree una página personalizada de perfil de usuario para mostrar el nombre y las claims del usuario, y actualice el layout para agregar enlaces de inicio y cierre de sesión.Primero, cree el componente Profile:
touch Components/Pages/Profile.razor
Agregue los siguientes fragmentos de código. Tenga en cuenta que debe agregar el código de MainLayout en la sección superior de su layout, sin modificar el resto del contenido.
7

Ejecuta tu aplicación

dotnet run
La aplicación debería iniciarse y mostrar la URL en la que está disponible:
info: Microsoft.Hosting.Lifetime[14]
      Now listening on: http://localhost:5000
Abra el navegador y vaya a http://localhost:5000. Haga clic en el enlace Login de la navegación. Se le redirigirá a la página de inicio de sesión de Auth0. Después de iniciar sesión, se le redirigirá de nuevo a la aplicación y debería ver su nombre en la navegación.
Punto de verificaciónAhora debería tener una aplicación de Blazor Server totalmente funcional protegida con Auth0 ejecutándose en http://localhost:5000. Los usuarios pueden iniciar sesión, ver su perfil y cerrar sesión.

​
Uso avanzado

Puedes pasar parámetros personalizados a la página de inicio de sesión de Auth0:
Pages/Login.cshtml.cs
public async Task OnGet(string redirectUri = "/")
{
    var authenticationProperties = new LoginAuthenticationPropertiesBuilder()
        .WithRedirectUri(redirectUri)
        .WithParameter("screen_hint", "signup")  // Mostrar la página de registro
        .WithParameter("ui_locales", "es")       // Configurar el idioma en español
        .Build();

    await HttpContext.ChallengeAsync(Auth0Constants.AuthenticationScheme, authenticationProperties);
}
Si necesitas llamar a APIs externas en nombre del usuario, puedes obtener y almacenar tokens:
Program.cs
builder.Services.AddAuth0WebAppAuthentication(options =>
{
    options.Domain = builder.Configuration["Auth0:Domain"];
    options.ClientId = builder.Configuration["Auth0:ClientId"];
    options.ClientSecret = builder.Configuration["Auth0:ClientSecret"];
})
.WithAccessToken(options =>
{
    options.Audience = "https://your-api.example.com";
    options.UseRefreshTokens = true;
});
Luego, recupera el token de acceso:
var accessToken = await HttpContext.GetTokenAsync("access_token");

// Usa el token de acceso para llamar a tu API
var client = new HttpClient();
client.DefaultRequestHeaders.Authorization = 
    new AuthenticationHeaderValue("Bearer", accessToken);

var response = await client.GetAsync("https://your-api.example.com/data");
var data = await response.Content.ReadAsStringAsync();
Configura la compatibilidad con organizaciones para escenarios B2B:
Program.cs
builder.Services.AddAuth0WebAppAuthentication(options =>
{
    options.Domain = builder.Configuration["Auth0:Domain"];
    options.ClientId = builder.Configuration["Auth0:ClientId"];
    options.ClientSecret = builder.Configuration["Auth0:ClientSecret"];
    options.Organization = builder.Configuration["Auth0:Organization"];
});
O especifica la organización al iniciar sesión:
Pages/Login.cshtml.cs
var authenticationProperties = new LoginAuthenticationPropertiesBuilder()
    .WithOrganization("org_abc123")
    .WithRedirectUri("/")
    .Build();

​
Problemas comunes

Problema: Unable to obtain configuration from: https://your-tenant.auth0.com/.well-known/openid-configurationSolución: Verifique que su dominio sea correcto y que no incluya https://. La biblioteca construye la autoridad automáticamente.
{
  "Auth0": {
    "Domain": "your-tenant.auth0.com"  // Correcto: sin protocolo
  }
}
Asegúrese también de que:
  • No haya una barra diagonal al final del valor del dominio
  • Su aplicación tenga acceso a Internet para conectarse a Auth0
  • El formato del dominio coincida con la región de su inquilino (.auth0.com, .us.auth0.com, .eu.auth0.com)
Problema: ArgumentNullException: Value cannot be null. (Parameter 'Domain') o similar.Solución: Asegúrese de que appsettings.json contenga la sección Auth0 con los valores Domain, ClientId y ClientSecret. Compruebe que la configuración se esté leyendo correctamente:
Program.cs
builder.Services.AddAuth0WebAppAuthentication(options =>
{
    options.Domain = builder.Configuration["Auth0:Domain"]
        ?? throw new InvalidOperationException("Auth0:Domain is required");
    options.ClientId = builder.Configuration["Auth0:ClientId"]
        ?? throw new InvalidOperationException("Auth0:ClientId is required");
    options.ClientSecret = builder.Configuration["Auth0:ClientSecret"]
        ?? throw new InvalidOperationException("Auth0:ClientSecret is required");
});
Problema: La autenticación no funciona a pesar de que la configuración es correcta.Solución: Asegúrese de que el middleware esté en el orden correcto. UseAuthentication() debe ir antes de UseAuthorization():
Program.cs
app.UseRouting();
app.UseAuthentication();  // Debe ir antes de UseAuthorization
app.UseAuthorization();
app.MapControllerRoute(...);

​
Recursos adicionales

Repositorio de GitHub

Código fuente y seguimiento de problemas

Referencia de la API

Documentación detallada de la API

Foro de la comunidad

Obtén ayuda de la comunidad de Auth0

​
Aplicación de ejemplo

A continuación, se muestra una aplicación de ejemplo que ilustra la integración de Auth0 con ASP.NET Core MVC:

Aplicación Blazor de ASP.NET Core

Incluye ejemplos de inicio de sesión, cierre de sesión, perfil de usuario y más.
Clona y ejecuta: 
git clone https://github.com/auth0-samples/auth0-aspnetcore-blazor-server-samples/tree/main/Quickstart/Sample

# Actualiza appsettings.json con tu configuración de Auth0
dotnet run