Freigeben über

Anpassen der Benutzeroberfläche mit HTML-Vorlagen in Azure Active Directory B2C

Von Bedeutung

Ab dem 1. Mai 2025 steht Azure AD B2C nicht mehr zum Kauf 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, um zu definieren, wie Benutzer mit Ihren Anwendungen interagieren: über vordefinierte Benutzerflüsse oder durch vollständig konfigurierbare custom policies. Die Schritte, die in diesem Artikel erforderlich sind, unterscheiden sich für jede Methode.

Durch das Branding und die Anpassung der Benutzeroberfläche, die Azure Active Directory B2C (Azure AD B2C) Ihren Kunden anzeigt, wird ein nahtloses Benutzererlebnis in Ihrer Anwendung unterstützt. Diese Erfahrungen umfassen die Registrierung, Anmeldung, Profilbearbeitung und Kennwortzurücksetzung. In diesem Artikel werden die Methoden zur Anpassung der Benutzeroberfläche vorgestellt.

Tipp

Wenn Sie nur das Bannerlogo, das Hintergrundbild und die Hintergrundfarbe auf Ihren Benutzerflussseiten ändern möchten, können Sie die Branding-Funktion für Unternehmen ausprobieren.

Übersicht über benutzerdefiniertes HTML und CSS

Azure AD B2C führt Code im Browser Ihres Kunden mithilfe von Cross-Origin Resource Sharing (CORS) aus. Zur Laufzeit wird der Inhalt von einer URL geladen, die Sie in Ihrem Benutzerflow oder Ihrer benutzerdefinierten Richtlinie angeben. Jede Seite in der Benutzeroberfläche lädt ihren Inhalt von der URL, die Sie für diese Seite angeben. Nachdem Der Inhalt von Ihrer URL geladen wurde, wird es mit einem HTML-Fragment zusammengeführt, das von Azure AD B2C eingefügt wurde, und dann wird die Seite für Ihren Kunden angezeigt.

Benutzerdefinierter Seiteninhaltsrand

Benutzerdefinierter HTML-Seiteninhalt

Erstellen Sie eine HTML-Seite mit Ihrem eigenen Branding, um Ihren benutzerdefinierten Seiteninhalt bereitzustellen. Diese Seite kann eine statische *.html-Seite oder eine dynamische Seite wie .NET, Node.jsoder PHP sein. Azure B2C unterstützt jedoch keine Ansichtsmodule. Jedes serverseitige Rendern der dynamischen Seite muss von einer dedizierten Webanwendung ausgeführt werden.

Ihr benutzerdefinierter Seiteninhalt kann beliebige HTML-Elemente enthalten, einschließlich CSS und JavaScript, aber keine unsicheren Elemente wie iframes. Das einzige erforderliche Element ist ein div-Element, das auf api festgelegt ist, z. B. dieses <div id="api"></div> Element auf Ihrer HTML-Seite.

<!DOCTYPE html>
<html>
<head>
    <title>My Product Brand Name</title>
</head>
<body>
    <div id="api"></div>
</body>
</html>

Anpassen der Standardseiten Azure AD B2C

Anstatt Ihren benutzerdefinierten Seiteninhalt von Grund auf zu erstellen, können Sie den Standardseiteninhalt von Azure AD B2C anpassen.

In der folgenden Tabelle sind die Standardseiteninhalte aufgeführt, die von Azure AD B2C bereitgestellt werden. Laden Sie die Dateien herunter und verwenden Sie sie als Ausgangspunkt für die Erstellung Ihrer eigenen benutzerdefinierten Seiten. Sehen Sie sich Beispielvorlagen an, um zu erfahren, wie Sie die Beispielvorlagen herunterladen und verwenden können.

