> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Ajouter la fonctionnalité de connexion à votre application ASP.NET OWIN

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

export const HowToSchema = () => <script type="application/ld+json">
    {'{"@context":"https://schema.org","@type":"HowTo"}'}
  </script>;

<HowToSchema />

Auth0 vous permet d’ajouter l’authentication à votre application ASP.NET OWIN en quelques minutes. Ce guide vous explique comment ajouter la connexion, le logout 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 se connectent
* Traiter le callback et stocker la session dans un cookie
* 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

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  Ce guide s’adresse aux applications **ASP.NET classiques (.NET Framework)** qui utilisent OWIN. Si votre application fonctionne déjà avec **ASP.NET Core**, utilisez plutôt le SDK [`Auth0.AspNetCore.Authentication`](https://auth0.com/docs/quickstart/webapp/aspnet-core).
</Callout>

<div id="prerequisites">
  ## Prérequis
</div>

Avant de commencer :

* Un compte Auth0 - [inscrivez-vous gratuitement](https://auth0.com/signup)
* Une application ASP.NET MVC existante qui cible .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](https://visualstudio.microsoft.com/) (ou tout IDE compatible avec les projets MVC .NET Framework)

<div id="steps">
  ## Étapes
</div>

<Steps>
  <Step title="Configurer votre application Auth0">
    Toute application qui utilise Auth0 doit être enregistrée dans le Auth0 Dashboard. Auth0 fournit un **Client ID** et un **Domain** que votre application utilise pour communiquer avec Auth0.

    Vous pouvez choisir de configurer votre application Auth0 automatiquement en exécutant une commande de l’Auth0 CLI, ou manuellement via le Dashboard :

    <Tabs>
      <Tab title="CLI">
        Exécutez la commande suivante depuis le répertoire racine de votre projet pour créer une application Auth0 et générer les valeurs de votre `Web.config` :

        <CodeGroup>
          ```shellscript Mac theme={null}
          # Installer Auth0 CLI (s'il n'est pas déjà installé)
          brew tap auth0/auth0-cli && brew install auth0

          # Configurer l'application Auth0 et générer les valeurs de Web.config
          auth0 qs setup --app --type regular --framework aspnet-owin --port 5000 --name "My OWIN App"
          ```

          ```powershell Windows theme={null}
          # Installer Auth0 CLI (s'il n'est pas déjà installé)
          scoop bucket add auth0 https://github.com/auth0/scoop-auth0-cli.git
          scoop install auth0

          # Configurer l'application Auth0 et générer les valeurs de Web.config
          auth0 qs setup --app --type regular --framework aspnet-owin --port 5000 --name "My OWIN App"
          ```
        </CodeGroup>

        <Note>
          Cette commande permet de :

          1. Vérifier si vous êtes authentifié (et vous inviter à vous connecter au besoin)
          2. Créer une Auth0 Regular Web Application configurée pour `http://localhost:5000`
          3. Générer les valeurs `Web.config` avec `auth0:Domain`, `auth0:ClientId` et `auth0:ClientSecret`
        </Note>
      </Tab>

      <Tab title="Dashboard">
        1. Accédez à [Auth0 Dashboard → Applications](https://manage.auth0.com/#/applications).
        2. Cliquez sur **Create Application**.
        3. Entrez 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. Accédez à 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 les valeurs de **Domain** et de **Client ID** dans la section **Basic Information**, puis ajoutez-les à `Web.config` :

        ```xml Web.config theme={null}
        <?xml version="1.0" encoding="utf-8"?>
        <configuration>
          <appSettings>
            <add key="auth0:Domain" value="{yourDomain}" />
            <add key="auth0:ClientId" value="{yourClientId}" />
          </appSettings>
        </configuration>
        ```
      </Tab>
    </Tabs>

    <Info>
      Si votre application fonctionne sur un autre port, remplacez `3000` par votre numéro de port dans chaque URL ci-dessus.
    </Info>
  </Step>

  <Step title="Installer des packages NuGet">
    Ajoutez à votre projet les deux packages middleware OWIN requis :

    | Package                                 | Objectif                                                                               |
    | --------------------------------------- | -------------------------------------------------------------------------------------- |
    | `Microsoft.Owin.Security.OpenIdConnect` | Gère le flux d’authentification OpenID Connect (OIDC) avec Auth0                       |
    | `Microsoft.Owin.Security.Cookies`       | Enregistre la session de l’utilisateur dans un cookie du navigateur après la connexion |

    <Tabs>
      <Tab title="Console du gestionnaire de package">
        Dans Visual Studio, ouvrez la **Console du gestionnaire de package** (`Tools → NuGet Package Manager → Package Manager Console`) et exécutez :

        ```powershell theme={null}
        Install-Package Microsoft.Owin.Security.OpenIdConnect
        Install-Package Microsoft.Owin.Security.Cookies
        ```
      </Tab>

      <Tab title="dotnet CLI">
        Depuis le répertoire de votre projet, exécutez :

        ```bash theme={null}
        dotnet add package Microsoft.Owin.Security.OpenIdConnect
        dotnet add package Microsoft.Owin.Security.Cookies
        ```
      </Tab>
    </Tabs>

    <Info>
      L’utilisation simultanée du middleware de cookies OWIN et des cookies `System.Web` peut entraîner des problèmes. Si vous rencontrez des problèmes de double cookie, consultez les directives sur les [problèmes d’intégration des cookies System.Web](https://github.com/aspnet/AspNetKatana/wiki/System.Web-response-cookie-integration-issues).
    </Info>
  </Step>

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

    Le **cookie middleware** et le **middleware OpenID Connect** sont tous deux nécessaires, et ils doivent être enregistrés exactement dans cet ordre :

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

    ```csharp App_Start/Startup.Auth.cs theme={null}
    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é dans la méthode `Configuration` de votre `Startup.cs` :

    ```csharp Startup.cs theme={null}
    using Microsoft.Owin;
    using Owin;

    [assembly: OwinStartup(typeof(Startup))]

    public partial class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            ConfigureAuth(app);
        }
    }
    ```

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      `AuthenticationType` est défini sur `"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 requêtes de logout et construit l’URL de logout Auth0 appropriée.
    </Callout>
  </Step>

  <Step title="Ajouter des actions de connexion, de logout et de profil">
    Créez `Controllers/AccountController.cs` avec trois actions : `Login`, `Logout` et `UserProfile`.

    ```csharp Controllers/AccountController.cs theme={null}
    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 l’intercepte et redirige l’utilisateur vers Auth0 Universal Login. Après une connexion réussie, l’utilisateur est redirigé vers `returnUrl`.
    * **`UserProfile`** - lit les claims de l’utilisateur authentifié à partir de `ClaimsIdentity` et les transmet à la vue via `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 autre 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 :

    ```csharp Models/UserProfileViewModel.cs theme={null}
    public class UserProfileViewModel
    {
        public string Name { get; set; }
        public string EmailAddress { get; set; }
        public string ProfileImage { get; set; }
    }
    ```

    <Note>
      ##### Vérification

      Exécutez votre application et accédez à `/Account/Login`. Vous devriez être redirigé vers la page Auth0 Universal Login. Après vous être connecté, vous devriez être redirigé vers la page d’accueil de votre application. Si vous voyez une erreur de Redirect URI, 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.
    </Note>
  </Step>

  <Step title="Ajouter une vue de profil">
    Créez `Views/Account/UserProfile.cshtml` pour afficher les informations de l’utilisateur connecté :

    ```cshtml Views/Account/UserProfile.cshtml theme={null}
    @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é par les claims extraits par le middleware OIDC lorsqu’Auth0 renvoie l’ID token.

    <Note>
      ##### Vérification

      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` comprend `"openid profile email"`.
    </Note>
  </Step>

  <Step title="Ajoutez des liens de connexion et de déconnexion à votre layout">
    Mettez à jour `Views/Shared/_Layout.cshtml` pour afficher les liens de connexion et de déconnexion en fonction de l’état d’authentification de l’utilisateur :

    ```cshtml Views/Shared/_Layout.cshtml theme={null}
    @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 apparaissent dans la mise en page.

    <Note>
      ##### Checkpoint

      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) ainsi qu’un lien **Se déconnecter**. En cliquant sur **Se déconnecter**, vous devriez être déconnecté et redirigé vers la page d’accueil.
    </Note>
  </Step>
</Steps>

<Check>
  Vous avez maintenant une intégration Auth0 fonctionnelle dans votre application ASP.NET OWIN. Les utilisateurs peuvent se connecter au moyen d’Auth0 Universal Login, consulter leur profil et se déconnecter.
</Check>

<div id="common-issues">
  ## Problèmes courants
</div>

<AccordionGroup>
  <Accordion title="Incompatibilité de Redirect URI 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 :** La Redirect URI que votre app envoie à Auth0 doit correspondre exactement à l’une des **Allowed Callback URLs** dans les paramètres de votre application Auth0. Vérifiez toute différence dans le protocole (`http` vs `https`), le numéro de port, le chemin et les barres obliques finales.
  </Accordion>

  <Accordion title="Boucle de connexion — l’app continue de rediriger vers Auth0">
    **Problème :** Après une connexion réussie, l’app redirige immédiatement 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 cookie middleware 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é.

    ```csharp App_Start/Startup.Auth.cs theme={null}
    app.SetDefaultSignInAsAuthenticationType(CookieAuthenticationDefaults.AuthenticationType); // Doit être en premier

    app.UseCookieAuthentication(...);          // Cookie middleware avant OIDC
    app.UseOpenIdConnectAuthentication(...);   // Middleware OIDC après le cookie
    ```
  </Accordion>

  <Accordion title="L’utilisateur n’est pas redirigé après le logout">
    **Problème :** Cliquer sur **Log out** déconnecte l’utilisateur d’Auth0, mais ne le redirige pas vers votre application.

    **Solution :** Ajoutez un query parameter `returnTo` à la logout URL d’Auth0 dans la notification `RedirectToIdentityProvider`. L’URL de retour doit aussi figurer dans **Allowed Logout URLs** dans les paramètres de votre application Auth0 :

    ```csharp App_Start/Startup.Auth.cs theme={null}
    var logoutUri = $"https://{domain}/v2/logout?client_id={clientId}&returnTo={Uri.EscapeDataString("http://localhost:3000/")}";
    ```
  </Accordion>

  <Accordion title="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 l’image; la portée `email` fournit l’adresse courriel.

    ```csharp App_Start/Startup.Auth.cs theme={null}
    app.UseOpenIdConnectAuthentication(new OpenIdConnectAuthenticationOptions
    {
        Scope = "openid profile email",  // Les trois scopes sont requis
        ...
    });
    ```
  </Accordion>

  <Accordion title="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 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) pour charger la bonne transformation `Web.config`.

    ```xml Web.config theme={null}
    <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>
    ```
  </Accordion>
</AccordionGroup>

<div id="advanced-usage">
  ## Utilisation avancée
</div>

<Accordion title="Personnaliser les paramètres de connexion">
  Vous pouvez transmettre des paramètres personnalisés à la page de connexion Auth0 en modifiant la notification `RedirectToIdentityProvider` dans `Startup.Auth.cs` :

  ```csharp App_Start/Startup.Auth.cs theme={null}
  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);
  }
  ```
</Accordion>

<Accordion title="Appeler une API au nom de l’utilisateur">
  Pour appeler une API avec un jeton d’accès, demandez une `audience` et les portées d’API requises lors de la redirection OIDC :

  ```csharp App_Start/Startup.Auth.cs theme={null}
  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 à partir des claims de l’utilisateur authentifié :

  ```csharp Controllers/ApiController.cs theme={null}
  [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");
      // gérer la réponse...
  }
  ```
</Accordion>

***

<div id="additional-resources">
  ## Ressources supplémentaires
</div>

<CardGroup cols={2}>
  <Card title="Exemple d’application" icon="github" href="https://github.com/auth0-samples/auth0-aspnet-owin-mvc-samples/tree/master/Quickstart/Sample">
    Exemple complet et fonctionnel de ce Quickstart
  </Card>

  <Card title="Documentation Katana / OWIN" icon="book" href="https://learn.microsoft.com/en-us/aspnet/aspnet/overview/owin-and-katana/">
    Référence officielle de Microsoft sur OWIN/Katana
  </Card>

  <Card title="Forum de la communauté" icon="comments" href="https://community.auth0.com/">
    Obtenez de l’aide auprès de la communauté Auth0
  </Card>
</CardGroup>