Udostępnij za pośrednictwem

Samouczek: dodawanie logowania do aplikacji

  • Artykuł

W poprzednim samouczku utworzono i skonfigurowano projekt ASP.NET Core na potrzeby uwierzytelniania. Ten samouczek zainstaluje wymagane pakiety i doda kod, który implementuje uwierzytelnianie w środowisku logowania i wylogowania.

W tym samouczku:

  • Identyfikowanie i instalowanie pakietów NuGet wymaganych do uwierzytelniania
  • Implementowanie uwierzytelniania w kodzie
  • Dodawanie środowisk logowania i wylogowywanie

Wymagania wstępne

Instalowanie pakietów tożsamości

Pakiety NuGet związane z tożsamościami muszą być zainstalowane w projekcie, aby umożliwić uwierzytelnianie użytkowników.

  1. W górnym menu programu Visual Studio wybierz pozycję Narzędzia > NuGet Menedżer pakietów > Zarządzaj pakietami NuGet dla rozwiązania.
  2. Po wybraniu karty Przeglądaj wyszukaj i wybierz pozycję Microsoft.Identity.Web.UI. Zaznacz pole wyboru Projekt, a następnie wybierz pozycję Zainstaluj.
  3. Powtórz to w przypadku elementów Microsoft.Identity.Web.Diagnostics i Microsoft.Identity.Web.DownstreamApi.

Implementowanie uwierzytelniania i uzyskiwanie tokenów

  1. Otwórz Program.cs i zastąp całą zawartość pliku następującym fragmentem kodu:

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

Dodawanie środowiska logowania i wylogowywanie

Po zainstalowaniu pakietów NuGet i dodaniu niezbędnego kodu do uwierzytelniania dodaj środowiska logowania i wylogowania.

Tworzenie pliku _LoginPartial.cshtml

  1. Rozwiń węzeł Strony, kliknij prawym przyciskiem myszy pozycję Udostępnione, a następnie wybierz pozycję Dodaj > stronę Razor.
  2. Wybierz pozycję Strona Razor — pusta, a następnie wybierz pozycję Dodaj.
  3. Wprowadź nazwę _LoginPartial.cshtml , a następnie wybierz pozycję Dodaj.

Edytowanie pliku _LoginPartial.cshtml

  1. Otwórz plik _LoginPartial.cshtml i dodaj następujący kod, aby dodać środowisko logowania i wylogowania:

    @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. Otwórz plik _Layout.cshtml i dodaj odwołanie do _LoginPartial utworzonego w poprzednim kroku. Ten pojedynczy wiersz należy umieścić między elementami </ul> i </div>:

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

Następne kroki

Samouczek: wywoływanie interfejsu API i wyświetlanie wyników