Cloudauthentifizierung mit Azure Active Directory B2C in ASP.NET Core

  • Artikel

Von Damien Bod

Azure Active Directory B2C (Azure AD B2C) ist eine Lösung zur Cloudidentitätsverwaltung für Web- und mobile Anwendungen. Der Dienst ermöglicht die Authentifizierung für Apps, die in der Cloud und lokal gehostet werden. Zu den Authentifizierungstypen gehören einzelne Konten, Konten in sozialen Netzwerken und Verbundunternehmenskonten. Darüber hinaus kann Azure AD B2C eine mehrstufige Authentifizierung mit minimaler Konfiguration bereitstellen.

Tipp

Microsoft Entra ID, Microsoft Entra External ID und Azure AD B2C sind separate Produktangebote. Ein Entra ID-Mandant stellt im Allgemeinen eine Organisation dar, während ein Azure AD B2C-Mandant oder ein Microsoft Entra External ID-Mandant eine Sammlung von Identitäten darstellen kann, die mit Anwendungen einer vertrauenden Seite verwendet werden sollen. Weitere Informationen finden Sie unter Azure AD B2C: Häufig gestellte Fragen (FAQ).

Tipp

Microsoft Entra External ID for Customers ist die neue Lösung für Identitäts- und Zugriffsverwaltung für Microsoft-Kunden.

In diesem Tutorial erfahren Sie, wie Sie eine ASP.NET Core-App für die Authentifizierung mit Azure AD B2C konfigurieren.

Voraussetzungen

Vorbereitung

  1. Erstellen eines Azure Active Directory B2C-Mandanten

  2. Erstellen einer neuen ASP.NET Core-Razor Pages-App:

    dotnet new razor -o azure-ad-b2c

    Mit dem vorherigen Befehl wird eine Razor Pages-App im Verzeichnis azure-ad-b2c erstellt.

    Tipp

    Möglicherweise möchten Sie Visual Studio verwenden, um Ihre App zu erstellen.

  3. Erstellen Sie eine Web-App-Registrierung im Mandanten. Verwenden Sie https://localhost:5001/signin-oidc als Umleitungs-URI. Ersetzen Sie bei Verwendung von durch Visual Studio generierten Ports 5001 durch den von Ihrer App verwendeten Port.

