Anpassen der Benutzeroberfläche in Azure Active Directory B2C

2025-05-08

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.

Bevor Sie beginnen, verwenden Sie die Auswahl eines Richtlinientyps oben auf dieser Seite, um den Typ der Richtlinie auszuwählen, die Sie einrichten. Azure Active Directory B2C bietet zwei Methoden zum Definieren der Benutzerinteraktion mit Ihren Anwendungen: vordefinierte Benutzerflows oder vollständig konfigurierbare benutzerdefinierte Richtlinien. Die Schritte, die in diesem Artikel erforderlich sind, unterscheiden sich für jede Methode.

Das Branding und Anpassen der Benutzeroberfläche, die Azure Active Directory B2C (Azure AD B2C) für Ihre Kunden anzeigt, bietet eine nahtlose Benutzererfahrung in Ihrer Anwendung. Diese Erfahrungen umfassen die Registrierung, Anmeldung, Profilbearbeitung und Kennwortzurücksetzung. In diesem Artikel passen Sie Ihre Azure AD B2C-Seiten mithilfe von Seitenvorlagen und Unternehmensbranding an.

Tipp

Wenn Sie andere Aspekte ihrer Benutzerflussseiten über die Seitenvorlage, das Bannerlogo, das Hintergrundbild oder die Hintergrundfarbe hinaus anpassen möchten, erfahren Sie, wie Sie die Benutzeroberfläche mit HTML-Vorlage anpassen.

Voraussetzungen

Erstellen Sie einen Benutzerflow, damit sich Benutzer bei Ihrer Anwendung registrieren und anmelden können.
Registrieren Sie eine Webanwendung.

Führen Sie die Schritte in "Erste Schritte mit benutzerdefinierten Richtlinien in Active Directory B2C" aus. In diesem Lernprogramm erfahren Sie, wie Sie benutzerdefinierte Richtliniendateien für die Verwendung Ihrer Azure AD B2C-Mandantenkonfiguration aktualisieren.
Registrieren Sie eine Webanwendung.

Überblick

Azure AD B2C bietet mehrere integrierte Vorlagen, aus der Sie auswählen können, um Ihren Benutzeroberflächenseiten ein professionelles Aussehen zu verleihen. Diese Seitenvorlagen können auch als Ausgangspunkt für Ihre eigene Anpassung dienen, mithilfe des Unternehmensbrandings.

Hinweis

Unterstützte Browser für die klassische Vorlage umfassen aktuelle und frühere Versionen von Internet Explorer, Microsoft Edge, Google Chrome, Mozilla Firefox und Safari. Die Vorlagen "Ocean Blue" und "Slate Gray" haben möglicherweise eingeschränkte Unterstützung für ältere Browserversionen, z. B. Internet Explorer 11 und 10; wir empfehlen, Ihre Anwendung mit den Browsern zu testen, die Sie unterstützen möchten.

Ozeanblau

Beispiel für die Ocean Blue-Vorlage, die auf der Registrierungs- und Anmeldeseite angezeigt wird.

Screenshot der Vorlage

Schiefergrau

Beispiel für die gerenderte Vorlage „Schiefergrau“ auf der Seite für die Registrierung/Anmeldung:

Screenshot: Vorlage „Schiefergrau“

Klassisch

Beispiel für die gerenderte Vorlage „Klassisch“ auf der Seite für die Registrierung/Anmeldung:

Screenshot der klassischen Vorlage

Unternehmensbranding

Sie können Ihre Azure AD B2C-Seiten mit einem Bannerlogo, einem Hintergrundbild und einer Hintergrundfarbe anpassen, indem Sie das Branding des Microsoft Entra ID-Unternehmens verwenden. Dieses Unternehmensbranding umfasst die Funktionen zum Registrieren, Anmelden, Bearbeiten von Profilen und Zurücksetzen von Kennwörtern.

Das folgende Beispiel zeigt eine Anmeldeseite und Registrierungsseite mit einem benutzerdefinierten Logo, einem Hintergrundbild und der Ocean-Blue-Vorlage.

Von Azure AD B2C bereitgestellte Registrierungs-/Anmeldeseite mit Branding

Auswählen einer Seitenvorlage

Melden Sie sich beim Azure-Portal an.
Wenn Sie Zugriff auf mehrere Mandanten haben, wählen Sie das Symbol Einstellungen im Menü oben aus, um über das Menü Verzeichnisse + Abonnements zu Ihrem Azure AD B2C-Mandanten zu wechseln.
Suchen Sie im Azure-Portal nach Azure AD B2C, und wählen Sie diese Option dann aus.
Wählen Sie Benutzerflüsse aus.
Wählen Sie einen Benutzerfluss aus, den Sie anpassen möchten.
Wählen Sie unter "Anpassen" im linken Menü "Seitenlayouts " und dann eine Vorlage aus.

