Ajouter l’ouverture de session à votre application ASP.NET OWIN

Ce guide montre comment intégrer Auth0 à toute application ASP.NET OWIN, nouvelle ou existante, à l’aide du package NuGet Microsoft.Owin.Security.OpenIdConnect.

Auth0 vous permet d’ajouter l’authentification à votre application ASP.NET OWIN en quelques minutes. Ce guide vous explique comment ajouter l’ouverture de session, la fermeture de session et l’affichage du profil utilisateur à une application ASP.NET OWIN classique.

À la fin de ce guide, votre application pourra :

• Rediriger les utilisateurs vers Auth0 Universal Login lorsqu’ils ouvrent une session
• Gérer le callback et stocker la session dans un témoin
• Afficher le nom, l’adresse courriel et la photo de profil de l’utilisateur authentifié
• Déconnecter les utilisateurs à la fois de votre application et d’Auth0

Ce guide s’adresse aux applications ASP.NET classiques (.NET Framework) utilisant OWIN. Si votre application fonctionne déjà avec ASP.NET Core, utilisez plutôt le SDK Auth0.AspNetCore.Authentication.

​

Prérequis

Avant de commencer :

• Un compte Auth0 - inscrivez-vous gratuitement
• Une application ASP.NET MVC existante ciblant .NET Framework avec OWIN activé, ou une nouvelle application créée à partir du modèle ASP.NET Web Application (.NET Framework) → MVC dans Visual Studio
• Visual Studio 2019 ou une version ultérieure (ou tout IDE prenant en charge les projets MVC .NET Framework)

​

Étapes

1. Configurez votre application Auth0

   Toute application qui utilise Auth0 doit être enregistrée dans le tableau de bord Auth0. Auth0 émet un Client ID et un Domain que votre application utilise pour communiquer avec Auth0.

   Vous pouvez créer et configurer l’application Auth0 automatiquement à l’aide de l’interface de ligne de commande Auth0, ou manuellement via le tableau de bord :

   CLI

   Exécutez la commande suivante depuis le répertoire racine de votre projet. Elle crée une application Auth0 et génère un extrait Web.config prêt à coller, avec vos identifiants déjà renseignés :

   Mac/Linux

   brew tap auth0/auth0-cli && brew install auth0 && auth0 login --no-input && \
   AUTH0_RESULT=$(auth0 apps create \
     --name "My OWIN App" \
     --type regular \
     --auth-method post \
     --callbacks http://localhost:3000/callback \
     --logout-urls http://localhost:3000/ \
     --web-origins http://localhost:3000 \
     --reveal-secrets \
     --json \
     --metadata created_by="quickstart-docs-cli") && \
   CLIENT_ID=$(echo $AUTH0_RESULT | jq -r '.client_id') && \
   DOMAIN=$(echo $AUTH0_RESULT | jq -r '.domain') && \
   echo "Add the following to your Web.config <appSettings> section:" && \
   echo "<add key=\"auth0:Domain\" value=\"$DOMAIN\" />" && \
   echo "<add key=\"auth0:ClientId\" value=\"$CLIENT_ID\" />"
   

   Windows (PowerShell)

   $latestRelease = Invoke-RestMethod -Uri "https://api.github.com/repos/auth0/auth0-cli/releases/latest"
   $latestVersion = $latestRelease.tag_name
   $version = $latestVersion -replace "^v"
   Invoke-WebRequest -Uri "https://github.com/auth0/auth0-cli/releases/download/${latestVersion}/auth0-cli_${version}_Windows_x86_64.zip" -OutFile ".\auth0.zip"
   Expand-Archive ".\auth0.zip" .\
   [System.Environment]::SetEnvironmentVariable('PATH', $Env:PATH + ";${pwd}")
   auth0 login --no-input
   $AppDetails = auth0 apps create `
     --name "My OWIN App" `
     --type regular `
     --auth-method post `
     --callbacks http://localhost:3000/callback `
     --logout-urls http://localhost:3000/ `
     --web-origins http://localhost:3000 `
     --reveal-secrets `
     --json `
     --metadata created_by="quickstart-docs-cli" | ConvertFrom-Json
   Write-Output "Add the following to your Web.config <appSettings> section:"
   Write-Output "<add key=`"auth0:Domain`" value=`"$($AppDetails.domain)`" />"
   Write-Output "<add key=`"auth0:ClientId`" value=`"$($AppDetails.client_id)`" />"
   

   Copiez les deux lignes <add> de la sortie dans la section <appSettings> de votre fichier Web.config :

   Web.config

   <?xml version="1.0" encoding="utf-8"?>
   <configuration>
     <appSettings>
       <!-- collez la sortie ici -->
     </appSettings>
   </configuration>
   

   Dashboard

   1. Accédez à Auth0 Dashboard → Applications.
   2. Cliquez sur Create Application.
   3. Saisissez un nom pour votre application (par exemple, My OWIN App).
   4. Sélectionnez Regular Web Application comme type d’application, puis cliquez sur Create.
   5. Ouvrez l’onglet Settings et configurez les URL suivantes :

   Paramètre	Valeur
   Allowed Callback URLs	http://localhost:3000/callback
   Allowed Logout URLs	http://localhost:3000/
   Allowed Web Origins	http://localhost:3000

   6. Cliquez sur Save Changes.
   7. Copiez votre Domain et votre Client ID depuis la section Basic Information, puis ajoutez-les à Web.config :

   Web.config

   <?xml version="1.0" encoding="utf-8"?>
   <configuration>
     <appSettings>
       <add key="auth0:Domain" value="{yourDomain}" />
       <add key="auth0:ClientId" value="{yourClientId}" />
     </appSettings>
   </configuration>
   

   Si votre application s’exécute sur un autre port, remplacez 3000 par le numéro de port que vous utilisez dans chaque URL ci-dessus.

