Handleiding: Inloggen toevoegen aan een toepassing

In de vorige zelfstudieis een ASP.NET Core-project gemaakt en geconfigureerd voor verificatie. In deze zelfstudie worden de vereiste pakketten geïnstalleerd en code toegevoegd waarmee verificatie wordt geïmplementeerd voor de aanmeldings- en afmeldingservaring.

In deze handleiding:

• De NuGet-pakketten identificeren en installeren die nodig zijn voor verificatie
• Verificatie in de code implementeren
• De ervaringen voor aanmelden en afmelden toevoegen

Voorwaarden

• Voltooiing van de vereisten en stappen in Handleiding: Een applicatie voorbereiden voor authenticatie.

Identiteitspakketten installeren

Identiteitsgerelateerde NuGet-pakketten moeten worden geïnstalleerd in het project voor verificatie van gebruikers die moeten worden ingeschakeld.

Visual Studio

1. Selecteer in het bovenste menu van Visual Studio Tools > NuGet Package Manager > NuGet-pakketten beheren voor Solution.
2. Als het tabblad Bladeren is geselecteerd, zoek en selecteer Microsoft.Identity.Web.UI. Vink het selectievakje Project aan en selecteer Installeren .
3. Herhaal dit voor Microsoft.Identity.Web.Diagnostics en Microsoft.Identity.Web.DownstreamApi.

Visual Studio Code

1. Navigeer in de Visual Studio Code-terminal naar NewWebAppLocal.

2. Voer de volgende opdrachten in om de relevante NuGet-pakketten te installeren:

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

Verificatie implementeren en tokens verkrijgen

1. Open Program.cs en vervang de volledige bestandsinhoud door het volgende fragment:

   // <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.GetSection("DownstreamApi:Scopes").Get<IEnumerable<string>>();
   
   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();
   

De aanmeldings- en afmeldingservaring toevoegen

Nadat u de NuGet-pakketten hebt geïnstalleerd en de benodigde code voor verificatie hebt toegevoegd, voegt u de aanmeldings- en afmeldingservaringen toe.

Het bestand _LoginPartial.cshtml maken

Visual Studio

1. Vouw Pagina'suit, klik met de rechtermuisknop op Gedeeldeen selecteer > Razor-pagina toevoegen.
2. Selecteer Razor-pagina -leegmaken en selecteer vervolgens toevoegen.
3. Voer _LoginPartial.cshtml in als naam en selecteer Toevoegen.

Visual Studio Code

Selecteer in de Explorer-balk Pagina's, klik met de rechtermuisknop op Gedeelden selecteer Nieuw bestand. Geef deze de naam _LoginPartial.cshtml.

Het bestand _LoginPartial.cshtml bewerken

1. Open _LoginPartial.cshtml en voeg de volgende code toe voor het toevoegen van de aanmeldings- en afmeldervaring:

   @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. Open _Layout.cshtml en voeg een verwijzing toe naar _LoginPartial die u in de vorige stap hebt gemaakt. Deze enkele regel moet tussen </ul> en </div>worden geplaatst:

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

Volgende stappen

Zelfstudie: Een API aanroepen en resultaten weergeven