Wenn Sie eine Vorlage auswählen, wird die ausgewählte Vorlage auf alle Seiten im Benutzerablauf angewendet. Der URI für jede Seite ist im Feld " Benutzerdefinierte Seiten-URI " sichtbar.

Um eine Seitenvorlage auszuwählen, legen Sie das LoadUri Element der Inhaltsdefinitionen fest. Im folgenden Beispiel werden die Inhaltsdefinitions-IDs mit dem zugehörigen LoadUri-Element gezeigt.

Ozeanblau:

<ContentDefinitions>
  <ContentDefinition Id="api.error">
    <LoadUri>~/tenant/templates/AzureBlue/exception.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections">
    <LoadUri>~/tenant/templates/AzureBlue/idpSelector.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections.signup">
    <LoadUri>~/tenant/templates/AzureBlue/idpSelector.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.signuporsignin">
    <LoadUri>~/tenant/templates/AzureBlue/unified.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted">
    <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted.profileupdate">
    <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountsignup">
    <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountpasswordreset">
    <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.phonefactor">
    <LoadUri>~/tenant/templates/AzureBlue/multifactor-1.0.0.cshtml</LoadUri>
  </ContentDefinition>
</ContentDefinitions>

Schiefergrau:

<ContentDefinitions>
  <ContentDefinition Id="api.error">
    <LoadUri>~/tenant/templates/MSA/exception.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections">
    <LoadUri>~/tenant/templates/MSA/idpSelector.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections.signup">
    <LoadUri>~/tenant/templates/MSA/idpSelector.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.signuporsignin">
    <LoadUri>~/tenant/templates/MSA/unified.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted">
    <LoadUri>~/tenant/templates/MSA/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted.profileupdate">
    <LoadUri>~/tenant/templates/MSA/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountsignup">
    <LoadUri>~/tenant/templates/MSA/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountpasswordreset">
    <LoadUri>~/tenant/templates/MSA/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.phonefactor">
    <LoadUri>~/tenant/templates/MSA/multifactor-1.0.0.cshtml</LoadUri>
  </ContentDefinition>
</ContentDefinitions>

Klassisch:

<ContentDefinitions>
  <ContentDefinition Id="api.error">
    <LoadUri>~/tenant/default/exception.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections">
    <LoadUri>~/tenant/default/idpSelector.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections.signup">
    <LoadUri>~/tenant/default/idpSelector.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.signuporsignin">
    <LoadUri>~/tenant/default/unified.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted">
    <LoadUri>~/tenant/default/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted.profileupdate">
    <LoadUri>~/tenant/default/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountsignup">
    <LoadUri>~/tenant/default/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountpasswordreset">
    <LoadUri>~/tenant/default/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.phonefactor">
    <LoadUri>~/tenant/default/multifactor-1.0.0.cshtml</LoadUri>
  </ContentDefinition>
</ContentDefinitions>

Konfigurieren des Unternehmensbrandings

Um Ihre Benutzerflussseiten anzupassen, konfigurieren Sie zuerst das Unternehmensbranding in Microsoft Entra ID, und aktivieren sie dann in Ihren Benutzerflüssen in Azure AD B2C.

Legen Sie zunächst das Bannerlogo, das Hintergrundbild und die Hintergrundfarbe innerhalb des Unternehmensbrandings fest.

Melden Sie sich beim Azure-Portal an.
Wenn Sie Zugriff auf mehrere Mandanten haben, wählen Sie das Symbol Einstellungen im Menü oben aus, um über das Menü Verzeichnisse + Abonnements zu Ihrem Azure AD B2C-Mandanten zu wechseln.
Suchen Sie im Azure-Portal nach Azure AD B2C, und wählen Sie diese Option dann aus.
Wählen Sie unter Verwalten die Option Unternehmensbranding aus.
Führen Sie die Schritte unter Hinzufügen von Branding zur Microsoft Entra-Anmeldeseite Ihrer Organisation aus.

Beachten Sie diese Punkte beim Konfigurieren des Unternehmensbrandings in Azure AD B2C:

Das Unternehmensbranding in Azure AD B2C ist derzeit auf Die Anpassung von Hintergrundbildern, Bannerlogos und Hintergrundfarben beschränkt. Die anderen Eigenschaften im Unternehmensbrandingbereich, z. B. erweiterte Einstellungen, werden nicht unterstützt.
Auf Den Benutzerflussseiten wird die Hintergrundfarbe angezeigt, bevor das Hintergrundbild geladen wird. Es wird empfohlen, eine Hintergrundfarbe auszuwählen, die den Farben in Ihrem Hintergrundbild genau entspricht, um eine reibungslosere Ladeerfahrung zu erzielen.
Das Bannerlogo wird in den Überprüfungs-E-Mails angezeigt, die an Ihre Benutzer gesendet werden, wenn sie einen Benutzerablauf für die Registrierung initiieren.

