Verwenden eines Azure AD UX-Webdesigns in Active Directory-Verbunddienste (AD FS)

  • Artikel
  • 2 Minuten Lesedauer

Die AD FS-Formulare werden derzeit nicht mit der Azure/O365-Anmeldeumgebung gespiegelt. Um eine einheitlichere und nahtlose Benutzeroberfläche für Endbenutzer bereitzustellen, haben wir das folgende Cascading Stylesheet-Webdesign veröffentlicht, das auf Ihre AD FS-Server angewendet werden kann. Derzeit sieht die Anmeldung für Formulare für AD FS auf Windows Server 2016 wie folgt aus:

Current sign-in

Mit dem neuen Stylesheet sieht die Benutzeroberfläche mehr wie die Azure- und Office 365 Anmeldeerfahrung aus.

Herunterladen des CSS-Stylesheets

Sie können das Webdesign aus dem folgenden Github-Speicherort herunterladen.

Aktivieren des neuen Webdesigns

Verwenden Sie zum Aktivieren des neuen Webdesigns das folgende Verfahren:

So aktivieren Sie das neue Azure AD UX-Webdesign in AD FS

  1. Starten von PowerShell als Administrator
  2. Erstellen eines neuen Webdesigns mithilfe von PowerShell: New-AdfsWebTheme –Name custom –StyleSheet @{path="c:\NewTheme.css"}
  3. Legen Sie das neue Design als aktives Design mithilfe von PowerShell fest: Set-AdfsWebConfig -ActiveThemeName customPowerShell
  4. Testen Sie die Anmeldung, indem Sie https://< AD FS name.domain>/adfs/ls/idpinitiatedsignon.htm Sign-on

! [HINWEIS] Sie müssen sicherstellen, dass idpinitiatedsignon aktiviert wurde. Sie ist standardmäßig nicht aktiviert. Um idpinitiatedsignon zu aktivieren, verwenden Sie den folgenden PowerShell-Befehl: Set-AdfsProperties –EnableIdpInitiatedSignonPage $True

Bild Empfehlungen

Durch Aktivieren der zentrierten Benutzeroberfläche können Sie die gleichen Bilder für Hintergrund und Logo verwenden, die Sie möglicherweise bereits für Azure Active Directory Unternehmensbranding haben. Im Allgemeinen gelten die gleichen Empfehlungen für Größe, Verhältnis und Format.

BESCHREIBUNG Einschränkungen Empfehlungen
Das Logo wird oben im Anmeldebereich angezeigt. Transparente JPG- oder PNG-Datei
Max. Höhe: 36 px
Max. Breite: 245 px		 Verwenden Sie hier das Logo Ihrer Organisation.
Verwenden Sie ein transparentes Bild. Gehen Sie nicht davon aus, dass der Hintergrund weiß ist.
Fügen Sie keinen Abstand um Ihr Logo herum in der Abbildung ein, da Ihr Logo anderenfalls unverhältnismäßig klein aussehen wird.

Hintergrund

BESCHREIBUNG Einschränkungen Empfehlungen
Diese Option wird im Hintergrund der Anmeldeseite angezeigt, ist in der Mitte des sichtbaren Bereichs verankert und wird so skaliert und zugeschnitten, dass das gesamte Browserfenster ausgefüllt ist.
Auf schmalen Bildschirmen, z.B. von Mobiltelefonen, wird dieses Bild nicht angezeigt.
Beim Laden der Seite wird eine schwarze Maske mit einer Deckkraft von 0,55 auf dieses Bild angewendet.		 JPG oder PNG
Bildmaße: 1.920 x 1.080 px
Dateigröße: < 300 KB
Verwenden Sie Bilder, in denen die Bildschärfe sich nicht auf einen Bereich konzentriert. Das nicht transparente Anmeldeformular wird über dem Mittelpunkt dieses Bilds angezeigt und kann abhängig von der Größe des Browserfensters einen beliebigen Teil des Bilds einnehmen.
Verwenden Sie keine große Datei, um kurze Ladezeiten zu gewährleisten.

Nächste Schritte