Passer au contenu principal
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 Universal Login d’Auth0 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 :
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 :
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\" />"
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>
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 :
PackageObjectif
Microsoft.Owin.Security.OpenIdConnectGère le flux d’authentification OpenID Connect (OIDC) avec Auth0
Microsoft.Owin.Security.CookiesConserve la session de l’utilisateur dans un témoin du navigateur après la connexion
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
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

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.
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
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/")}";
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
    ...
});
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

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);
}
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