Freigeben über

Tutorial: Hinzufügen einer Anmeldung zu einer Anwendung

  • Artikel

Im vorherigen Tutorial wurde ein ASP.NET Core-Projekt erstellt und für die Authentifizierung konfiguriert. In diesem Tutorial werden die erforderlichen Pakete installiert und Code hinzugefügt, der die Authentifizierung für die An- und Abmeldung implementiert.

Dieses Tutorial umfasst folgende Punkte:

  • NuGet-Pakete, die für die Authentifizierung benötigt werden, identifizieren und installieren
  • Authentifizierung im Code implementieren
  • An- und Abmeldefunktionen hinzufügen

Voraussetzungen

Identitätspakete installieren

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

  1. Wählen Sie im oberen Menü von Visual Studio Tools> NuGet Package Manager > NuGet-Pakete für Lösungen 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 klicken Sie dann auf Installieren.
  3. Wiederholen Sie diesen Vorgang für Microsoft.Identity.Web.Diagnostics und Microsoft.Identity.Web.DownstreamApi.

Authentifizierung implementieren und Token abrufen

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

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

An- und Abmeldeoberfläche hinzufügen

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.

Datei _LoginPartial.cshtml erstellen

  1. Erweitern Sie Seiten, klicken Sie mit der rechten Maustaste auf Freigegeben, und wählen Sie dann Razor-Seite > hinzufügen 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.

Datei _LoginPartial.cshtml bearbeiten

  1. Öffnen Sie _LoginPartial.cshtml, und fügen Sie den folgenden Code zum Hinzufügen der An- und Abmeldefunktion 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 _LoginPartial einen Verweis hinzu, der im vorherigen Schritt erstellt wurde. Diese einzelne Zeile sollte zwischen </ul> und </div>platziert werden:

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

Nächste Schritte

Tutorial: Aufrufen einer API und Anzeigen von Ergebnissen