Freigeben über

Aktivieren der Authentifizierung in Ihrer eigenen Web-App mithilfe von Azure AD B2C

Von Bedeutung

Ab dem 1. Mai 2025 steht Azure AD B2C nicht mehr für neue Kunden zur Verfügung. Weitere Informationen finden Sie in unseren HÄUFIG gestellten Fragen.

In diesem Artikel wird erläutert, wie Sie Ihrer eigenen ASP.NET Webanwendung azure Active Directory B2C (Azure AD B2C) Authentifizierung hinzufügen. Erfahren Sie, wie Sie eine ASP.NET Core-Webanwendung mit ASP.NET Core Middleware erstellen, die das OpenID Connect-Protokoll verwendet.

Verwenden Sie diesen Artikel in Verbindung mit der Konfiguration der Authentifizierung in einer Beispielweb-App, indem Sie die Beispielweb-App durch Ihre eigene Web-App ersetzen.

Voraussetzungen

Informationen zum Überprüfen der Voraussetzungen und Integrationsanweisungen finden Sie unter Konfigurieren der Authentifizierung in einer Beispielwebanwendung.

Schritt 1: Erstellen eines Web-App-Projekts

Sie können ein vorhandenes ASP.NET MVC-Web-App-Projekt (Model-View-Controller) oder ein neues Projekt erstellen. Um ein neues Projekt zu erstellen, öffnen Sie eine Befehlsshell, und geben Sie dann den folgenden Befehl ein:

dotnet new mvc -o mywebapp

Der vorstehende Befehl führt folgende Aktionen aus:

  • Es erstellt eine neue MVC-Web-App.
  • Der -o mywebapp Parameter erstellt ein Verzeichnis mit dem Namen "mywebapp " mit den Quelldateien für die App.

Schritt 2: Hinzufügen der Authentifizierungsbibliotheken

Fügen Sie die Microsoft Identity Web Library hinzu, die eine Reihe von ASP.NET Core-Bibliotheken ist, die das Hinzufügen von Azure AD B2C-Authentifizierung und Autorisierungsunterstützung zu Ihrer Web-App vereinfachen. Die Microsoft Identity Web Library richtet die Authentifizierungspipeline mit cookiebasierter Authentifizierung ein. Es kümmert sich um das Senden und Empfangen von HTTP-Authentifizierungsnachrichten, tokenüberprüfung, Anspruchsextraktion und vieles mehr.

Um die Microsoft Identity Web Library hinzuzufügen, installieren Sie die Pakete, indem Sie die folgenden Befehle ausführen:

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

Schritt 3: Initiieren der Authentifizierungsbibliotheken

Die Microsoft Identity Web Middleware verwendet eine Startklasse, die beim Starten des Hostingprozesses ausgeführt wird. In diesem Schritt fügen Sie den erforderlichen Code hinzu, um die Authentifizierungsbibliotheken zu initiieren.

Öffnen Sie Startup.cs , und fügen Sie dann am Anfang der Klasse die folgenden using Deklarationen hinzu:

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Authentication.OpenIdConnect;
using Microsoft.Identity.Web;
using Microsoft.Identity.Web.UI;

Da Microsoft Identity Web cookiebasierte Authentifizierung verwendet, um Ihre Web-App zu schützen, legt der folgende Code die SameSite-Cookieeinstellungen fest. Anschließend liest er die AzureAdB2C Anwendungseinstellungen und initiiert den Middleware-Controller mit seiner Ansicht.

Ersetzen Sie die ConfigureServices(IServiceCollection services) Funktion durch den folgenden Codeausschnitt:

