Passer au contenu principal

Utilisez l’IA pour intégrer Auth0

Si vous utilisez un assistant de programmation par IA comme Claude Code, Cursor ou GitHub Copilot, vous pouvez ajouter automatiquement l’authentification Auth0 en quelques minutes grâce aux agent skills.Installation :
npx skills add auth0/agent-skills --skill auth0-quickstart --skill auth0-aspnetcore-authentication
Demandez ensuite à votre assistant IA :
Add Auth0 authentication to my Blazor Server app
Votre assistant IA créera automatiquement votre application Auth0, obtiendra les identifiants, installera le SDK d’authentification Auth0 pour ASP.NET Core, configurera le middleware d’authentification et implémentera les flux de connexion et de déconnexion. Documentation complète sur les agent skills →
Prérequis : Avant de commencer, assurez-vous d’avoir installé les éléments suivants :

​
Pour commencer

Auth0 vous permet d’ajouter rapidement l’authentification et d’accéder aux informations du profil de l’utilisateur dans votre application. Ce guide explique comment intégrer Auth0 à toute application Blazor Server, nouvelle ou existante, à l’aide du SDK Auth0.AspNetCore.Authentication.
1

Créer un nouveau projet

Créez un projet Blazor Server pour ce guide de démarrage rapide
dotnet new blazor -n SampleBlazorApp --interactivity Server
Ouvrez le projet
cd SampleBlazorApp
2

Installez le SDK Auth0

dotnet add package Auth0.AspNetCore.Authentication
3

Configurez votre application Auth0

Ensuite, créez une nouvelle application sur votre locataire Auth0 et ajoutez la configuration à votre projet.Vous pouvez effectuer cette opération automatiquement en exécutant une commande CLI ou manuellement via le Auth0 Dashboard :
Exécutez la commande shell suivante dans le répertoire racine de votre projet pour créer une application Auth0 et mettre à jour votre fichier 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 created with your Auth0 details:" && cat appsettings.json
Configurer les URL de rappel :Dans l’onglet Settings, configurez les URL suivantes :
  • Allowed Callback URLs : http://localhost:5000/callback
  • URL de déconnexion autorisées : http://localhost:5000
  • Origines Web autorisées : http://localhost:5000
Cliquez sur Enregistrer les modifications
Important : Assurez-vous de configurer les connexions et de les activer pour votre application dans l’Auth0 Dashboard, à l’onglet Connexions.
4

Configurer l’authentification

Mettez à jour votre Program.cs pour configurer l’authentification avec Auth0 :
Program.cs
using Auth0.AspNetCore.Authentication;
using SampleBlazorApp.Components;

var builder = WebApplication.CreateBuilder(args);

// Ajouter l'authentification Auth0
builder.Services.AddAuth0WebAppAuthentication(options =>
{
    options.Domain = builder.Configuration["Auth0:Domain"];
    options.ClientId = builder.Configuration["Auth0:ClientId"];
    options.ClientSecret = builder.Configuration["Auth0:ClientSecret"];
});

// Ajouter les composants Razor et Blazor Server
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

// Ajouter l'état d'authentification en cascade
builder.Services.AddCascadingAuthenticationState();

// Ajouter les pages Razor pour les points de terminaison d'authentification
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();

// Mapper les pages Razor pour l'authentification
app.MapRazorPages();

app.Run();
Remarque : L’ordre des middleware est important. UseAuthentication() doit être appelé avant UseAuthorization().
5

Ajouter des pages de connexion et de déconnexion

Créez des pages Login et Logout pour que les utilisateurs puissent s’authentifier.Tout d’abord, créez le dossier Pages et les fichiers suivants :
mkdir -p Pages && touch Pages/Login.cshtml Pages/Login.cshtml.cs Pages/Logout.cshtml Pages/Logout.cshtml.cs Pages/_ViewImports.razor
Ajoutez ensuite les extraits de code suivants :
6

Créer la page de profil et mettre à jour la disposition

Créez une page de profil utilisateur personnalisée pour afficher le nom et les claims de l’utilisateur, puis mettez en page à jour pour ajouter des liens de connexion et de déconnexion.Commencez par créer le composant Profile :
touch Components/Pages/Profile.razor
Ajoutez les extraits de code suivants. Veillez à ajouter le code MainLayout dans la section supérieure de votre mise en page, sans modifier le reste.
7