2. Installer des packages NuGet

   Ajoutez à votre projet les deux packages de middleware OWIN requis :

   Package	Objectif
   Microsoft.Owin.Security.OpenIdConnect	Gère le flux d’authentification OpenID Connect (OIDC) avec Auth0
   Microsoft.Owin.Security.Cookies	Conserve la session de l’utilisateur dans un témoin du navigateur après la connexion

   Console du gestionnaire de packages

   Dans Visual Studio, ouvrez la Console du gestionnaire de packages (Tools → NuGet Package Manager → Package Manager Console) et exécutez :

   Install-Package Microsoft.Owin.Security.OpenIdConnect
   Install-Package Microsoft.Owin.Security.Cookies
   

   CLI dotnet

   À partir du répertoire de votre projet, exécutez :

   dotnet add package Microsoft.Owin.Security.OpenIdConnect
   dotnet add package Microsoft.Owin.Security.Cookies
   

   L’utilisation du middleware de témoins OWIN en parallèle avec les témoins System.Web peut entraîner des problèmes. Si vous rencontrez des problèmes de témoins en double, consultez les directives sur les problèmes d’intégration des témoins System.Web.

3. Configurer le middleware OWIN

   Le middleware OWIN est enregistré dans une classe Startup. Si votre projet possède déjà une classe Startup OWIN (généralement App_Start/Startup.Auth.cs), mettez à jour sa méthode ConfigureAuth. Sinon, créez le fichier maintenant.

   Les middlewares de cookies et OpenID Connect sont tous deux requis, et ils doivent être enregistrés dans cet ordre exact :

   1. Middleware de cookies - stocke la session de l’utilisateur authentifié
   2. Middleware OpenID Connect - gère le processus de connexion et de déconnexion avec Auth0

   App_Start/Startup.Auth.cs

   using System;
   using System.Configuration;
   using System.Threading.Tasks;
   using Microsoft.IdentityModel.Protocols.OpenIdConnect;
   using Microsoft.Owin;
   using Microsoft.Owin.Security;
   using Microsoft.Owin.Security.Cookies;
   using Microsoft.Owin.Security.OpenIdConnect;
   using Owin;
   
   public partial class Startup
   {
       public void ConfigureAuth(IAppBuilder app)
       {
           var domain = ConfigurationManager.AppSettings["auth0:Domain"];
           var clientId = ConfigurationManager.AppSettings["auth0:ClientId"];
   
           // Le middleware de cookie doit être enregistré en premier
           app.SetDefaultSignInAsAuthenticationType(CookieAuthenticationDefaults.AuthenticationType);
   
           app.UseCookieAuthentication(new CookieAuthenticationOptions
           {
               AuthenticationType = CookieAuthenticationDefaults.AuthenticationType
           });
   
           app.UseOpenIdConnectAuthentication(new OpenIdConnectAuthenticationOptions
           {
               AuthenticationType = "Auth0",
               Authority = $"https://{domain}",
               ClientId = clientId,
               ResponseType = OpenIdConnectResponseType.CodeIdToken,
               Scope = "openid profile email",
               TokenValidationParameters = new Microsoft.IdentityModel.Tokens.TokenValidationParameters
               {
                   NameClaimType = "name"
               },
               Notifications = new OpenIdConnectAuthenticationNotifications
               {
                   RedirectToIdentityProvider = notification =>
                   {
                       if (notification.ProtocolMessage.RequestType == OpenIdConnectRequestType.Logout)
                       {
                           // Construire l'URL de déconnexion Auth0 et y rediriger
                           var logoutUri = $"https://{domain}/v2/logout?client_id={clientId}";
                           notification.Response.Redirect(logoutUri);
                           notification.HandleResponse();
                       }
   
                       return Task.FromResult(0);
                   }
               }
           });
       }
   }
   

   Assurez-vous que ConfigureAuth est appelée dans la méthode Configuration de votre fichier Startup.cs :

   Startup.cs

   using Microsoft.Owin;
   using Owin;
   
   [assembly: OwinStartup(typeof(Startup))]
   
   public partial class Startup
   {
       public void Configuration(IAppBuilder app)
       {
           ConfigureAuth(app);
       }
   }
   

   AuthenticationType est défini à "Auth0". Cette chaîne est utilisée à l’étape suivante au moment de déclencher le défi de connexion. La notification RedirectToIdentityProvider intercepte les demandes de déconnexion et génère l’URL de déconnexion Auth0 appropriée.

