Passer au contenu principal

Utiliser l’IA pour intégrer Auth0

Si vous utilisez un assistant de programmation IA comme Claude Code, Cursor ou GitHub Copilot, vous pouvez ajouter l’authentification Auth0 automatiquement en quelques minutes à l’aide des 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 ASP.NET Core MVC app
Votre assistant IA créera automatiquement votre application Auth0, récupérera les identifiants, installera le SDK Auth0 ASP.NET Core Authentication, configurera le middleware d’authentification et mettra en œuvre 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 renseignements de profil de l’utilisateur dans votre application. Ce guide explique comment intégrer Auth0 à toute application ASP.NET MVC, nouvelle ou existante, à l’aide du SDK Auth0.AspNetCore.Authentication.
1

Créer un projet

Créez un nouveau projet ASP.NET Core MVC pour ce guide de démarrage rapide
dotnet new mvc -n SampleMvcApp
Ouvrez le projet
cd SampleMvcApp
2

Installer 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 tableau de bord :
Exécutez la commande shell suivante à la racine du répertoire de votre projet pour créer une application Auth0 et mettre à jour votre fichier appsettings.json :
AUTH0_APP_NAME="My 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, sous l’onglet Connexions.
4

Configurer l’authentification

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

var builder = WebApplication.CreateBuilder(args);

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

builder.Services.AddControllersWithViews();

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    app.UseHsts();
}

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

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

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

app.Run();
5

Ajouter les fonctionnalités de connexion et de déconnexion

Créez un fichier AccountController.cs dans le dossier Controllers :
Controllers/AccountController.cs
using Auth0.AspNetCore.Authentication;
using Microsoft.AspNetCore.Authentication;
using Microsoft.AspNetCore.Authentication.Cookies;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;

public class AccountController : Controller
{
    public async Task Login(string returnUrl = "/")
    {
        var authenticationProperties = new LoginAuthenticationPropertiesBuilder()
            .WithRedirectUri(returnUrl)
            .Build();

        await HttpContext.ChallengeAsync(Auth0Constants.AuthenticationScheme, authenticationProperties);
    }

    [Authorize]
    public async Task Logout()
    {
        var authenticationProperties = new LogoutAuthenticationPropertiesBuilder()
            .WithRedirectUri(Url.Action("Index", "Home"))
            .Build();

        await HttpContext.SignOutAsync(Auth0Constants.AuthenticationScheme, authenticationProperties);
        await HttpContext.SignOutAsync(CookieAuthenticationDefaults.AuthenticationScheme);
    }

    [Authorize]
    public IActionResult Profile()
    {
        return View();
    }
}
6

Vue de création de profil

Créez un fichier Views/Account/Profile.cshtml :
Views/Account/Profile.cshtml
@{
    ViewData["Title"] = "User Profile";
}