Seite BESCHREIBUNG Schablonen
Einheitliche Registrierung oder Anmeldung Auf dieser Seite wird der Registrierungs- und Anmeldevorgang für Benutzer behandelt. Benutzer können Unternehmensidentitätsanbieter, Identitätsanbieter für soziale Netzwerke wie Facebook, Microsoft-Konto oder lokale Konten verwenden. Classic, Ocean Blue und Slate Gray.
Anmeldung (nur) Die Anmeldeseite wird auch als Identitätsanbieterauswahl bezeichnet. Es verarbeitet die Benutzeranmeldung mit lokalen Konten oder Verbundidentitätsanbietern. Auf dieser Seite können Sie sich anmelden, ohne dass eine Registrierung möglich ist. Zum Beispiel, bevor der Benutzer sein Profil bearbeiten kann. Classic, Ocean Blue und Slate Gray.
Selbstdeklariert Die meisten Interaktionen in Azure AD B2C, bei denen vom Benutzer eine Eingabe erwartet wird, sind selbstbestätigt. Zum Beispiel eine Registrierungsseite, eine Anmeldeseite oder eine Seite zum Zurücksetzen des Kennworts. Verwenden Sie diese Vorlage als benutzerdefinierten Seiteninhalt für eine Anmeldeseite für ein Social-Media-Konto, eine Anmeldeseite für ein lokales Konto, eine Anmeldeseite für ein lokales Konto, das Zurücksetzen des Passworts, das Bearbeiten eines Profils, eine Blockierungsseite und vieles mehr. Die selbstbestätigte Seite kann verschiedene Eingabesteuerelemente enthalten, wie z. B. ein Texteingabefeld, ein Kennworteingabefeld, ein Optionsfeld, Dropdown-Menüs für die Einzelauswahl und Kontrollkästchen für die Mehrfachauswahl. Classic, Ocean Blue und Slate Gray.
Mehrstufige Authentifizierung Auf dieser Seite können Benutzer ihre Telefonnummern (per Text oder Sprache) während der Registrierung oder Anmeldung bestätigen. Classic, Ocean Blue und Slate Gray.
Fehler Diese Seite wird angezeigt, wenn eine Ausnahme oder ein Fehler auftritt. Classic, Ocean Blue und Slate Gray.

Hosten des Seiteninhalts

Wenn Sie Ihre eigenen HTML- und CSS-Dateien zum Anpassen der Benutzeroberfläche verwenden, hosten Sie Ihre Benutzeroberflächeninhalte auf einem öffentlich verfügbaren HTTPS-Endpunkt, der CORS unterstützt. Beispielsweise Azure Blob Storage, Azure App Services, Webserver, CDNs, AWS S3 oder Dateifreigabesysteme.

Richtlinien für die Verwendung von benutzerdefinierten Seiteninhalten

  • Verwenden Sie eine absolute URL, wenn Sie externe Ressourcen wie Medien-, CSS- und JavaScript-Dateien in Ihre HTML-Datei einschließen.

  • Mithilfe der Seitenlayoutversion 1.2.0 und höher können Sie das data-preload="true" Attribut in Ihren HTML-Tags hinzufügen, um die Ladereihenfolge für CSS und JavaScript zu steuern. Mit data-preload="true", die Seite wird erstellt, bevor sie dem Benutzer angezeigt wird. Dieses Attribut hilft dabei, ein "Flackern" der Seite zu verhindern, indem die CSS-Datei vorab geladen wird, ohne dass dem Benutzer der nicht formatierte HTML-Code angezeigt wird. Der folgende HTML-Codeausschnitt zeigt die Verwendung des data-preload Tags.

    <link href="https://path-to-your-file/sample.css" rel="stylesheet" type="text/css" data-preload="true"/>

  • Es wird empfohlen, mit dem Standardseiteninhalt zu beginnen und darauf aufzubauen.

  • Sie können JavaScript in Ihren benutzerdefinierten Inhalt einschließen.

  • Unterstützte Browserversionen sind:

    • Internet Explorer 11, 10 und Microsoft Edge
    • Eingeschränkte Unterstützung für Internet Explorer 9 und 8
    • Google Chrome 42.0 und höher
    • Mozilla Firefox 38.0 und höher
    • Safari für iOS und macOS, Version 12 und höher

  • Aufgrund von Sicherheitsbeschränkungen unterstützt Azure AD B2C frame, iframe oder form HTML-Elemente nicht.