4. Ajouter des actions de connexion, de déconnexion et d’accès au profil

   Créez Controllers/AccountController.cs comportant trois actions : Login, Logout et UserProfile.

   Controllers/AccountController.cs

   using Microsoft.AspNetCore.Authentication;
   using Microsoft.AspNetCore.Authentication.Cookies;
   using Auth0.AspNetCore.Authentication;
   
   public class AccountController : Controller
   {
     public ActionResult Login(string returnUrl = "/")
     {
       HttpContext.GetOwinContext().Authentication.Challenge(
         new AuthenticationProperties
         {
             RedirectUri = returnUrl ?? Url.Action("Index", "Home")
         },
         "Auth0"
       );
     }
   
     [Authorize]
     public ActionResult UserProfile()
     {
         var claimsIdentity = User.Identity as ClaimsIdentity;
         return View(new UserProfileViewModel()
         {
             Name = claimsIdentity?
               .FindFirst(c => c.Type == claimsIdentity.NameClaimType)?.Value,
             EmailAddress = claimsIdentity?
               .FindFirst(c => c.Type == ClaimTypes.Email)?.Value,
             ProfileImage = claimsIdentity?
               .FindFirst(c => c.Type == "picture")?.Value
         });
     }
   
     [Authorize]
     public void Logout()
     {
       HttpContext.GetOwinContext().Authentication.SignOut(CookieAuthenticationDefaults.AuthenticationType);
       HttpContext.GetOwinContext().Authentication.SignOut("Auth0");
     }
   }
   

   Fonctionnement de chaque action :

   • Login - appelle Challenge avec le schéma "Auth0". Le middleware OIDC intercepte cet appel et redirige l’utilisateur vers Universal Login d’Auth0. Après une authentification réussie, l’utilisateur est redirigé vers returnUrl.
   • UserProfile - lit les claims de l’utilisateur authentifié à partir de ClaimsIdentity et les transmet à la vue au moyen de UserProfileViewModel. L’attribut [Authorize] garantit que les utilisateurs non authentifiés sont d’abord redirigés vers la page de connexion.
   • Logout - appelle SignOut deux fois : une fois pour effacer le cookie de session local, et une fois pour déconnecter l’utilisateur d’Auth0 (ce qui met aussi fin à toute session SSO active).

   Créez Models/UserProfileViewModel.cs pour stocker les données du profil :

   Models/UserProfileViewModel.cs

   public class UserProfileViewModel
   {
       public string Name { get; set; }
       public string EmailAddress { get; set; }
       public string ProfileImage { get; set; }
   }
   

   Vérification

   Exécutez votre application et accédez à /Account/Login. Vous devriez être redirigé vers la page de connexion universelle d’Auth0. Après vous être connecté, vous devriez être redirigé vers la page d’accueil de votre application. Si vous voyez une erreur d’URI de redirection, vérifiez que l’URL de rappel dans les paramètres de votre application Auth0 correspond exactement à l’URL sur laquelle votre application s’exécute.