public void ConfigureServices(IServiceCollection services)
{
    services.Configure<CookiePolicyOptions>(options =>
    {
        // This lambda determines whether user consent for non-essential cookies is needed for a given request.
        options.CheckConsentNeeded = context => true;
        options.MinimumSameSitePolicy = SameSiteMode.Unspecified;
        // Handling SameSite cookie according to https://learn.microsoft.com/aspnet/core/security/samesite?view=aspnetcore-3.1
        options.HandleSameSiteCookieCompatibility();
    });

    // Configuration to sign-in users with Azure AD B2C
    services.AddMicrosoftIdentityWebAppAuthentication(Configuration, "AzureAdB2C");

    services.AddControllersWithViews()
        .AddMicrosoftIdentityUI();

    services.AddRazorPages();

    //Configuring appsettings section AzureAdB2C, into IOptions
    services.AddOptions();
    services.Configure<OpenIdConnectOptions>(Configuration.GetSection("AzureAdB2C"));
}

Der folgende Code fügt die Cookierichtlinie hinzu und verwendet das Authentifizierungsmodell. Ersetzen Sie die Configure Funktion durch den folgenden Codeausschnitt:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Home/Error");
        // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
        app.UseHsts();
    }

    app.UseHttpsRedirection();
    app.UseStaticFiles();

    // Add the Microsoft Identity Web cookie policy
    app.UseCookiePolicy();
    app.UseRouting();
    // Add the ASP.NET Core authentication service
    app.UseAuthentication();
    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller=Home}/{action=Index}/{id?}");
        
        // Add endpoints for Razor pages
        endpoints.MapRazorPages();
    });
};

Schritt 4: Hinzufügen der UI-Elemente

Verwenden Sie zum Hinzufügen von Benutzeroberflächenelementen eine Partielle Ansicht, die Logik enthält, um festzustellen, ob Benutzer angemeldet sind. Wenn Benutzer nicht angemeldet sind, rendert die Teilansicht die Anmeldeschaltfläche. Wenn sie angemeldet sind, wird der Anzeigename und die Abmeldeschaltfläche des Benutzers angezeigt.

Erstellen Sie eine neue Datei , _LoginPartial.cshtml, innerhalb des Ordners "/Views/Shared " mit dem folgenden Codeausschnitt:

@using System.Security.Principal
@if (User.Identity.IsAuthenticated)
{
    <ul class="nav navbar-nav navbar-right">
        <li class="navbar-text">Hello @User.Identity.Name</li>
        <!-- The Account controller is not defined in this project. Instead, it is part of Microsoft.Identity.Web.UI nuget package and
            it defines some well known actions such as SignUp/In, SignOut and EditProfile-->
        <li class="navbar-btn">
            <form method="get" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="EditProfile">
                <button type="submit" class="btn btn-primary" style="margin-right:5px">Edit Profile</button>
            </form>
        </li>
        <li class="navbar-btn">
            <form method="get" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="SignOut">
                <button type="submit" class="btn btn-primary">Sign Out</button>
            </form>
        </li>
    </ul>
}
else
{
    <ul class="nav navbar-nav navbar-right">
        <li class="navbar-btn">
            <form method="get" asp-area="MicrosoftIdentity" asp-controller="Account" asp-action="SignIn">
                <button type="submit" class="btn btn-primary">Sign Up/In</button>
            </form>
        </li>
    </ul>
}

Ändern Sie Die Datei "/Views/Shared_Layout.cshtml " so, dass sie die hinzugefügte datei "_LoginPartial.cshtml " enthält. Die Datei _Layout.cshtml ist ein gängiges Layout, das Benutzern eine konsistente Benutzererfahrung bietet, während sie von Seite zu Seite wechseln. Das Layout enthält allgemeine Benutzeroberflächenelemente, z. B. die Kopf- und Fußzeile der App.

Hinweis

Je nach .NET Core-Version, die Sie ausführen, und ob Sie einer vorhandenen App Anmeldung hinzufügen, sehen die UI-Elemente möglicherweise anders aus. Achten Sie in diesem Fall darauf, _LoginPartial an der richtigen Position innerhalb des Seitenlayouts einzuschließen.