Lokalisieren von Inhalten

Sie lokalisieren Ihren HTML-Inhalt, indem Sie Languageanpassung in Ihrem Azure AD B2C-Mandanten aktivieren. Durch aktivieren dieses Feature können Azure AD B2C das HTML-Seitensprache-Attribut festlegen und den OpenID Connect-Parameter ui_locales an Ihren Endpunkt übergeben.

Single-Template-Ansatz

Beim Laden der Seite legt Azure AD B2C das HTML-Seitensprachen-Attribut mit der aktuellen Sprache fest. Beispiel: <html lang="en">. Um unterschiedliche Stile für die aktuelle Sprache zu rendern, verwenden Sie den CSS-Selektor :lang zusammen mit Ihrer CSS-Definition.

Im folgenden Beispiel werden die folgenden Klassen definiert:

  • imprint-en - Wird verwendet, wenn die aktuelle Sprache Englisch ist.
  • imprint-de - Wird verwendet, wenn die aktuelle Sprache Deutsch ist.
  • imprint - Standardklasse, die verwendet wird, wenn die aktuelle Sprache nicht Englisch oder Deutsch ist.
.imprint-en:lang(en),
.imprint-de:lang(de) {
    display: inherit !important;
}
.imprint {
    display: none;
}

Folgende HTML-Elemente werden entsprechend der Seitensprache angezeigt:

<a class="imprint imprint-en" href="Link EN">Imprint</a>
<a class="imprint imprint-de" href="Link DE">Impressum</a>

Multi-Template-Ansatz

Das Sprachanpassungsfeature ermöglicht Azure AD B2C, den OpenID Connect-Parameter ui_locales an Ihren Endpunkt zu übergeben. Ihr Content-Server kann diesen Parameter verwenden, um sprachspezifische HTML-Seiten bereitzustellen.

Hinweis

Azure AD B2C übergibt keine OpenID Connect-Parameter wie ui_locales an die Ausnahmeseiten.

Inhalte können je nach verwendetem Gebietsschema von verschiedenen Stellen abgerufen werden. In Ihrem CORS-aktivierten Endpunkt richten Sie eine Ordnerstruktur ein, um Inhalte für bestimmte Sprachen zu hosten. Sie rufen die richtige auf, wenn Sie den Wildcardwert {Culture:RFC5646}verwenden.

Der benutzerdefinierte Seiten-URI könnte z. B. wie folgt aussehen:

https://contoso.blob.core.windows.net/{Culture:RFC5646}/myHTML/unified.html

Sie können die Seite auf Französisch laden, indem Sie Inhalte aus folgenden Quellen abrufen:

https://contoso.blob.core.windows.net/fr/myHTML/unified.html

Schritt-für-Schritt-Anleitung für benutzerdefinierte Seiteninhalte

Übersicht über den Prozess:

  1. Bereiten Sie einen Speicherort zum Hosten Ihrer benutzerdefinierten Seiteninhalte vor (einen öffentlich zugänglichen, CORS-fähigen HTTPS-Endpunkt).
  2. Laden Sie eine Standardseiteninhaltsdatei herunter, und passen Sie sie an, z. B unified.html. .
  3. Veröffentlichen Sie Ihren benutzerdefinierten Seiteninhalt an Ihrem öffentlich zugänglichen HTTPS-Endpunkt.
  4. Legen Sie Cross-Origin Resource Sharing (CORS) für Ihre Web-App fest.
  5. Verweisen Sie Ihre Richtlinie auf Ihren benutzerdefinierten Richtlinieninhalts-URI.

Voraussetzungen

1. Erstellen Sie Ihre HTML-Inhalte

Erstellen Sie einen benutzerdefinierten Seiteninhalt mit dem Markennamen Ihres Produkts im Titel.

  1. Kopieren Sie den folgenden HTML-Codeausschnitt. Es ist wohlgeformte HTML5 mit einem leeren Element namens <div id="api"></div> , das sich innerhalb der <Body-Tags> befindet. Dieses Element gibt an, wo Azure AD B2C-Inhalt eingefügt werden soll.

    <!DOCTYPE html>
