Condividi tramite

Autenticazione cloud con Azure Active Directory B2C in ASP.NET Core

Di Damien Bod

Azure Active Directory B2C (Azure AD B2C) è una soluzione di gestione delle identità cloud per le app Web e per dispositivi mobili. Il servizio fornisce l'autenticazione per le app ospitate nel cloud e in locale. I tipi di autenticazione includono account singoli, account di social network e account aziendali federati. Inoltre, Azure AD B2C può fornire l'autenticazione a più fattori con una configurazione minima.

Suggerimento

Microsoft Entra ID, Microsoft Entra External ID e Azure AD B2C sono offerte di prodotti separate. Un tenant Entra ID rappresenta in genere un'organizzazione, mentre un tenant Azure AD B2C o un tenant Microsoft Entra per ID esterno può rappresentare una raccolta di identità da usare con applicazioni di terze parti. Per altre informazioni, vedere Azure AD B2C: Domande frequenti.

Suggerimento

Microsoft Entra External ID per clienti è la nuova soluzione di gestione delle identità e degli accessi dei clienti (CIAM) di Microsoft.

Questa esercitazione descrive come configurare un'app ASP.NET Core per l'autenticazione con Azure AD B2C.

Prerequisiti

Operazioni preliminari

  1. Creare un tenant di Azure Active Directory B2C.

  2. Creare una nuova app di pagine ASP.NET Core Razor:

    dotnet new razor -o azure-ad-b2c

    Il comando precedente crea un'applicazione di pagine Razor in una directory denominata azure-ad-b2c.

    Suggerimento

    È consigliabile usare Visual Studio per creare l'app.

  3. Creare una registrazione dell'app Web nel tenant. Per URI di reindirizzamento, usare https://localhost:5001/signin-oidc. Sostituire 5001 con la porta usata dall'app quando si usano le porte generate da Visual Studio.

Modificare l'app

  1. Aggiungere i pacchetti Microsoft.Identity.Web e Microsoft.Identity.Web.UI al progetto. Se si usa Visual Studio, è possibile usare nuGet Gestione pacchetti.

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

    Nell'esempio precedente:

    • Microsoft.Identity.Web include il set di base di dipendenze per l'autenticazione con Microsoft Identity Platform.
    • Microsoft.Identity.Web.UI include funzionalità dell'interfaccia utente incapsulate in un'area denominata MicrosoftIdentity.

  2. Aggiungere un AzureADB2C oggetto a appsettings.json.

    Nota

    Quando si usano i flussi utente di Azure B2C, è necessario impostare Instance e PolicyId del tipo di flusso.

    {
  "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": "*"
}
    • Per Dominio usare il dominio del tenant di Azure AD B2C.
    • Per ClientId, usa l'ID applicazione (client) dalla registrazione dell'app creata nel tuo tenant.
    • Per Esempio, usare il dominio del tenant di Azure AD B2C.
    • Per SignUpSignInPolicyId, usare i criteri del flusso utente definiti nel tenant di Azure B2C
    • La configurazione ClientSecret o ClientCertificates può essere utilizzata. I certificati client sono consigliati.
    • Lascia tutti gli altri valori così come sono.

  3. In Pages/Shared creare un file denominato _LoginPartial.cshtml. Includere il codice seguente:

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

    Il codice precedente:

    • Controlla se l'utente è autenticato.
    • Esegue il rendering di un Disconnetti o Accedi in base alle esigenze.
      • Il collegamento punta a un metodo d'azione nel controller Account nell'area MicrosoftIdentity.

  4. In Pages/Shared/_Layout.cshtml aggiungere la riga evidenziata all'interno dell'elemento <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'aggiunta di <partial name="_LoginPartial" /> esegue il rendering della _LoginPartial.cshtml vista parziale in ogni richiesta di pagina che utilizza questo layout.

  5. In Program.cs apportare le modifiche seguenti:

    1. Aggiungere le direttive using seguenti:

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

      Il codice precedente risolve i riferimenti usati nei passaggi successivi.

    2. Aggiornare le builder.Services righe con il codice seguente:

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

      Nel codice precedente:

      • Le chiamate ai metodi AddAuthentication e AddMicrosoftIdentityWebApp configurano l'app per l'uso di Open ID Connect, configurate in modo specifico per Microsoft Identity Platform.
      • AddAuthorization inizializza l'autorizzazione di ASP.NET Core.
      • La AddRazorPages chiamata configura l'app in modo che i browser anonimi possano visualizzare la pagina Indice. Tutte le altre richieste richiedono l'autenticazione.
      • AddMvcOptions e AddMicrosoftIdentityUI aggiungere i componenti dell'interfaccia utente necessari per il reindirizzamento da e verso Azure AD B2C.

    3. Aggiorna la riga evidenziata al metodo Configure.

      app.UseRouting();

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

app.MapRazorPages();

      Il codice precedente abilita l'autenticazione in ASP.NET Core.

Eseguire l'app

Nota

Usare il profilo che corrisponde alla registrazione dell'app Azure URI di reindirizzamento

  1. Avvia l'applicazione.

    dotnet run --launch-profile https

  2. Passare all'endpoint sicuro dell'app, ad esempio https://localhost:5001/.

    • La pagina Indice viene visualizzata senza controllo di autenticazione.
    • L'intestazione include un link Accedi perché non sei autenticato.

  3. Selezionare il collegamento Privacy.

    • Il browser viene reindirizzato al metodo di autenticazione configurato del tenant.
    • Dopo aver effettuato l'accesso, l'intestazione visualizza un messaggio di benvenuto e un link 'Disconnetti'.

Passaggi successivi

In questa esercitazione si è appreso come configurare un'app ASP.NET Core per l'autenticazione con Azure AD B2C.

Ora che l'app ASP.NET Core è configurata per l'uso di Azure AD B2C per l'autenticazione, è possibile usare l'attributo Authorize per proteggere l'app. Continuare a sviluppare l'app imparando a: