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

Articolo
01/11/2024

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

Usare questo articolo insieme all'autenticazione in un'app Web di esempio, sostituendo l'app Web di esempio con l'app Web personalizzata.

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) esistente ASP.NET 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, che è un set di librerie di ASP.NET Core che semplificano l'aggiunta dell'autenticazione e dell'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 del 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 funzione con il ConfigureServices(IServiceCollection services) 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 funzione con il Configure 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 che contiene la logica per verificare se gli utenti sono connessi. Se gli utenti non sono connessi, la visualizzazione parziale esegue il rendering del pulsante di accesso. Se sono connessi, mostra 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 dalla pagina alla pagina. Il layout include elementi comuni dell'interfaccia utente, ad esempio l'intestazione dell'app e il piè di pagina.

Nota

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 essere diversi. In tal caso, assicurarsi di includere _LoginPartial nella posizione appropriata 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 creata nel passaggio successivo.

Passaggio 5: Aggiungere la visualizzazione attestazioni

Per visualizzare le attestazioni del token ID, nella cartella /Views/Home aggiungere la visualizzazione 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 che collega la Claims visualizzazione Claims.cshtml al controller Home . L'azione Claims usa l'attributo, che limita l'accesso Authorize all'azione per gli utenti autenticati.

Nel controller /Controller/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à B2C di Azure AD vengono archiviate nel file appsettings.json . Aprire appsettings.json e 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 dal 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 Accedi/In.
Completare il processo di iscrizione o accesso.

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

Passaggi successivi

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

Condividi tramite