5. Ajouter une vue de profil

   Créez Views/Account/UserProfile.cshtml pour afficher les renseignements de l’utilisateur connecté :

   Views/Account/UserProfile.cshtml

   @model UserProfileViewModel
   @{
       ViewBag.Title = "User Profile";
   }
   
   <h2>User Profile</h2>
   
   <div>
       <img src='@Model.ProfileImage'
            alt="Profile picture"
            style="max-width:120px; border-radius:60px;" />
   </div>
   
   <ul>
       <li><strong>Name:</strong> @Model.Name</li>
       <li><strong>Email:</strong> @Model.EmailAddress</li>
   </ul>
   

   La vue reçoit un UserProfileViewModel alimenté à partir des revendications extraites par le middleware OIDC quand Auth0 renvoie le jeton d’identité.

   Point de contrôle

   Après vous être connecté, accédez à /Account/UserProfile. Vous devriez voir votre nom, votre courriel et votre photo de profil. Si le nom ou le courriel est vide, vérifiez que le Scope dans votre OpenIdConnectAuthenticationOptions inclut "openid profile email".

6. Ajoutez des liens de connexion et de déconnexion à votre mise en page

   Mettez à jour Views/Shared/_Layout.cshtml pour afficher des liens de connexion et de déconnexion en fonction de l’état d’authentification de l’utilisateur :

   Views/Shared/_Layout.cshtml

   @if (User.Identity.IsAuthenticated)
   {
       <a href="@Url.Action("UserProfile", "Account")">@User.Identity.Name</a>
       <a href="@Url.Action("Logout", "Account")">Log out</a>
   }
   else
   {
       <a href="@Url.Action("Login", "Account")">Log in</a>
   }
   

   Ajoutez ceci à l’intérieur de l’élément <nav>, à l’endroit où vos liens de navigation s’affichent dans la mise en page.

   Vérification

   Exécutez votre application. Vous devriez voir un lien Se connecter dans la navigation. Après la connexion, il devrait être remplacé par votre nom (avec un lien vers votre profil) et par un lien Se déconnecter. En cliquant sur Se déconnecter, vous devriez être déconnecté et redirigé vers la page d’accueil.

Vous avez maintenant une intégration Auth0 fonctionnelle dans votre application ASP.NET OWIN. Les utilisateurs peuvent se connecter avec Auth0 Universal Login, consulter leur profil et se déconnecter.

​

Problèmes courants

L’URI de redirection ne correspond pas après la connexion

Problème : Auth0 affiche une erreur « redirect_uri mismatch » ou « callback URL mismatch » après la connexion de l’utilisateur.

Solution : L’URI de redirection que votre application envoie à Auth0 doit correspondre exactement à l’une des Allowed Callback URLs dans les paramètres de votre application Auth0. Vérifiez s’il y a des différences dans le protocole (http vs https), le numéro de port, le chemin et les barres obliques finales.

Boucle de connexion — l’application continue de rediriger vers Auth0

Problème : Après une connexion réussie, l’application redirige immédiatement l’utilisateur vers Auth0 au lieu d’afficher la page authentifiée.

Solution : Assurez-vous que le middleware est enregistré dans le bon ordre et que le pipeline OWIN est bien initialisé :

• Le middleware de témoins doit être enregistré avant le middleware OpenID Connect dans ConfigureAuth.
• app.SetDefaultSignInAsAuthenticationType(CookieAuthenticationDefaults.AuthenticationType) doit être le premier appel dans ConfigureAuth.
• L’attribut [assembly: OwinStartup(typeof(Startup))] doit être présent pour que le pipeline OWIN soit correctement initialisé.

App_Start/Startup.Auth.cs