Ändern der App

  1. Fügen Sie dem Projekt die Pakete Microsoft.Identity.Web und Microsoft.Identity.Web.UI hinzu. Wenn Sie Visual Studio verwenden, können Sie den NuGet-Paket-Manager verwenden.

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

    Im angegebenen Code gilt:

    • Microsoft.Identity.Web enthält die grundlegenden Abhängigkeiten für die Authentifizierung mit der Microsoft Identity-Plattform.
    • Microsoft.Identity.Web.UI enthält Funktionen der Benutzeroberfläche, die in einem Bereich mit dem Namen MicrosoftIdentity gekapselt sind.

  2. Fügen Sie appsettings.json ein AzureADB2C-Objekt hinzu.

    Hinweis

    Wenn Sie Azure B2C-Benutzerflows verwenden, müssen Sie die Instanz und die PolicyId des Flowtyps festlegen.

    {
  "AzureADB2C": {
    "Instance": "https://--your-domain--.b2clogin.com",
    "Domain": "[Enter the domain of your B2C tenant, e.g. contoso.onmicrosoft.com]",
    "TenantId": "[Enter 'common', or 'organizations' or the Tenant Id (Obtained from the Azure portal. Select 'Endpoints' from the 'App registrations' blade and use the GUID in any of the URLs), e.g. da41245a5-11b3-996c-00a8-4d99re19f292]",
    "ClientId": "[Enter the Client Id (Application ID obtained from the Azure portal), e.g. ba74781c2-53c2-442a-97c2-3d60re42f403]",
    // Use either a secret or a certificate. ClientCertificates are recommended.
    "ClientSecret": "[Copy the client secret added to the app from the Azure portal]",
    "ClientCertificates": [
    ],
    // the following is required to handle Continuous Access Evaluation challenges
    "ClientCapabilities": [ "cp1" ],
    "CallbackPath": "/signin-oidc",
    // Add your policy here
    "SignUpSignInPolicyId": "B2C_1_signup_signin",
    "SignedOutCallbackPath": "/signout-callback-oidc"
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*"
}
    • Verwenden Sie als Domäne die Domäne Ihres Azure AD B2C-Mandanten.
    • Verwenden Sie als ClientId die Anwendungs-ID (Client) aus der App-Registrierung, die Sie in Ihrem Mandanten erstellt haben.
    • Verwenden Sie als Instanz die Domäne Ihres Azure AD B2C-Mandanten.
    • Verwenden Sie als SignUpSignInPolicyId die im Azure B2C-Mandanten definierte Benutzerflowrichtlinie.
    • Verwenden Sie eine der Konfigurationen ClientSecret oder ClientCertificates. „ClientCertificates“ wird empfohlen.
    • Lassen Sie alle anderen Werte unverändert.

  3. Erstellen Sie in Pages/Shared eine Datei mit dem Namen _LoginPartial.cshtml. Fügen Sie folgenden Code ein:

    @using System.Security.Principal

<ul class="navbar-nav">
@if (User.Identity?.IsAuthenticated == true)
{
        <span class="navbar-text text-dark">Hello @User.Identity?.Name!</span>
        <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>

    Der vorangehende Code:

    • Überprüft, ob der/die Benutzer*in authentifiziert ist.
    • Stellt nach Bedarf einen Link zum Abmelden oder Anmelden dar.
      • Der Link verweist auf eine Aktionsmethode auf dem Controller Account im Bereich MicrosoftIdentity.

  4. Fügen Sie in Pages/Shared/_Layout.cshtml die hervorgehobene Zeile im Element <header> hinzu:

    <header>
    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
        <div class="container">
            <a class="navbar-brand" asp-area="" asp-page="/Index">azure_ad_b2c</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                <ul class="navbar-nav flex-grow-1">
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
                    </li>
                </ul>
                <partial name="_LoginPartial" />
            </div>
        </div>
    </nav>
</header>

    Durch Hinzufügen von <partial name="_LoginPartial" /> wird die Teilansicht _LoginPartial.cshtml in jeder Seitenanforderung gerendert, die dieses Layout verwendet.

  5. Nehmen Sie in Program.cs die folgenden Änderungen vor:

    1. Fügen Sie die folgenden using-Anweisungen hinzu:

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

      Der vorstehende Code löst Verweise auf, die in den nächsten Schritten verwendet werden.

    2. Aktualisieren Sie die Zeilen builder.Services mit dem folgenden Code:

      builder.Services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
        .AddMicrosoftIdentityWebApp(builder.Configuration.GetSection("AzureADB2C"));

builder.Services.AddAuthorization(options =>
{
    // By default, all incoming requests will be authorized according to 
    // the default policy
    options.FallbackPolicy = options.DefaultPolicy;
});
builder.Services.AddRazorPages(options => {
    options.Conventions.AllowAnonymousToPage("/Index");
})
.AddMvcOptions(options => { })
.AddMicrosoftIdentityUI();

      Für den Code oben gilt:

      • Aufrufe der Methoden AddAuthentication und AddMicrosoftIdentityWebApp konfigurieren die App für die Verwendung von Open ID Connect, speziell für die Microsoft Identity-Plattform konfiguriert.
      • AddAuthorization initialisiert die ASP.NET Core-Autorisierung.
      • Der Aufruf von AddRazorPages konfiguriert die App so, dass anonyme Browser die Indexseite anzeigen können. Alle anderen Anforderungen erfordern eine Authentifizierung.
      • AddMvcOptions und AddMicrosoftIdentityUI fügen die erforderlichen Komponenten der Benutzeroberfläche für die Umleitung zu/von Azure AD B2C hinzu.

    3. Aktualisieren Sie die hervorgehobene Zeile auf die Configure-Methode:

      app.UseRouting();

app.UseAuthentication();
app.UseAuthorization();

app.MapRazorPages();

      Der vorstehende Code aktiviert die Authentifizierung in ASP.NET Core.

Ausführen der App

Hinweis

Verwenden Sie das Profil, das den Umleitungs-URIs für die Azure-App-Registrierung entspricht.

  1. Führen Sie die App aus.

    dotnet run --launch-profile https

  2. Navigieren Sie zum sicheren Endpunkt der App, z. B. https://localhost:5001/.

    • Die Indexseite wird ohne Authentifizierungsanforderung gerendert.
    • Die Kopfzeile enthält einen Anmeldelink, da Sie nicht authentifiziert sind.

  3. Klicken Sie auf den Link Privacy (Zentralisierte Protokollierung).

    • Der Browser wird an die konfigurierte Authentifizierungsmethode Ihres Mandanten umgeleitet.
    • Nach der Anmeldung werden in der Kopfzeile eine Willkommensnachricht und ein Abmeldelink angezeigt.

Nächste Schritte

In diesem Tutorial haben Sie erfahren, wie Sie eine ASP.NET Core-App für die Authentifizierung mit Azure AD B2C konfigurieren.

Nachdem die ASP.NET Core-App für die Verwendung von Azure AD B2C zum Authentifizieren konfiguriert wurde, kann das Authorize-Attribut zum Schützen Ihrer App verwendet werden. Fahren Sie mit der Entwicklung Ihrer App fort, indem Sie Folgendes lernen: