Abilitare l'autenticazione nell'app Web usando Azure AD B2C

Importante

A partire dal 1° maggio 2025, Azure AD B2C non sarà più disponibile per l'acquisto per i nuovi clienti. Altre informazioni sono disponibili nelle domande frequenti.

Questo articolo illustra come aggiungere l'autenticazione di Azure Active Directory B2C (Azure AD B2C) alla propria applicazione Web ASP.NET. Informazioni su come creare un'applicazione Web ASP.NET Core con ASP.NET middleware Core che usa il protocollo OpenID Connect .

Usare questo articolo insieme a Configurare l'autenticazione in un'app Web di esempio, sostituendo l'app Web di esempio con la propria app Web.

Prerequisiti

Per esaminare i prerequisiti e le istruzioni di integrazione, vedere Configurare l'autenticazione in un'applicazione Web di esempio.

Passaggio 1: Creare un progetto di app Web

È possibile usare un progetto di app Web MVC (Model-View-Controller) ASP.NET esistente o crearne uno nuovo. Per creare un nuovo progetto, aprire una shell dei comandi e quindi immettere il comando seguente:

dotnet new mvc -o mywebapp

Il comando precedente esegue le operazioni seguenti:

Crea una nuova app Web MVC.
Il -o mywebapp parametro crea una directory denominata mywebapp con i file di origine per l'app.

Passaggio 2: Aggiungere le librerie di autenticazione

Aggiungere la libreria Web di Microsoft Identity, ovvero un set di librerie di base di ASP.NET che semplificano l'aggiunta del supporto per l'autenticazione e l'autorizzazione di Azure AD B2C all'app Web. La libreria Web di Microsoft Identity configura la pipeline di autenticazione con l'autenticazione basata su cookie. Si occupa dell'invio e della ricezione di messaggi di autenticazione HTTP, convalida dei token, estrazione di attestazioni e altro ancora.

Per aggiungere la libreria Web di Microsoft Identity, installare i pacchetti eseguendo i comandi seguenti:

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

Passaggio 3: Avviare le librerie di autenticazione

Il middleware Microsoft Identity Web usa una classe di avvio che viene eseguita all'avvio del processo di hosting. In questo passaggio si aggiunge il codice necessario per avviare le librerie di autenticazione.

Aprire Startup.cs e quindi, all'inizio della classe, aggiungere le dichiarazioni seguenti using :

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

Poiché Microsoft Identity Web usa l'autenticazione basata su cookie per proteggere l'app Web, il codice seguente imposta le impostazioni dei cookie SameSite . Legge quindi le impostazioni dell'applicazione AzureAdB2C e avvia il controller middleware con la relativa visualizzazione.

Sostituire la ConfigureServices(IServiceCollection services) funzione con il frammento di codice seguente:

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

Il codice seguente aggiunge i criteri di cookie e usa il modello di autenticazione. Sostituire la Configure funzione con il frammento di codice seguente:

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

Passaggio 4: Aggiungere gli elementi dell'interfaccia utente

Per aggiungere elementi dell'interfaccia utente, usare una visualizzazione parziale contenente la logica per verificare se gli utenti hanno eseguito l'accesso. Se gli utenti non hanno eseguito l'accesso, la visualizzazione parziale esegue il rendering del pulsante di accesso. Se hanno eseguito l'accesso, viene visualizzato il nome visualizzato dell'utente e il pulsante di disconnessione.

Creare un nuovo file , _LoginPartial.cshtml, all'interno della cartella /Views/Shared con il frammento di codice seguente:

@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>
}

Modificare il file /Views/Shared_Layout.cshtml per includere il file _LoginPartial.cshtml aggiunto. Il file _Layout.cshtml è un layout comune che offre agli utenti un'esperienza coerente quando passano da pagina a pagina. Il layout include elementi comuni dell'interfaccia utente, ad esempio l'intestazione e il piè di pagina dell'app.

Annotazioni

A seconda della versione di .NET Core in esecuzione e se si aggiunge l'accesso a un'app esistente, gli elementi dell'interfaccia utente potrebbero avere un aspetto diverso. In tal caso, assicurarsi di includere _LoginPartial nella posizione corretta all'interno del layout di pagina.

Aprire il file /Views/Shared/_Layout.cshtml e quindi aggiungere l'elemento seguente div .

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

Sostituire questo elemento con il codice Razor seguente:

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

Il codice Razor precedente include un collegamento all'azione Claims che verrà creata nel passaggio successivo.

Passaggio 5: Aggiungere la visualizzazione attestazioni

Per visualizzare le attestazioni del token ID, nella cartella /Views/Home aggiungere la vista 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>

In questo passaggio si aggiunge l'azione Claims che collega la vista Claims.cshtml al controller Home . L'azione Claims usa l'attributo Authorize , che limita l'accesso all'azione agli utenti autenticati.

Nel controller /Controllers/HomeController.cs aggiungere l'azione seguente:

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

All'inizio della classe aggiungere la dichiarazione seguente using :

using Microsoft.AspNetCore.Authorization;

Passaggio 6: Aggiungere le impostazioni dell'app

Le impostazioni del provider di identità di Azure AD B2C vengono archiviate nel file diappsettings.json . Aprire appsettings.jsone quindi aggiungere le impostazioni seguenti:

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

Le informazioni necessarie sono descritte nell'articolo Configurare l'autenticazione in un'app Web di esempio . Usare le seguenti impostazioni:

Istanza: sostituire <your-tenant-name> con la prima parte del nome del tenant di Azure AD B2C , ad esempio https://contoso.b2clogin.com.
Dominio: sostituire <your-b2c-domain> con il nome completo del tenant di Azure AD B2C , ad esempio contoso.onmicrosoft.com.
ID client: sostituire <web-app-application-id> con l'ID applicazione del passaggio 2.
Nome criterio: sostituire <your-sign-up-in-policy> con i flussi utente creati nel passaggio 1.

Passaggio 7: Eseguire l'applicazione

Compilare ed eseguire il progetto.
Passare a https://localhost:5001.
Selezionare Iscrizione/Accesso.
Completare il processo di iscrizione o accesso.

Dopo l'autenticazione, nella barra di spostamento verrà visualizzato il nome visualizzato. Per visualizzare le attestazioni restituite dal token di Azure AD B2C all'app, selezionare Attestazioni.

Passaggi successivi

Informazioni su come personalizzare e migliorare l'esperienza di autenticazione di Azure AD B2C per l'app Web.

Commenti e suggerimenti

Questa pagina è stata utile?

Last updated on 2025-05-07