Lancez votre application

dotnet run
Votre application devrait démarrer et afficher l’URL sur laquelle elle répond :
info: Microsoft.Hosting.Lifetime[14]
      Now listening on: http://localhost:5000
Ouvrez votre navigateur et accédez à http://localhost:5000. Cliquez sur le lien Connexion dans le menu de navigation. Vous serez redirigé vers la page de connexion d’Auth0. Après vous être connecté, vous serez redirigé vers votre application, et vous devriez voir votre nom dans le menu de navigation.
Point de contrôleVous devriez maintenant avoir une application Blazor Server entièrement fonctionnelle protégée par Auth0, accessible à l’adresse http://localhost:5000. Les utilisateurs peuvent se connecter, consulter leur profil et se déconnecter.

​
Utilisation avancée

Vous pouvez transmettre des paramètres personnalisés à la page de connexion d’Auth0 :
Pages/Login.cshtml.cs
public async Task OnGet(string redirectUri = "/")
{
    var authenticationProperties = new LoginAuthenticationPropertiesBuilder()
        .WithRedirectUri(redirectUri)
        .WithParameter("screen_hint", "signup")  // Afficher la page d’inscription
        .WithParameter("ui_locales", "es")       // Définir l’espagnol comme langue
        .Build();

    await HttpContext.ChallengeAsync(Auth0Constants.AuthenticationScheme, authenticationProperties);
}
Si vous devez appeler des API externes au nom de l’utilisateur, vous pouvez récupérer et stocker les jetons :
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;
});
Récupérez ensuite le jeton d’accès :
var accessToken = await HttpContext.GetTokenAsync("access_token");

// Utiliser le jeton d’accès pour appeler votre 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();
Configurez la prise en charge des organisations dans les scénarios 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"];
});
Ou précisez l’organisation au moment de la connexion :
Pages/Login.cshtml.cs
var authenticationProperties = new LoginAuthenticationPropertiesBuilder()
    .WithOrganization("org_abc123")
    .WithRedirectUri("/")
    .Build();

​
Problèmes courants

Problème : Unable to obtain configuration from: https://your-tenant.auth0.com/.well-known/openid-configurationSolution : Vérifiez que votre Domaine est correct et qu’il n’inclut pas https://. La bibliothèque construit automatiquement l’URL d’autorité.
{
  "Auth0": {
    "Domain": "your-tenant.auth0.com"  // Correct : aucun protocole
  }
}
Assurez-vous également de ce qui suit :
  • Aucune barre oblique à la fin de la valeur du domaine
  • Votre application dispose d’un accès Internet pour joindre Auth0
  • Le format du domaine correspond à la région de votre locataire (.auth0.com, .us.auth0.com, .eu.auth0.com)
Problème : ArgumentNullException: Value cannot be null. (Parameter 'Domain') ou un message semblable.Solution : Assurez-vous que appsettings.json contient la section Auth0 avec les valeurs Domain, ClientId et ClientSecret. Vérifiez que la configuration est lue correctement :
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");
});
Problème : L’authentification ne fonctionne pas malgré une configuration correcte.Solution : Assurez-vous que le middleware est déclaré dans le bon ordre. UseAuthentication() doit venir avant UseAuthorization() :
Program.cs
app.UseRouting();
app.UseAuthentication();  // Doit précéder UseAuthorization
app.UseAuthorization();
app.MapControllerRoute(...);

​
Ressources supplémentaires

Dépôt GitHub

Code source et suivi des enjeux

Référence de l’API

Documentation détaillée de l’API

Forum de la communauté

Obtenez de l’aide auprès de la communauté Auth0

​
Exemple d’application

Vous trouverez ci-dessous un exemple d’application qui démontre l’intégration d’Auth0 à ASP.NET Core MVC.:

Application Blazor ASP.NET Core

Comprend des exemples de connexion, de déconnexion, de profil de l’utilisateur et d’autres cas d’usage.
Clonez et exécutez : 
git clone https://github.com/auth0-samples/auth0-aspnetcore-blazor-server-samples/tree/main/Quickstart/Sample

# Mettez à jour appsettings.json avec votre configuration Auth0
dotnet run