<html>
<head>
    <title>My Product Brand Name</title>
</head>
<body>
    <div id="api"></div>
</body>
</html>

  2. Fügen Sie das kopierte Snippet in einen Texteditor ein

  3. Verwenden Sie CSS, um die UI-Elemente zu gestalten, die Azure AD B2C in Ihre Seite einfügt. Das folgende Beispiel zeigt eine einfache CSS-Datei, die auch Einstellungen für die bei der Registrierung eingefügten HTML-Elemente enthält:

    h1 {
  color: blue;
  text-align: center;
}
.intro h2 {
  text-align: center;
}
.entry {
  width: 400px ;
  margin-left: auto ;
  margin-right: auto ;
}
.divider h2 {
  text-align: center;
}
.create {
  width: 400px ;
  margin-left: auto ;
  margin-right: auto ;
}

  4. Speichern Sie die Datei als customize-ui.html.

Hinweis

HTML-Formularelemente werden aufgrund von Sicherheitseinschränkungen entfernt, wenn Sie login.microsoftonline.com verwenden. Wenn Sie HTML-Formularelemente in Ihren benutzerdefinierten HTML-Inhalten verwenden möchten, verwenden Sie b2clogin.com.

2. Erstellen eines Azure Blob-Speicherkontos

In diesem Artikel verwenden wir Azure BLOB-Speicher, um unsere Inhalte zu hosten. Sie können ihre Inhalte auf einem Webserver hosten, aber Sie müssen CORS auf Ihrem Webserver aktivieren.

Hinweis

In einem Azure AD B2C-Mandant können Sie BLOB-Speicher nicht bereitstellen. Sie müssen diese Ressource in Ihrem Microsoft Entra Mandanten erstellen.

Führen Sie die folgenden Schritte aus, um Ihre HTML-Inhalte in Blob Storage zu hosten:

  1. Melden Sie sich beim portal Azure an.
  2. Wenn Sie Zugriff auf mehrere Mandanten haben, wählen Sie im oberen Menü das Symbol Settings aus, um über das Menü Verzeichnisse + Abonnements zu Ihrem Microsoft Entra ID Mandanten zu wechseln.
  3. Suchen Sie im Azure-Portal nach Storage-Konten
  4. Wählen Sie + Erstellen aus.
  5. Wählen Sie ein Abonnement für Ihr Speicherkonto aus.
  6. Erstellen Sie eine Ressourcengruppe , oder wählen Sie eine vorhandene Gruppe aus.
  7. Geben Sie einen eindeutigen Speicherkontonamen für Ihr Speicherkonto ein.
  8. Wählen Sie die geografische Region für Ihr Speicherkonto aus.
  9. Die Leistung kann standard bleiben.
  10. Redundanz kann in georedundantem Speicher (GRS) bestehen bleiben
  11. Wählen Sie Review + create aus, und warten Sie einige Sekunden, bis Microsoft Entra ID eine Überprüfung ausgeführt hat.
  12. Wählen Sie "Erstellen" aus, um das Speicherkonto zu erstellen. Nach Abschluss der Bereitstellung wird die Speicherkontoseite automatisch geöffnet, oder Sie müssen "Zur Ressource wechseln" auswählen.

2.1 Erstellen eines Containers

Führen Sie die folgenden Schritte aus, um einen öffentlichen Container in Blob Storage zu erstellen:

  1. Wählen Sie unter "Einstellungen" im menü ganz links die Option "Konfiguration" aus.
  2. Aktivieren Sie "Berechtigungen für anonymen Blob-Zugriff zulassen".
  3. Wählen Sie Speichern aus.
  4. Wählen Sie unter "Datenspeicher " im linken Menü "Container" aus.
  5. Wählen Sie + Container aus.
  6. Geben Sie für Nameroot ein. Der Name kann ein Name Ihrer Wahl sein, z. B. "contoso", aber wir verwenden in diesem Beispiel den Stamm zur Einfachheit.
  7. Wählen Sie "Blob" für die Öffentliche Zugriffsebene aus. Wenn Sie die Blob-Option auswählen, erlauben Sie einen anonymen öffentlichen schreibgeschützten Zugriff für diesen Container.
  8. Klicken Sie auf Erstellen, um den Container zu erstellen.
  9. Wählen Sie den Stamm aus, um den neuen Container zu öffnen.