Öffnen Sie die Datei "/Views/Shared/_Layout.cshtml ", und fügen Sie dann das folgende div Element hinzu.

<div class="navbar-collapse collapse">
...
</div>

Ersetzen Sie dieses Element durch den folgenden Razor-Code:

<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav">
    <li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
    <li><a asp-area="" asp-controller="Home" asp-action="Claims">Claims</a></li>
  </ul>
  <partial name="_LoginPartial" />
</div>

Der vorangehende Razor-Code enthält einen Link zu der Claims Aktion, die Sie im nächsten Schritt erstellen.

Schritt 5: Hinzufügen der Anspruchsansicht

Um die ID-Tokenansprüche anzuzeigen, fügen Sie unter dem Ordner "/Views/Home " die Ansicht "Claims.cshtml " hinzu.

@using System.Security.Claims

@{
  ViewData["Title"] = "Claims";
}
<h2>@ViewData["Title"].</h2>

<table class="table-hover table-condensed table-striped">
  <tr>
    <th>Claim Type</th>
    <th>Claim Value</th>
  </tr>

  @foreach (Claim claim in User.Claims)
  {
    <tr>
      <td>@claim.Type</td>
      <td>@claim.Value</td>
    </tr>
  }
</table>

In diesem Schritt fügen Sie die Claims Aktion hinzu, die die Claims.cshtml-Ansicht mit dem Startcontroller verknüpft. Die Claims Aktion verwendet das Authorize Attribut, das den Zugriff auf die Aktion auf authentifizierte Benutzer beschränkt.

Fügen Sie im Controller /controller/HomeController.cs die folgende Aktion hinzu:

[Authorize]
public IActionResult Claims()
{
    return View();
}

Fügen Sie am Anfang der Klasse die folgende using Deklaration hinzu:

using Microsoft.AspNetCore.Authorization;

Schritt 6: Hinzufügen der App-Einstellungen

Azure AD B2C-Identitätsanbietereinstellungen werden in der appsettings.json Datei gespeichert. Öffnen Sie appsettings.json, und fügen Sie dann die folgenden Einstellungen hinzu:

"AzureAdB2C": {
  "Instance": "https://<your-tenant-name>.b2clogin.com",
  "ClientId": "<web-app-application-id>",
  "Domain": "<your-b2c-domain>",
  "SignedOutCallbackPath": "/signout-oidc",
  "SignUpSignInPolicyId": "<your-sign-up-in-policy>"
}

Die erforderlichen Informationen werden im Artikel "Konfigurieren der Authentifizierung" in einem Beispielartikel zu Web App beschrieben. Verwenden Sie folgende Einstellungen:

  • Instanz: Ersetzen Sie <your-tenant-name> den ersten Teil Ihres Azure AD B2C-Mandantennamens (z. B https://contoso.b2clogin.com. ).
  • Domäne: Ersetzen Sie <your-b2c-domain> den vollständigen Mandantennamen von Azure AD B2C (z. B contoso.onmicrosoft.com. ).
  • Client-ID: Ersetzen Sie <web-app-application-id> die Anwendungs-ID aus Schritt 2.
  • Richtlinienname: Ersetzen Sie durch <your-sign-up-in-policy> die Benutzerflüsse, die Sie in Schritt 1 erstellt haben.

Schritt 7: Ausführen der Anwendung

  1. Erstellen Sie das Projekt, und führen Sie es aus.
  2. Gehe zu https://localhost:5001.
  3. Wählen Sie "Registrieren/Anmelden" aus.
  4. Schließen Sie den Registrierungs- oder Anmeldevorgang ab.

Nachdem Sie sich erfolgreich authentifiziert haben, wird Ihr Anzeigename in der Navigationsleiste angezeigt. Um die Ansprüche anzuzeigen, die das Azure AD B2C-Token an Ihre App zurückgibt, wählen Sie "Ansprüche" aus.

Nächste Schritte