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

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

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.

Prérequis

Avant de commencer :

Un compte Auth0 - inscrivez-vous gratuitement
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 (ou tout IDE compatible avec les projets MVC .NET Framework)

Étapes

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 :

CLI
Dashboard

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 :

# 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"

# 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"

Cette commande permet de :

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

Accédez à Auth0 Dashboard → Applications.
Cliquez sur Create Application.
Entrez un nom pour votre application (par exemple, My OWIN App).
Sélectionnez Regular Web Application comme type d’application, puis cliquez sur Create.
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`

Cliquez sur Save Changes.
Copiez les valeurs de Domain et de Client ID dans 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 fonctionne sur un autre port, remplacez 3000 par votre numéro de port dans chaque URL ci-dessus.

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

Console du gestionnaire de package
dotnet CLI

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

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

Depuis le répertoire de votre projet, exécutez :

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

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.

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 :

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

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é dans la méthode Configuration de votre 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 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.

Ajouter des actions de connexion, de logout et de profil

Créez Controllers/AccountController.cs avec 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 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 :

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 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.

Ajouter une vue de profil

Créez Views/Account/UserProfile.cshtml pour afficher les informations 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é par les claims extraits par le middleware OIDC lorsqu’Auth0 renvoie l’ID token.

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".

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 :

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 apparaissent dans la mise en page.

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.

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.

Problèmes courants

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.

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é.

App_Start/Startup.Auth.cs

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

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

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 :

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

App_Start/Startup.Auth.cs

app.UseOpenIdConnectAuthentication(new OpenIdConnectAuthenticationOptions
{
    Scope = "openid profile email",  // Les trois scopes sont requis
    ...
});

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.

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 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 avec un jeton d’accès, demandez une audience et les portées d’API requises lors de 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 à partir des claims 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");
    // gérer la réponse...
}

Ressources supplémentaires

Exemple d’application

Exemple complet et fonctionnel de ce Quickstart

Documentation Katana / OWIN

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

Forum de la communauté

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

Quickstarts

Aperçu d’Auth0

Configurer Auth0

Applications

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

Prérequis

Étapes

Vérification

Vérification

Checkpoint

Problèmes courants

Utilisation avancée

Ressources supplémentaires

Exemple d’application

Documentation Katana / OWIN

Forum de la communauté

​Prérequis

​Étapes

Vérification

Vérification

Checkpoint

​Problèmes courants

​Utilisation avancée

​Ressources supplémentaires

Exemple d’application

Documentation Katana / OWIN

Forum de la communauté

Prérequis

Étapes

Problèmes courants

Utilisation avancée

Ressources supplémentaires