Tutorial: Anmeldung zu einer Anwendung hinzufügen

Im vorherigen Lernprogrammwurde ein ASP.NET Core-Projekt erstellt und für Authentifizierungszwecke konfiguriert. In diesem Tutorial werden die erforderlichen Pakete installiert und Code hinzugefügt, der die Authentifizierung für den Anmelde- und Abmeldevorgang implementiert.

In diesem Tutorial werden folgende Themen behandelt:

• Identifizieren und Installieren der NuGet-Pakete, die für die Authentifizierung erforderlich sind
• Implementieren der Authentifizierung im Code
• Hinzufügen der An- und Abmeldefunktionen

Voraussetzungen

• Abschluss der Voraussetzungen und Schritte in Tutorial: Vorbereiten einer Anwendung für die Authentifizierung

Identitätspakete installieren

Identitätsbezogene NuGet-Pakete müssen im Projekt installiert werden, damit die Authentifizierung von Benutzern aktiviert werden kann.

Visual Studio

1. Wählen Sie im oberen Menü von Visual Studio Tools > NuGet-Paket-Manager > NuGet-Pakete für Projektmappe verwalten aus.
2. Suchen Sie auf der Registerkarte Durchsuchen nach Microsoft.Identity.Web.UI, und wählen Sie es aus. Aktivieren Sie das Kontrollkästchen Projekt, und wählen Sie dann Installieren aus.
3. Wiederholen Sie diese Schritte für Microsoft.Identity.Web.Diagnostics und Microsoft.Identity.Web.DownstreamApi.

Visual Studio Code

1. Navigieren Sie im Visual Studio Code-Terminal zu NewWebAppLocal.

2. Geben Sie die folgenden Befehle ein, um die relevanten NuGet-Pakete zu installieren:

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

Implementieren der Authentifizierung und Abrufen von Token

1. Öffnen Sie Program.cs, und ersetzen Sie den gesamten Dateiinhalt durch den folgenden Codeausschnitt:

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

Hinzufügen der An- und Abmeldefunktionen

Nachdem Sie die NuGet-Pakete installiert und den erforderlichen Code für die Authentifizierung hinzugefügt haben, fügen Sie die An- und Abmeldefunktionen hinzu.

Erstellen Sie die Datei _LoginPartial.cshtml

Visual Studio

1. Erweitern Sie Seiten, klicken Sie mit der rechten Maustaste auf Freigegeben, und wählen Sie dann Hinzufügen > Razor-Seite aus.
2. Wählen Sie Razor-Seite – Leer und dann hinzufügen aus.
3. Geben Sie _LoginPartial.cshtml als Name ein, und wählen Sie hinzufügen aus.

Visual Studio Code

Wählen Sie in der Explorer-Leiste Seiten aus, klicken Sie mit der rechten Maustaste auf Freigegeben, und wählen Sie Neue Datei aus. Geben Sie ihm den Namen _LoginPartial.cshtml.

Bearbeiten der datei _LoginPartial.cshtml

1. Öffnen Sie _LoginPartial.cshtml, und fügen Sie den folgenden Code für das Anmelde- und Abmeldeerlebnis hinzu:

   @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. Öffnen Sie _Layout.cshtml und fügen Sie einen Verweis auf _LoginPartial hinzu, der im vorherigen Schritt erstellt wurde. Diese einzelne Linie sollte zwischen </ul> und </div>platziert werden:

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

Nächste Schritte

Lernprogramm: Aufrufen einer API und Anzeigen von Ergebnissen