2.2 Hochladen Ihrer benutzerdefinierten Seiteninhaltsdateien

  1. Wählen Sie die Option Hochladen.
  2. Wählen Sie das Ordnersymbol neben "Datei auswählen" aus.
  3. Navigieren Sie zu customize-ui.html, die Sie zuvor im Abschnitt "Anpassung der Seitenbenutzeroberfläche" erstellt haben, und wählen Sie sie aus.
  4. Wenn Sie in einen Unterordner hochladen möchten, erweitern Sie "Erweitert" , und geben Sie einen Ordnernamen in "In Ordner hochladen" ein.
  5. Wählen Sie die Option Hochladen.
  6. Wählen Sie das customize-ui.html Blob aus, das Sie hochgeladen haben.
  7. Wählen Sie rechts neben dem Textfeld " URL " das Symbol " In Zwischenablage kopieren " aus, um die URL in die Zwischenablage zu kopieren.
  8. Navigieren Sie im Webbrowser zu der URL, die Sie kopiert haben, um zu überprüfen, ob auf das hochgeladene Blob zugegriffen werden kann. Wenn auf sie nicht zugegriffen werden kann, z. B. wenn ein ResourceNotFound Fehler auftritt, stellen Sie sicher, dass der Containerzugriffstyp auf blob festgelegt ist.

3. CORS konfigurieren

Konfigurieren Sie Blob-Speicher für Cross-Origin Resource Sharing (CORS), indem Sie diese Schritte befolgen:

  1. Navigieren Sie zum Speicherkonto.
  2. Wählen Sie im linken Menü unter "Einstellungen" die Option "Ressourcenfreigabe ( CORS)" aus.
  3. Geben Sie für zulässige Ursprünge ein https://your-tenant-name.b2clogin.com. Ersetzen Sie your-tenant-name durch den Namen Ihres Azure AD B2C-Mandanten. Beispiel: https://fabrikam.b2clogin.com. Verwenden Sie beim Eingeben des Mandantennamens alle Kleinbuchstaben.
  4. Wählen Sie für zulässige Methoden beide GET und OPTIONS.
  5. Geben Sie für zulässige Kopfzeilen ein Sternchen (*) ein.
  6. Geben Sie für verfügbar gemachte Kopfzeilen ein Sternchen (*) ein.
  7. Geben Sie für max. Alter 200 ein.
  8. Klicken Sie am oberen Rand der Seite auf Speichern.

3.1 CORS testen

Überprüfen Sie, ob Sie bereit sind, indem Sie die folgenden Schritte ausführen:

  1. Wiederholen Sie den Schritt CORS konfigurieren. Geben Sie für Zulässige Ursprüngehttps://www.test-cors.org
  2. Navigieren sie zu www.test-cors.org
  3. Fügen Sie für das Feld "Remote-URL " die URL der HTML-Datei ein. Beispiel: https://your-account.blob.core.windows.net/root/azure-ad-b2c/unified.html
  4. Wählen Sie Anforderung senden aus. Das Ergebnis sollte sein XHR status: 200. Wenn Sie eine Fehlermeldung erhalten, stellen Sie sicher, dass Ihre CORS-Einstellungen korrekt sind. Möglicherweise müssen Sie auch den Browsercache leeren oder eine private Browsersitzung öffnen, indem Sie STRG+UMSCHALT+P drücken.

Erfahren Sie mehr über how to create and manage Azure storage accounts.