app.SetDefaultSignInAsAuthenticationType(CookieAuthenticationDefaults.AuthenticationType); // Doit être en premier

app.UseCookieAuthentication(...);          // Middleware de témoins avant OIDC
app.UseOpenIdConnectAuthentication(...);   // Middleware OIDC après celui des témoins

L’utilisateur n’est pas redirigé après la déconnexion

Problème : Lorsque l’utilisateur clique sur Log out, il est déconnecté d’Auth0, mais n’est pas renvoyé vers votre application.

Solution : Ajoutez un paramètre de requête returnTo à l’URL de déconnexion Auth0 dans la notification RedirectToIdentityProvider. L’URL de retour doit aussi figurer dans les Allowed Logout URLs dans les paramètres de votre application Auth0 :

App_Start/Startup.Auth.cs

var logoutUri = $"https://{domain}/v2/logout?client_id={clientId}&returnTo={Uri.EscapeDataString("http://localhost:3000/")}";

La photo de profil ou l’adresse courriel est vide

Problème : Model.ProfileImage ou Model.EmailAddress est null après la connexion.

Solution : Vérifiez que Scope dans OpenIdConnectAuthenticationOptions inclut "openid profile email". La portée profile fournit le nom et la photo, tandis que la portée email fournit l’adresse courriel.

App_Start/Startup.Auth.cs

app.UseOpenIdConnectAuthentication(new OpenIdConnectAuthenticationOptions
{
    Scope = "openid profile email",  // Les trois portées sont requises
    ...
});

Les valeurs Domain ou Client ID sont null au démarrage

Problème : L’application génère une exception de référence null ou une exception de configuration au démarrage.

Solution : Assurez-vous que auth0:Domain et auth0:ClientId sont tous deux présents dans <appSettings> de Web.config, et que vous exécutez la bonne configuration de build (Debug/Release) qui charge la transformation Web.config appropriée.

Web.config

<configuration>
  <appSettings>
    <add key="auth0:Domain" value="{yourDomain}" />     <!-- Ne doit pas être vide -->
    <add key="auth0:ClientId" value="{yourClientId}" /> <!-- Ne doit pas être vide -->
  </appSettings>
</configuration>

​

Utilisation avancée

Personnaliser les paramètres de connexion

Vous pouvez transmettre des paramètres personnalisés à la page de connexion d’Auth0 en modifiant la notification RedirectToIdentityProvider dans Startup.Auth.cs :

App_Start/Startup.Auth.cs

RedirectToIdentityProvider = notification =>
{
    if (notification.ProtocolMessage.RequestType == OpenIdConnectRequestType.Authentication)
    {
        // Afficher l’écran d’inscription plutôt que celui de connexion
        notification.ProtocolMessage.SetParameter("screen_hint", "signup");

        // Définir une langue d’interface précise
        notification.ProtocolMessage.SetParameter("ui_locales", "es");
    }

    return Task.FromResult(0);
}

Appeler une API au nom de l’utilisateur

Pour appeler une API à l’aide d’un jeton d’accès, demandez une audience et les portées d’API requises pendant la redirection OIDC :

App_Start/Startup.Auth.cs

RedirectToIdentityProvider = notification =>
{
    if (notification.ProtocolMessage.RequestType == OpenIdConnectRequestType.Authentication)
    {
        notification.ProtocolMessage.SetParameter("audience", "https://your-api.example.com");
        notification.ProtocolMessage.Scope += " read:data";
    }

    return Task.FromResult(0);
}

Récupérez ensuite le jeton d’accès dans les revendications de l’utilisateur authentifié :

Controllers/ApiController.cs

[Authorize]
public async Task<ActionResult> CallApi()
{
    var claimsIdentity = User.Identity as ClaimsIdentity;
    var accessToken = claimsIdentity?.FindFirst("access_token")?.Value;

    var client = new HttpClient();
    client.DefaultRequestHeaders.Authorization =
        new AuthenticationHeaderValue("Bearer", accessToken);

    var response = await client.GetAsync("https://your-api.example.com/data");
    // traiter la réponse...
}

---

​

Ressources supplémentaires

Exemple d’application

Exemple complet et fonctionnel de ce guide de démarrage

Documentation Katana / OWIN

Référence officielle de Microsoft sur OWIN/Katana

Forum communautaire

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