Aktivieren des Unternehmensbrandings auf Benutzerflussseiten

Nachdem Sie das Unternehmensbranding konfiguriert haben, aktivieren Sie es in Ihren Benutzerflüssen.

Wählen Sie im linken Menü des Azure-Portals Azure AD B2C aus.
Wählen Sie unter "Richtlinien" die Option "Benutzerflüsse (Richtlinien)" aus.
Wählen Sie den Benutzerfluss aus, für den Sie das Unternehmensbranding aktivieren möchten. Das Unternehmensbranding wird für die standardmäßigen Benutzerflusstypen "Anmelden" und "Standardprofilbearbeitung"nicht unterstützt.
Wählen Sie unter "Anpassen" die Option "Seitenlayouts" aus, und wählen Sie dann die Seite aus, die Sie branding möchten. Wählen Sie z. B. "Unified-Registrierung" oder "Anmeldeseite" aus.
Wählen Sie für die Seitenlayoutversion (Vorschau) Version 1.2.0 oder höher aus.
Wählen Sie Speichern aus.

Wenn Sie alle Seiten im Benutzerflow mit Branding versehen möchten, legen Sie die Seitenlayoutversion für jedes Seitenlayout im Benutzerflow fest.

Seitenlayoutauswahl in Azure AD B2C im Azure-Portal.

Aktivieren des Unternehmensbrandings auf benutzerdefinierten Richtlinienseiten

Nachdem Sie das Unternehmensbranding konfiguriert haben, aktivieren Sie es in Ihrer benutzerdefinierten Richtlinie. Konfigurieren Sie die Seitenlayoutversion mit der contract-Version der Seite für alle Inhaltsdefinitionen in Ihrer benutzerdefinierten Richtlinie. Das Format des Werts muss das Wort „contract“ enthalten: urn:com:microsoft:aad:b2c:elements:contract:page-name:version. Um ein Seitenlayout in Ihren benutzerdefinierten Richtlinien festzulegen, die einen alten DataUri-Wert verwenden. Erfahren Sie, wie Sie mit der Seitenversion eine Migration zum Seitenlayout durchführen.

Das folgende Beispiel zeigt die Inhaltsdefinitionen mit dem entsprechenden Seitenvertrag und der Ocean Blue-Seitenvorlage:

<ContentDefinitions>
  <ContentDefinition Id="api.error">
    <LoadUri>~/tenant/templates/AzureBlue/exception.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:globalexception:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections">
    <LoadUri>~/tenant/templates/AzureBlue/idpSelector.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:providerselection:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections.signup">
    <LoadUri>~/tenant/templates/AzureBlue/idpSelector.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:providerselection:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.signuporsignin">
    <LoadUri>~/tenant/templates/AzureBlue/unified.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:unifiedssp:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted">
    <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted.profileupdate">
     <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountsignup">
     <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountpasswordreset">
     <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.phonefactor">
    <LoadUri>~/tenant/templates/AzureBlue/multifactor-1.0.0.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:multifactor:1.2.0</DataUri>
  </ContentDefinition>
</ContentDefinitions>

Führen Sie die folgenden Schritte aus, um die Eingabefelder auf der Registrierungsseite für das Formular für lokale Konten neu anzuordnen:

Melden Sie sich beim Azure-Portal an.
Wenn Sie Zugriff auf mehrere Mandanten haben, wählen Sie das Symbol Einstellungen im Menü oben aus, um über das Menü Verzeichnisse + Abonnements zu Ihrem Azure AD B2C-Mandanten zu wechseln.
Suchen Sie im Azure-Portal nach Azure AD B2C, und wählen Sie diese Option dann aus.
Wählen Sie im linken Menü "Benutzerflüsse" aus.
Wählen Sie einen Benutzerfluss (nur für lokale Konten) aus, den Sie die Eingabefelder neu anordnen möchten.
Wählen Sie im linken Menü "Seitenlayouts" aus.
Wählen Sie in der Tabelle die Zeile Anmeldeseite des lokalen Kontos aus.
Wählen Sie unter User attributes das Eingabefeld aus, das Sie neu anordnen möchten, und ziehen Sie es (nach oben oder unten) und lassen Sie es fallen oder verwenden Sie die Steuerelemente Nach oben verschieben oder Nach unten verschieben, um die gewünschte Reihenfolge zu erzielen.
Klicken Sie am oberen Rand der Seite auf Speichern.

Dropdownmenü zur Vorlagenauswahl auf der Seite des Benutzerflows im Azure-Portal

Weitere Informationen dazu, wie Sie die Benutzeroberfläche Ihrer Anwendungen anpassen können, finden Sie unter Anpassen der Benutzeroberfläche Ihrer Anwendung in Azure Active Directory B2C.