Activer l’authentification dans votre propre application web à l’aide d’Azure AD B2C

Important

À compter du 1er mai 2025, Azure AD B2C ne sera plus disponible pour les nouveaux clients. Pour plus d’informations, consultez notre FAQ.

Cet article explique comment ajouter l’authentification Azure Active Directory B2C (Azure AD B2C) à votre propre application web ASP.NET. Découvrez comment créer une application web ASP.NET Core avec ASP.NET intergiciel Core qui utilise le protocole OpenID Connect .

Utilisez cet article conjointement avec Configurer l’authentification dans un exemple d’application web, en remplaçant l’exemple d’application web par votre propre application web.

Conditions préalables

Pour passer en revue les prérequis et les instructions d’intégration, consultez Configurer l’authentification dans un exemple d’application web.

Étape 1 : Créer un projet d’application web

Vous pouvez utiliser un projet d’application web MVC (Model-View-Controller) existant ASP.NET ou en créer un. Pour créer un projet, ouvrez un interpréteur de commandes, puis entrez la commande suivante :

dotnet new mvc -o mywebapp

La commande précédente effectue les opérations suivantes :

Il crée une application web MVC.
Le -o mywebapp paramètre crée un répertoire nommé mywebapp avec les fichiers sources de l’application.

Étape 2 : Ajouter les bibliothèques d’authentification

Ajoutez la bibliothèque Web Microsoft Identity, qui est un ensemble de bibliothèques de base ASP.NET qui simplifient l’ajout de la prise en charge de l’authentification et de l’autorisation Azure AD B2C à votre application web. La bibliothèque Web Microsoft Identity configure le pipeline d’authentification avec l’authentification basée sur les cookies. Il s’occupe de l’envoi et de la réception de messages d’authentification HTTP, de validation de jeton, d’extraction de revendications, etc.

Pour ajouter la bibliothèque Web Microsoft Identity, installez les packages en exécutant les commandes suivantes :

Visual Studio
Visual Studio Code

dotnet add package Microsoft.Identity.Web
dotnet add package Microsoft.Identity.Web.UI

Install-Package Microsoft.Identity.Web
Install-Package Microsoft.Identity.Web.UI

Étape 3 : Lancer les bibliothèques d’authentification

L’intergiciel Web Microsoft Identity utilise une classe de démarrage qui s’exécute au démarrage du processus d’hébergement. Dans cette étape, vous ajoutez le code nécessaire pour lancer les bibliothèques d’authentification.

Ouvrez Startup.cs puis, au début de la classe, ajoutez les déclarations suivantes using :

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Authentication.OpenIdConnect;
using Microsoft.Identity.Web;
using Microsoft.Identity.Web.UI;

Étant donné que Microsoft Identity Web utilise l’authentification basée sur les cookies pour protéger votre application web, le code suivant définit les paramètres de cookie SameSite . Il lit ensuite les paramètres de l’application AzureAdB2C et lance le contrôleur d’intergiciel avec sa vue.

Remplacez la ConfigureServices(IServiceCollection services) fonction par l’extrait de code suivant :

public void ConfigureServices(IServiceCollection services)
{
    services.Configure<CookiePolicyOptions>(options =>
    {
        // This lambda determines whether user consent for non-essential cookies is needed for a given request.
        options.CheckConsentNeeded = context => true;
        options.MinimumSameSitePolicy = SameSiteMode.Unspecified;
        // Handling SameSite cookie according to https://learn.microsoft.com/aspnet/core/security/samesite?view=aspnetcore-3.1
        options.HandleSameSiteCookieCompatibility();
    });

    // Configuration to sign-in users with Azure AD B2C
    services.AddMicrosoftIdentityWebAppAuthentication(Configuration, "AzureAdB2C");

    services.AddControllersWithViews()
        .AddMicrosoftIdentityUI();

    services.AddRazorPages();

    //Configuring appsettings section AzureAdB2C, into IOptions
    services.AddOptions();
    services.Configure<OpenIdConnectOptions>(Configuration.GetSection("AzureAdB2C"));
}

Le code suivant ajoute la stratégie de cookie et utilise le modèle d’authentification. Remplacez la Configure fonction par l’extrait de code suivant :

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Home/Error");
        // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
        app.UseHsts();
    }

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

    // Add the Microsoft Identity Web cookie policy
    app.UseCookiePolicy();
    app.UseRouting();
    // Add the ASP.NET Core authentication service
    app.UseAuthentication();
    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller=Home}/{action=Index}/{id?}");
        
        // Add endpoints for Razor pages
        endpoints.MapRazorPages();
    });
};

Étape 4 : Ajouter les éléments d’interface utilisateur

Pour ajouter des éléments d’interface utilisateur, utilisez une vue partielle qui contient la logique permettant de vérifier si les utilisateurs sont connectés. Si les utilisateurs ne sont pas connectés, la vue partielle affiche le bouton de connexion. S’ils sont connectés, il affiche le nom d’affichage et le bouton de déconnexion de l’utilisateur.

Créez un fichier , _LoginPartial.cshtml, à l’intérieur du dossier /Views/Shared avec l’extrait de code suivant :