4. Aktualisieren des Benutzerflows

  1. Wenn Sie Zugriff auf mehrere Mandanten haben, wählen Sie im oberen Menü das Symbol Settings aus, um über das Menü Verzeichnisse + Abonnements zu Ihrem Azure AD B2C-Mandanten zu wechseln.
  2. Suchen Sie im Azure Portal nach Azure AD B2C.
  3. Wählen Sie im linken Menü "Benutzerflüsse" aus, und wählen Sie dann den B2C_1_signupsignin1 Benutzerablauf aus.
  4. Wählen Sie "Seitenlayouts" aus, und wählen Sie dann unter " Einheitliche Registrierung" oder "Anmeldeseite" "Ja " aus, um benutzerdefinierte Seiteninhalte zu verwenden.
  5. Geben Sie in benutzerdefinierten Seiten-URI den URI für die zuvor aufgezeichnete custom-ui.html Datei ein.
  6. Klicken Sie am oberen Rand der Seite auf Speichern.

5. Testen des Benutzerflows

  1. Wählen Sie in Ihrem Azure AD B2C-Mandanten Benutzerflüsse aus, und wählen Sie den Benutzerfluss B2C_1_signupsignin1 aus.
  2. Wählen Sie oben auf der Seite " Benutzerablauf ausführen" aus.
  3. Wählen Sie im Bereich auf der rechten Seite die Schaltfläche " Benutzerfluss ausführen " aus.

Es sollte eine Seite ähnlich dem folgenden Beispiel angezeigt werden, auf der die Elemente basierend auf der CSS-Datei zentriert sind, die Sie erstellt haben:

Webbrowser mit Anmelde- oder Anmeldeseite mit benutzerdefinierten UI-Elementen

4. Ändern Sie die Erweiterungsdatei

Kopieren Sie zum Konfigurieren der Benutzeroberflächenanpassung die ContentDefinition und die untergeordneten Elemente aus der Basisdatei in die Erweiterungsdatei:

  1. Öffnen Sie die Basisdatei Ihrer Richtlinie. Beispiel: SocialAndLocalAccounts/TrustFrameworkBase.xml. Diese Basisdatei ist eine der Richtliniendateien, die im benutzerdefinierten Richtlinienstartpaket enthalten sind, das Sie in der Voraussetzung erhalten haben sollten, erste Schritte mit benutzerdefinierten Richtlinien.

  2. Suchen und kopieren Sie den gesamten Inhalt des ContentDefinitions-Elements .

  3. Öffnen Sie die Erweiterungsdatei. Beispiel: TrustFrameworkExtensions.xml. Suchen Sie nach dem BuildingBlocks-Element . Wenn das Element nicht vorhanden ist, fügen Sie es hinzu.

  4. Fügen Sie den gesamten Inhalt des ContentDefinitions-Elements ein, das Sie als untergeordnetes Element des BuildingBlocks-Elements kopiert haben .

  5. Suchen Sie nach dem ContentDefinition-Element , das in dem xml-Code enthalten Id="api.signuporsignin" ist, den Sie kopiert haben.

  6. Ändern Sie den Wert von LoadUri in die URL der HTML-Datei, die Sie in den Speicher hochgeladen haben. Beispiel: https://your-storage-account.blob.core.windows.net/your-container/customize-ui.html.

    Ihre benutzerdefinierte Richtlinie sollte wie der folgende Codeausschnitt aussehen:

    <BuildingBlocks>
  <ContentDefinitions>
    <ContentDefinition Id="api.signuporsignin">
      <LoadUri>https://your-storage-account.blob.core.windows.net/your-container/customize-ui.html</LoadUri>
      <RecoveryUri>~/common/default_page_error.html</RecoveryUri>
      <DataUri>urn:com:microsoft:aad:b2c:elements:unifiedssp:1.0.0</DataUri>
      <Metadata>
        <Item Key="DisplayName">Signin and Signup</Item>
      </Metadata>
    </ContentDefinition>
  </ContentDefinitions>
</BuildingBlocks>

  7. Speichern Sie die Erweiterungsdatei.

  8. Aktivieren von JavaScript

5. Laden Sie Ihre aktualisierte benutzerdefinierte Richtlinie hoch und testen Sie sie.

