Partager via

Authentification cloud avec Azure Active Directory B2C dans ASP.NET Core

  • Article

Par Damien Bowden

Azure Active Directory B2C (Azure AD B2C) est une solution de gestion des identity cloud pour les applications web et mobiles grand public. Le service fournit une authentification pour les applications hébergées dans le cloud et localement. Les types d’authentification incluent les comptes individuels, les comptes de réseau social et les comptes d’entreprise fédérés. En outre, Azure AD B2C peut fournir une authentification multifacteur avec une configuration minimale.

Conseil

Microsoft Entra ID, Microsoft Entra External ID et Azure AD B2C sont des offres de produits distinctes. Un locataire Entra ID représente généralement une organisation, tandis qu’un locataire Azure AD B2C ou Microsoft Entra External ID peut représenter une collection d’identités à utiliser avec des applications par partie de confiance. Pour plus d’informations, consultez Azure AD B2C : questions fréquemment posées (FAQ).

Conseil

ID externe Microsoft Entra pour les clients est la nouvelle solution de gestion des accès et des identity des clients (CIAM) de Microsoft.

Dans ce tutoriel, vous allez apprendre à configurer une application ASP.NET Core pour l’authentification avec Azure AD B2C.

Prérequis

Préparation

  1. Créer un locataire Azure Active Directory B2C.

  2. Créer une nouvelle application Razor Pages ASP.NET Core :

    dotnet new razor -o azure-ad-b2c

    La commande précédente crée une Razor application Pages dans un répertoire nommé azure-ad-b2c.

    Conseil

    Vous préférerez peut-être utiliser Visual Studio pour créer votre application.

  3. Créer une inscription d’application web dans le locataire. Pour URI de redirection, utilisez https://localhost:5001/signin-oidc. Remplacez 5001 par le port utilisé par votre application lors de l’utilisation de ports générés par Visual Studio.