@using System.Security.Principal
@if (User.Identity.IsAuthenticated)
{
    <ul class="nav navbar-nav navbar-right">
        <li class="navbar-text">Hello @User.Identity.Name</li>
        <!-- The Account controller is not defined in this project. Instead, it is part of Microsoft.Identity.Web.UI nuget package and
            it defines some well known actions such as SignUp/In, SignOut and EditProfile-->
        <li class="navbar-btn">
            <form method="get" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="EditProfile">
                <button type="submit" class="btn btn-primary" style="margin-right:5px">Edit Profile</button>
            </form>
        </li>
        <li class="navbar-btn">
            <form method="get" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="SignOut">
                <button type="submit" class="btn btn-primary">Sign Out</button>
            </form>
        </li>
    </ul>
}
else
{
    <ul class="nav navbar-nav navbar-right">
        <li class="navbar-btn">
            <form method="get" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="SignIn">
                <button type="submit" class="btn btn-primary">Sign Up/In</button>
            </form>
        </li>
    </ul>
}

Modifiez votre fichier /Views/Shared_Layout.cshtml pour inclure le fichier _LoginPartial.cshtml que vous avez ajouté. Le fichier _Layout.cshtml est une disposition courante qui offre aux utilisateurs une expérience cohérente à mesure qu’ils passent de la page à la page. La disposition inclut des éléments d’interface utilisateur courants, tels que l’en-tête et le pied de page de l’application.

Remarque

Selon la version .NET Core que vous exécutez et si vous ajoutez la connexion à une application existante, les éléments d’interface utilisateur peuvent ressembler à différents. Si c’est le cas, veillez à inclure _LoginPartial à l’emplacement approprié dans la mise en page.

Ouvrez le fichier /Views/Shared/_Layout.cshtml , puis ajoutez l’élément suivant div .

<div class="navbar-collapse collapse">
...
</div>

Remplacez cet élément par le code Razor suivant :

<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav">
    <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
    <li><a asp-area="" asp-controller="Home" asp-action="Claims">Claims</a></li>
  </ul>
  <partial name="_LoginPartial" />
</div>

Le code Razor précédent inclut un lien vers l’action Claims que vous allez créer à l’étape suivante.

Étape 5 : Ajouter la vue revendications

Pour afficher les revendications de jeton d’ID, sous le dossier /Views/Home , ajoutez la vue Claims.cshtml .

@using System.Security.Claims

@{
  ViewData["Title"] = "Claims";
}
<h2>@ViewData["Title"].</h2>

<table class="table-hover table-condensed table-striped">
  <tr>
    <th>Claim Type</th>
    <th>Claim Value</th>
  </tr>

  @foreach (Claim claim in User.Claims)
  {
    <tr>
      <td>@claim.Type</td>
      <td>@claim.Value</td>
    </tr>
  }
</table>

Dans cette étape, vous ajoutez l’action Claims qui lie la vue Claims.cshtml au contrôleur d’accueil . L’action Claims utilise l’attribut, qui limite l’accès Authorize à l’action aux utilisateurs authentifiés.

Dans le contrôleur /Controllers/HomeController.cs , ajoutez l’action suivante :

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

Au début de la classe, ajoutez la déclaration suivante using :

using Microsoft.AspNetCore.Authorization;

Étape 6 : Ajouter les paramètres de l’application

Les paramètres du fournisseur d’identité Azure AD B2C sont stockés dans le fichier appsettings.json . Ouvrez appsettings.json, puis ajoutez les paramètres suivants :

"AzureAdB2C": {
  "Instance": "https://<your-tenant-name>.b2clogin.com",
  "ClientId": "<web-app-application-id>",
  "Domain": "<your-b2c-domain>",
  "SignedOutCallbackPath": "/signout-oidc",
  "SignUpSignInPolicyId": "<your-sign-up-in-policy>"
}

Les informations requises sont décrites dans l’article Configurer l’authentification dans un exemple d’application web . Utilisez les paramètres suivants :

Instance : remplacez <your-tenant-name> par la première partie de votre nom de locataire Azure AD B2C (par exemple). https://contoso.b2clogin.com
Domaine : remplacez <your-b2c-domain> par votre nom de locataire complet Azure AD B2C (par exemple). contoso.onmicrosoft.com
ID client : remplacez <web-app-application-id> par l’ID d’application de l’étape 2.
Nom de la stratégie : remplacez <your-sign-up-in-policy> par les flux utilisateur que vous avez créés à l’étape 1.

Étape 7 : Exécuter votre application

Générez et exécutez le projet.
Accédez à https://localhost:5001.
Sélectionnez S’inscrire/se connecter.
Terminez le processus d’inscription ou de connexion.

Une fois que vous avez correctement authentifié, vous verrez votre nom complet dans la barre de navigation. Pour afficher les revendications retournées par le jeton Azure AD B2C à votre application, sélectionnez Revendications.

Étapes suivantes

Découvrez comment personnaliser et améliorer l’expérience d’authentification Azure AD B2C pour votre application web.

Rétroaction

Cette page vous a-t-elle été utile ?

Last updated on 2025-05-08