5.1 Hochladen der benutzerdefinierten Richtlinie

  1. Wenn Sie Zugriff auf mehrere Mandanten haben, wählen Sie im oberen Menü das Symbol Settings aus, um über das Menü Verzeichnisse + Abonnements zu Ihrem Azure AD B2C-Mandanten zu wechseln.
  2. Suchen und wählen Sie Azure AD B2C aus.
  3. Wählen Sie unter "Richtlinien" die Option "Identity Experience Framework" aus.
  4. Wählen Sie "Benutzerdefinierte Richtlinie hochladen" aus.
  5. Laden Sie die Erweiterungsdatei hoch, die Sie zuvor geändert haben.

5.2 Testen der benutzerdefinierten Richtlinie mithilfe von "Jetzt ausführen"

  1. Wählen Sie die Richtlinie aus, die Sie hochgeladen haben, und wählen Sie dann "Jetzt ausführen" aus.
  2. Sie sollten sich mit einer E-Mail-Adresse anmelden können.

Konfigurieren eines dynamischen benutzerdefinierten Seiteninhalts-URI

Mithilfe von Azure AD B2C benutzerdefinierte Richtlinien können Sie einen Parameter im URL-Pfad oder einen Abfrage-String senden. Durch Übergeben des Parameters an Ihren HTML-Endpunkt können Sie den Seiteninhalt dynamisch ändern. Sie können z. B. das Hintergrundbild auf der Azure AD B2C-Anmelde- oder Anmeldeseite basierend auf einem Parameter ändern, den Sie von Ihrer Web- oder mobilen Anwendung übergeben. Der Parameter kann ein beliebiger Claim-Resolver sein, wie z. B. die Anwendungs-ID, Sprach-ID oder ein benutzerdefinierter Abfragezeichenfolgenparameter, wie campaignId.

Senden von Abfragezeichenfolgenparametern

Um Parameter für die Abfragezeichenfolge zu senden, fügen Sie in der Richtlinie der vertrauenden Seite ein ContentDefinitionParameters-Element hinzu, wie unten gezeigt.

<RelyingParty>
    <DefaultUserJourney ReferenceId="SignUpOrSignIn" />
    <UserJourneyBehaviors>
    <ContentDefinitionParameters>
        <Parameter Name="campaignId">{OAUTH-KV:campaignId}</Parameter>
        <Parameter Name="lang">{Culture:LanguageName}</Parameter>
        <Parameter Name="appId">{OIDC:ClientId}</Parameter>
    </ContentDefinitionParameters>
    </UserJourneyBehaviors>
    ...
</RelyingParty>

Ändern Sie in Der Inhaltsdefinition den Wert von LoadUri "in https://<app_name>.azurewebsites.net/home/unified". Ihre benutzerdefinierte Richtlinie ContentDefinition sollte wie der folgende Codeausschnitt aussehen:

<ContentDefinition Id="api.signuporsignin">
  <LoadUri>https://<app_name>.azurewebsites.net/home/unified</LoadUri>
  ...
</ContentDefinition>

Wenn Azure AD B2C die Seite lädt, ruft sie ihren Webserverendpunkt auf:

https://<app_name>.azurewebsites.net/home/unified?campaignId=123&lang=fr&appId=00001111-aaaa-2222-bbbb-3333cccc4444

URI für dynamischen Seiteninhalt

Inhalte können basierend auf den verwendeten Parametern von verschiedenen Stellen abgerufen werden. Richten Sie in Ihrem CORS-aktivierten Endpunkt eine Ordnerstruktur zum Hosten von Inhalten ein. Sie können den Inhalt beispielsweise in der folgenden Struktur organisieren. Stammordner/Ordner pro Sprache/Ihre HTML-Dateien. Der benutzerdefinierte Seiten-URI könnte z. B. wie folgt aussehen:

<ContentDefinition Id="api.signuporsignin">
  <LoadUri>https://contoso.blob.core.windows.net/{Culture:LanguageName}/myHTML/unified.html</LoadUri>
  ...