<div class="row">
    <div class="col-md-12">
        <h2>@ViewData["Title"]</h2>
        <div class="row">
            <div class="col-md-2">
                <img src="@User.FindFirst(c => c.Type == "picture")?.Value" alt="User's profile picture" class="img-fluid rounded-circle" />
            </div>
            <div class="col-md-10">
                <h3>@User.Identity.Name</h3>
                <p><strong>Email:</strong> @User.FindFirst(c => c.Type == System.Security.Claims.ClaimTypes.Email)?.Value</p>
                <p><strong>Email Verified:</strong> @User.FindFirst(c => c.Type == "email_verified")?.Value</p>
                <p><strong>User ID:</strong> @User.FindFirst(c => c.Type == System.Security.Claims.ClaimTypes.NameIdentifier)?.Value</p>
            </div>
        </div>
        
        <h4 class="mt-4">User Claims</h4>
        <table class="table">
            <thead>
                <tr>
                    <th>Claim Type</th>
                    <th>Claim Value</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var claim in User.Claims)
                {
                    <tr>
                        <td>@claim.Type</td>
                        <td>@claim.Value</td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</div>
Remarque : Vous devrez d’abord créer le répertoire Views/Account s’il n’existe pas déjà.
7

Mettre à jour votre mise en page

Mettez à jour votre fichier de mise en page pour y ajouter des boutons de connexion et de déconnexion. Dans Views/Shared/_Layout.cshtml, trouvez l’élément <nav> et remplacez-le par :
Views/Shared/_Layout.cshtml
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
    <div class="container-fluid">
        <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">SampleMvcApp</a>
        <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
            <ul class="navbar-nav flex-grow-1">
                <li class="nav-item">
                    <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                </li>
            </ul>
            <ul class="navbar-nav">
                @if (User.Identity.IsAuthenticated)
                {
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-controller="Account" asp-action="Profile">@User.Identity.Name</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-controller="Account" asp-action="Logout">Logout</a>
                    </li>
                }
                else
                {
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-controller="Account" asp-action="Login">Login</a>
                    </li>
                }
            </ul>
        </div>
    </div>
</nav>
Important : Remplacez uniquement l’élément <nav>. Conservez toutes les autres parties de _Layout.cshtml intactes, en particulier l’appel @RenderBody(), qui est nécessaire à l’affichage du contenu de la page.
8

Lancez votre application

dotnet run
Votre application devrait démarrer et afficher l’URL d’écoute :
info: Microsoft.Hosting.Lifetime[14]
      Now listening on: http://localhost:5000
Ouvrez votre navigateur et accédez à http://localhost:5000. Cliquez sur le lien Login dans la barre de navigation. Vous serez redirigé vers la page de connexion d’Auth0. Une fois connecté, vous serez redirigé vers votre application, et votre nom devrait s’afficher dans la barre de navigation.
Point de vérificationVous devriez maintenant avoir une application MVC entièrement fonctionnelle protégée par Auth0, en cours d’exécution à l’adresse http://localhost:5000. Les utilisateurs peuvent se connecter, consulter leur profil et se déconnecter.

​
Utilisation avancée

Vous pouvez accéder aux informations du profil de l’utilisateur à l’aide de la propriété User dans vos contrôleurs ou vos vues :
Controllers/AccountController.cs
[Authorize]
public IActionResult Profile()
{
    var user = new
    {
        Name = User.Identity.Name,
        EmailAddress = User.FindFirst(c => c.Type == System.Security.Claims.ClaimTypes.Email)?.Value,
        ProfileImage = User.FindFirst(c => c.Type == "picture")?.Value,
        UserId = User.FindFirst(c => c.Type == System.Security.Claims.ClaimTypes.NameIdentifier)?.Value
    };
    
    return View(user);
}
Les revendications de l’utilisateur contiennent des informations OIDC standard :
  • Name : nom d’affichage de l’utilisateur
  • Email : adresse courriel de l’utilisateur
  • Picture : URL de l’image de profil de l’utilisateur
  • NameIdentifier (sub) : ID unique de l’utilisateur
Vous pouvez transmettre des paramètres personnalisés à la page de connexion d’Auth0 :
Controllers/AccountController.cs
public async Task Login(string returnUrl = "/")
{
    var authenticationProperties = new LoginAuthenticationPropertiesBuilder()
        .WithRedirectUri(returnUrl)
        .WithParameter("screen_hint", "signup")  // Afficher la page d’inscription
        .WithParameter("ui_locales", "es")       // Définir la langue à l’espagnol
        .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 des 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";
});
Récupérez ensuite le jeton d’accès dans votre contrôleur :
Controllers/ApiController.cs
[Authorize]
public async Task<IActionResult> CallApi()
{
    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();
    
    return View(data);
}
Personnalisez le comportement d’authentification en gérant les événements :
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.Events = new Auth0WebAppWithAccessTokenEvents
    {
        OnMissingRefreshToken = async (context) =>
        {
            await context.SignOutAsync(CookieAuthenticationDefaults.AuthenticationScheme);
            var authenticationProperties = new LoginAuthenticationPropertiesBuilder()
                .WithRedirectUri("/")
                .Build();
            
            await context.ChallengeAsync(Auth0Constants.AuthenticationScheme, authenticationProperties);
        }
    };
});

​
Ressources supplémentaires

Dépôt GitHub

Code source et suivi des problèmes

Référence de l’API

Documentation détaillée de l’API

Forum communautaire

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

​
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’autorité.
{
  "Auth0": {
    "Domain": "your-tenant.auth0.com"  // Correct - no protocol
  }
}
Assurez-vous également :
  • Qu’il n’y a pas de barre oblique à la fin de la valeur du domaine
  • Que votre application a accès à Internet pour joindre Auth0
  • Que 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 similaire.Solution : Assurez-vous que appsettings.json contient la section Auth0 avec les valeurs Domain, ClientId et ClientSecret. Vérifiez également que la configuration est correctement lue :
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 dans le bon ordre. UseAuthentication() doit être appelé avant UseAuthorization() :
Program.cs
app.UseRouting();
app.UseAuthentication();  // Must be before UseAuthorization
app.UseAuthorization();
app.MapControllerRoute(...);

​
Exemple d’application

Vous trouverez un exemple d’application avec le code source du SDK :

Application de démonstration ASP.NET Core MVC

Comprend des exemples de connexion, de déconnexion, de profil d’utilisateur, et plus encore.
Clonez et exécutez : 
git clone https://github.com/auth0/auth0-aspnetcore-authentication.git
cd auth0-aspnetcore-authentication/playground/Auth0.AspNetCore.Authentication.Playground
# Mettez à jour appsettings.json avec votre configuration Auth0
dotnet run