Modifier l’application

  1. Ajoutent les packages Microsoft.Identity.Web et Microsoft.Identity.Web.UI au projet. Si vous utilisez Visual Studio, vous pouvez utiliser Gestionnaire de package NuGet.

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

    Dans ce qui précède :

    • Microsoft.Identity.Web inclut l’ensemble de dépendances de base pour l’authentification auprès de la plateforme Microsoft identity.
    • Microsoft.Identity.Web.UI inclut des fonctionnalités d’IU encapsulées dans une zone nommée MicrosoftIdentity.

  2. Ajouter un objet AzureADB2C à appsettings.json.

    Remarque

    Lorsque vous utilisez des flux utilisateur Azure B2C, vous devez définir l’Instance et le PolicyId du type de flux.

    {
  "AzureADB2C": {
    "Instance": "https://--your-domain--.b2clogin.com",
    "Domain": "[Enter the domain of your B2C tenant, e.g. contoso.onmicrosoft.com]",
    "TenantId": "[Enter 'common', or 'organizations' or the Tenant Id (Obtained from the Azure portal. Select 'Endpoints' from the 'App registrations' blade and use the GUID in any of the URLs), e.g. da41245a5-11b3-996c-00a8-4d99re19f292]",
    "ClientId": "[Enter the Client Id (Application ID obtained from the Azure portal), e.g. ba74781c2-53c2-442a-97c2-3d60re42f403]",
    // Use either a secret or a certificate. ClientCertificates are recommended.
    "ClientSecret": "[Copy the client secret added to the app from the Azure portal]",
    "ClientCertificates": [
    ],
    // the following is required to handle Continuous Access Evaluation challenges
    "ClientCapabilities": [ "cp1" ],
    "CallbackPath": "/signin-oidc",
    // Add your policy here
    "SignUpSignInPolicyId": "B2C_1_signup_signin",
    "SignedOutCallbackPath": "/signout-callback-oidc"
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*"
}
    • Pour Domaine, utilisez le domaine de votre locataire Azure AD B2C.
    • Pour ClientId, utilisez l’ID d’application (client) de l’inscription d’application que vous avez créée dans votre locataire.
    • Pour Instance, utilisez le domaine de votre locataire Azure AD B2C.
    • Pour SignUpSignInPolicyId, utilisez la stratégie de flux utilisateur définie dans le locataire Azure B2C
    • Utilisez la configuration ClientSecret ou ClientCertificates. ClientCertificates est recommandée.
    • Laissez toutes les autres valeurs telles qu’elles sont.

  3. Dans Pages/Partagés, créez un fichier nommé _LoginPartial.cshtml. Incluez le code suivant :

    @using System.Security.Principal

<ul class="navbar-nav">
@if (User.Identity?.IsAuthenticated == true)
{
        <span class="navbar-text text-dark">Hello @User.Identity?.Name!</span>
        <li class="nav-item">
            <a class="nav-link text-dark" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="SignOut">Sign out</a>
        </li>
}
else
{
        <li class="nav-item">
            <a class="nav-link text-dark" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="SignIn">Sign in</a>
        </li>
}
</ul>

    Le code précédent :

    • Vérifie si l’utilisateur est authentifié.
    • Affiche un lien Se déconnecter ou Se connecter selon le cas.
      • Le lien pointe vers une méthode d’action sur le Account contrôleur dans la MicrosoftIdentity zone.

  4. Dans Pages/Shared/_Layout.cshtml, ajoutez la ligne mise en surbrillance dans l’élément <header> :

    <header>
    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
        <div class="container">
            <a class="navbar-brand" asp-area="" asp-page="/Index">azure_ad_b2c</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                <ul class="navbar-nav flex-grow-1">
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
                    </li>
                </ul>
                <partial name="_LoginPartial" />
            </div>
        </div>
    </nav>
</header>

    L’ajout de <partial name="_LoginPartial" /> rend la vue partielle _LoginPartial.cshtml dans chaque requête de page qui utilise ce layout.

  5. Dans Program.cs, apportez les modifications suivantes :

    1. Ajoutez les directives using suivantes :

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

      Le code précédent résout les références utilisées dans les étapes suivantes.

    2. Mettez à jour les lignes builder.Services avec le code suivant :

      builder.Services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
        .AddMicrosoftIdentityWebApp(builder.Configuration.GetSection("AzureADB2C"));

builder.Services.AddAuthorization(options =>
{
    // By default, all incoming requests will be authorized according to 
    // the default policy
    options.FallbackPolicy = options.DefaultPolicy;
});
builder.Services.AddRazorPages(options => {
    options.Conventions.AllowAnonymousToPage("/Index");
})
.AddMvcOptions(options => { })
.AddMicrosoftIdentityUI();

      Dans le code précédent :

      • Les appels aux méthodes AddAuthentication et AddMicrosoftIdentityWebApp configurent l’application pour utiliser Open ID Connect, spécifiquement configuré pour la plateforme Microsoft identity.
      • AddAuthorizationinitialise l’autorisation ASP.NET Core.
      • L’appel AddRazorPages configure l’application afin que les navigateurs anonymes puissent afficher la page Index. Toutes les autres requêtes nécessitent une authentification.
      • AddMvcOptions et AddMicrosoftIdentityUI ajoutent les composants IU requis pour la redirection vers/depuis Azure AD B2C.

    3. Mettez à jour la ligne en surbrillance vers la méthode Configure :

      app.UseRouting();

app.UseAuthentication();
app.UseAuthorization();

app.MapRazorPages();

      Le code précédent active l’authentification dans ASP.NET Core.

Exécuter l’application

Remarque

Utilisez le profil qui correspond aux URI de redirection d’inscription Azure App

  1. Exécutez l’application.

    dotnet run --launch-profile https

  2. Accédez au point de terminaison sécurisé de l’application, par exemple. https://localhost:5001/.

    • La page Index s’affiche sans aucun problème d’authentification.
    • L’en-tête inclut un lien Connexion car vous n’êtes pas authentifié.

  3. Sélectionnez le lien Privacy.

    • Le navigateur est redirigé vers la méthode d’authentification configurée de votre locataire.
    • Une fois connecté, l’en-tête affiche un message de bienvenue et un lien Déconnexion.

Étapes suivantes

Dans ce tutoriel, vous avez appris à configurer une application ASP.NET Core pour l’authentification avec Azure AD B2C.

Maintenant que l’application ASP.NET Core est configurée pour utiliser Azure AD B2C pour l’authentification, l’attribut Authorize peut être utilisé pour sécuriser votre application. Poursuivez le développement de votre application en apprenant à :