</ContentDefinition>

Azure AD B2C sendet den iso-Code aus zwei Buchstaben für die Sprache, fr für Französisch:

https://contoso.blob.core.windows.net/fr/myHTML/unified.html

Beispielvorlagen

Beispielvorlagen für die Anpassung der Benutzeroberfläche finden Sie hier:

git clone https://github.com/azure-ad-b2c/html-templates

Dieses Projekt enthält die folgenden Vorlagen:

Um das Beispiel zu verwenden:

  1. Klonen Sie das Repository auf Ihrem lokalen Computer. Wählen Sie einen Vorlagenordner /AzureBlue, /MSAoder /classic.

  2. Laden Sie alle Dateien unter dem Vorlagenordner und den /src Ordner in Blob Storage hoch, wie in den vorherigen Abschnitten beschrieben.

  3. Öffnen Sie als Nächstes jede \*.html Datei im Vorlagenordner. Ersetzen Sie dann alle Instanzen von https://login.microsoftonline.com URLs durch die URL, die Sie in Schritt 2 hochgeladen haben. Beispiel:

    Von:

    https://login.microsoftonline.com/templates/src/fonts/segoeui.WOFF

    Nach:

    https://your-storage-account.blob.core.windows.net/your-container/templates/src/fonts/segoeui.WOFF

  4. Speichern Sie die \*.html Dateien, und laden Sie sie in den Blob-Speicher hoch.

  5. Ändern Sie nun die Richtlinie, indem Sie auf Ihre HTML-Datei verweisen, wie bereits erwähnt.

  6. Wenn fehlende Schriftarten, Bilder oder CSS angezeigt werden, überprüfen Sie Ihre Verweise in der Erweiterungsrichtlinie und den \*.html Dateien.

Bootstrap-Abhängigkeit in Beispielvorlagen

Die Beispielvorlagen verwenden Bootstrap 3.3.5, das aus dem offiziellen Bootstrap CDN stammt. Diese Version wurde mit Azure AD B2C überprüft und getestet.

Die Vorlagen verweisen auf die folgende CDN-URL für Bootstrap-CSS:

https://cdn.jsdelivr.net/npm/bootstrap@3.3.5/dist/css/bootstrap.min.css

Die Standardkonfiguration in den HTML-Vorlagendateien enthält ein Linkelement, das dem folgenden Beispiel ähnelt:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.5/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

Die offiziellen Bootstrap 3.3.5-Download- und CDN-Details finden Sie unter Bootstrap 3.3 Getting Started.

Ersetzen des CDN-Verweises

Sie können den CDN-Verweis durch das interne CDN Ihrer Organisation oder eine lokal gehostete Kopie ersetzen, um Zuverlässigkeits-, Sicherheits- oder Complianceanforderungen zu erfüllen.

Von Bedeutung

Die Vorlagen werden speziell für Bootstrap 3.3.5 überprüft. Beim Upgrade, Downgrading oder anderweitigen Ändern der Bootstrap-Version können Formatierungs-, Layout- oder Komponentenkompatibilitätsprobleme auftreten.

Wenn Sie die Bootstrap-Version ändern, sind Sie dafür verantwortlich, Regressionstests abzuschließen, um zu überprüfen, ob Ihre angepassten Vorlagen mit Azure AD B2C ordnungsgemäß funktionieren. Behalten Sie die überprüfte Version bei, es sei denn, Sie haben geeignete Tests abgeschlossen.

Verwenden von Unternehmensbranding-Assets in benutzerdefiniertem HTML

Um Unternehmensbrandingobjekte in einem benutzerdefinierten HTML-Code zu verwenden, fügen Sie die folgenden Tags außerhalb des <div id="api"> Tags hinzu. Die Bildquelle wird durch die des Hintergrundbildes und des Bannerlogos ersetzt.

<img data-tenant-branding-background="true" />
<img data-tenant-branding-logo="true" alt="Company Logo" />

Verwandte Inhalte

Erfahren Sie, wie Sie clientseitigen JavaScript-Code aktivieren.

  • Last updated on