Zelfstudie: Aanmelden toevoegen aan een toepassing

In de vorige zelfstudie is 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 zelfstudie:

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

Vereisten

• Voltooiing van de vereisten en stappen in de zelfstudie: Een toepassing voorbereiden voor verificatie.

Identiteitspakketten installeren

NuGet-pakketten met betrekking tot identiteiten moeten worden geïnstalleerd in het project om te kunnen verifiëren dat gebruikers worden ingeschakeld.

Visual Studio

1. Selecteer Tools > NuGet Pakketbeheer > Manage NuGet Packages for Solution in het bovenste menu van Visual Studio.
2. Als het tabblad Bladeren is geselecteerd, zoekt en selecteert u Microsoft.Identity.Web.UI. Schakel het selectievakje Project in en selecteer Vervolgens 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 
   

Visual Studio voor Mac

1. Selecteer Tools>Manage NuGet Packages in het bovenste menu.
2. Zoek naar Microsoft.Identity.Web, selecteer het Microsoft.Identity.Web pakket, selecteer Project en selecteer vervolgens Pakket toevoegen.
3. Wijzig uw zoekopdracht om Microsoft.Identity.Web.UI te lezen en selecteer Pakketten toevoegen.
4. Controleer in het pop-upvenster of het juiste project is geselecteerd en selecteer vervolgens OK.
5. Selecteer Accepteren als er extra vensters voor acceptatie van licenties worden weergegeven.

Notitie

Visual Studio voor Mac is gepland voor buitengebruikstelling op 31 augustus 2024 overeenkomstig microsoft Modern levenscyclusbeleid. Visual Studio voor Mac 17.6 blijft tot 31 augustus 2024 ondersteund, met onderhoudsupdates voor beveiligingsproblemen en bijgewerkte platforms van Apple. Raadpleeg wat er gebeurt met Visual Studio voor Mac voor meer informatie.

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

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's uit, klik met de rechtermuisknop op Gedeeld en selecteer Razor-pagina toevoegen>.
2. Selecteer Razor Page - Leeg en selecteer vervolgens Toevoegen.
3. Voer _LoginPartial.cshtml in als naam en selecteer Vervolgens Toevoegen.

Visual Studio Code

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

Visual Studio voor Mac

1. Vouw Pagina's uit, klik met de rechtermuisknop op Gedeeld en selecteer Razor-pagina toevoegen>.
2. Selecteer Razor Page - Leeg en selecteer vervolgens Toevoegen.
3. Voer _LoginPartial.cshtml in als naam en selecteer Vervolgens Toevoegen.

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 die _LoginPartial u in de vorige stap hebt gemaakt. Deze enkele regel moet tussen </ul> en </div>:

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

Volgende stappen

Zelfstudie: Een API aanroepen en resultaten weergeven