Esercitazione: Aggiungere l'accesso a un'applicazione

  • Articolo

Nell'esercitazione precedente è stato creato e configurato un progetto ASP.NET Core per l'autenticazione. Questa esercitazione installerà i pacchetti necessari e aggiungerà il codice che implementa l'autenticazione all'esperienza di accesso e disconnesso.

Contenuto dell'esercitazione:

  • Identificare e installare i pacchetti NuGet necessari per l'autenticazione
  • Implementare l'autenticazione nel codice
  • Aggiungere le esperienze di accesso e disconnesso

Prerequisiti

Installare i pacchetti Identity

I pacchetti NuGet correlati all'identità devono essere installati nel progetto per abilitare l'autenticazione degli utenti.

  1. Nel menu in alto di Visual Studio selezionare Strumenti > NuGet Gestione pacchetti > Gestisci pacchetti NuGet per la soluzione.
  2. Con la scheda Sfoglia selezionata, cercare e selezionare Microsoft.Identity.Web.UI. Selezionare la casella di controllo Progetto e quindi selezionare Installa.
  3. Ripetere questa operazione per Microsoft.Identity.Web.Diagnostics e Microsoft.Identity.Web.DownstreamApi.

Implementare l'autenticazione e acquisire i token

  1. Aprire Program.cs e sostituire l'intero contenuto del file con il frammento di codice seguente:

    // <ms_docref_import_types>
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc.Authorization;
using Microsoft.Identity.Web;
using Microsoft.Identity.Web.UI;
// </ms_docref_import_types>

// <ms_docref_add_msal>
WebApplicationBuilder builder = WebApplication.CreateBuilder(args);
IEnumerable<string>? initialScopes = builder.Configuration["DownstreamApi:Scopes"]?.Split(' ');


builder.Services.AddMicrosoftIdentityWebAppAuthentication(builder.Configuration, "AzureAd")
    .EnableTokenAcquisitionToCallDownstreamApi(initialScopes)
        .AddDownstreamApi("DownstreamApi", builder.Configuration.GetSection("DownstreamApi"))
        .AddInMemoryTokenCaches();
// </ms_docref_add_msal>

// <ms_docref_add_default_controller_for_sign-in-out>
builder.Services.AddRazorPages().AddMvcOptions(options =>
    {
        var policy = new AuthorizationPolicyBuilder()
                      .RequireAuthenticatedUser()
                      .Build();
        options.Filters.Add(new AuthorizeFilter(policy));
    }).AddMicrosoftIdentityUI();
// </ms_docref_add_default_controller_for_sign-in-out>

// <ms_docref_enable_authz_capabilities>
WebApplication app = builder.Build();

app.UseAuthentication();
app.UseAuthorization();
// </ms_docref_enable_authz_capabilities>

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

app.UseRouting();

app.MapRazorPages();
app.MapControllers();

app.Run();

Aggiungere l'esperienza di accesso e disconnesso

Dopo aver installato i pacchetti NuGet e aver aggiunto il codice necessario per l'autenticazione, aggiungere le esperienze di accesso e disconnesso.

Creare il file _LoginPartial.cshtml

  1. Espandere Pagine, fare clic con il pulsante destro del mouse su Condiviso e quindi scegliere Aggiungi > pagina Razor.
  2. Selezionare Razor Page - Empty (Pagina Razor - Vuota) e quindi selezionare Aggiungi.
  3. Immettere _LoginPartial.cshtml per il nome e quindi selezionare Aggiungi.

Modificare il file _LoginPartial.cshtml

  1. Aprire _LoginPartial.cshtml e aggiungere il codice seguente per aggiungere l'esperienza di accesso e disconnesso:

    @using System.Security.Principal

<ul class="navbar-nav">
@if (User.Identity?.IsAuthenticated == true)
{
        <li class="nav-item">
            <span class="navbar-text text-dark">Hello @User.Identity?.Name!</span>
        </li>
        <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>

  2. Aprire _Layout.cshtml e aggiungere un riferimento a _LoginPartial creato nel passaggio precedente. Questa singola riga deve essere posizionata tra </ul> e </div>:

        </ul>
    <partial name="_LoginPartial" />
</div>

Passaggi successivi

Esercitazione: Chiamare un'API e visualizzare i risultati