Zmienianie wyglądu strony logowania ADFS

Facebooktwitterpinterestlinkedinmail
Dotyczy wersji 2020.1.3 autor: Mateusz Syrek

Wprowadzenie

 

Jednym z możliwych do skonfigurowania dostawców autentykacji jest ADFS. Szczegóły rejestracji WEBCON BPS Portal w ADFS zostały opisane w artykule Integracja WEBCON BPS Portal z ADFS. W tym artykule skupimy się na wyglądzie strony logowania. W Windows Server 2019 Microsoft udostępnia domyślnie 2 tematy graficzne strony:

1.
Rysunek 1. Pierwszy motyw graficzny. W starszych wersjach Window Server to jedyny dostępny motyw graficzny.

 


Rysunek 2. Drugi motyw graficzny. Ten artykuł opisuję tę wersję strony logowania. Wygląda ona jak strona Azure Active Directory.

 

W starszych wersjach Windows Server Microsoft udostępnia tylko pierwszy temat graficzny.

W artykule zostanie opisany drugi wygląd strony logowania odzwierciedlający stronę Azure Active Directory, a w przypadku braku starszych wersji Windows Server napiszę skąd pobrać ten wygląd i jak go wgrać na serwer.

Konfiguracja w Windows Server 2019

Strona logowania ADFS podzielona jest na sekcje:
Rysunek 3 Sekcje na stronie logowania ADFS.

 

Każdą z sekcji można edytować za pomocą PowerShell, stylów CSS lub skryptów JavaScript

W pierwszej kolejności dobrze jest zrobić kopię domyślnego tematu graficznego, który będziemy dostosowywać do naszych potrzeb.

 

W PowerShell za pomocą polecenia:

New-AdfsWebTheme -Name DefaultAdfs2019 -SourceName MyADFSWebTheme

zostanie utworzona kopia tematu graficznego o nazwie MyADFSWebTheme.
Od razu można ją aktywować po to żeby na bieżąco mieć podgląd wprowadzanych zmian:

Set-AdfsWebConfig -ActiveThemeName MyADFSWebTheme

W jaki sposób na bieżąco monitorować wprowadzane zmiany bez aktywacji dostawcy autentykacji w BPS Studio?

Za pomocą polecenia:

Set-AdfsProperties -EnableIdPInitiatedSignonPage $true

włączona zostanie strona IdpInitiatedSignon, która pozwala m.in. na weryfikację instalacji ADFS.
Po włączeniu i wejściu na stronę https://<ADFS name>.<domain>/adfs/ls/idpinitiatedsignon.htm zostanie otwarta testowa strona logowania.

 

Można przystąpić do wprowadzania zmian. Żeby nie tworzyć od zera styli CSS i skryptów dobrze jest wyeksportować nasz temat graficzny.

W tym celu należy utworzyć na dysku pusty katalog np.: z taką samą nazwą oraz za pomocą polecenia:

Export-AdfsWebTheme -Name MyADFSWebTheme -DirectoryPath „C:\MyADFSWebTheme

wyeksportowane zostaną wszystkie grafiki, style, skrypty naszego tematu graficznego
Rysunek 4. Motyw graficzny pobrany na dysk twardy.

 

Można w tym miejscu podmienić pliki graficzne na własne.

Do podmiany grafiki, styli i skryptów w naszym temacie graficznym należy użyć PowerShell’a uruchomionego z uprawnieniami administratora i polecenia Set-AdfsWebTheme

Składnia polecenia jest taka, że w pierwszej kolejności należy wskazać nazwę tematu graficznego, następnie ścieżkę do podmienianego pliku.
Poniżej przykłady poleceń do podmiany podstawowych plików:

  • Illustration

Set-AdfsWebTheme -TargetName MyADFSWebTheme -Illustration @{path=”C:\ADFS_WebTheme\illustration\illustration.jpg„}

  • Logo

Set-AdfsWebTheme -TargetName MyADFSWebTheme -Logo @{path=”C:\ADFS_WebTheme\logo\logo.png„}

  • Style CSS

Set-AdfsWebTheme -TargetName MyADFSWebTheme -StyleSheet @{path=”C:\ADFS_WebTheme\css\style.css„}

  • JavaScript (uruchamiany podczas ładowania strony)

Set-AdfsWebTheme -TargetName MyADFSWebTheme -AdditionalFileResource @{Uri=’/adfs/portal/script/onload.js‚;path=”C:\ADFS_WebTheme\script\onload.js„}

Po wgraniu przygotowanych grafik, stylu CSS i skryptów, strona logowania ADFS jest odwzorowaniem strony logowania BPS Portal.


Rysunek 5. Twoja strona logowania ADFS będzie tak wyglądać jeśli użyjesz pobranego motywu graficznego bez żadnych zmian.

 

Zmiana hasła w ADFS

ADFS udostępnia również witrynę za pomocą której użytkownik może zmienić hasło. Domyślnie jest wyłączona. Należy ją aktywować w konsoli zarządzania ADFS.
Witryna jest pod adresem https://<ADFS name>.<domain>/adfs/portal/updatepassword/
Rysunek 6. Włączanie strony zmiany hasła (ADFS)

 

Po włączeniu witryny do zmiany hasła, domyślnie nie pojawi się adres kierujący do niej. Należy go skonfigurować.

 

W tym celu należy dodać do witryny logowania opis, który pojawi się pod przyciskiem Zaloguj. Można to zrobić za pomocą PowerShell’a uruchomionego z uprawnieniami administratora i polecenia
Set-AdfsGlobalWebContent

Na potrzeby artykułu dodam tylko opis strony logowania i opis strony do zmiany hasła:

  • Opis strony logowania

Set-AdfsGlobalWebContent -SignInPageDescriptionText „<p>Click <A href=’/adfs/portal/updatepassword/’>here</A> to change your password.</p>

  • Opis strony zmiany hasła

Set-AdfsGlobalWebContent -UpdatePasswordPageDescriptionText „Password must be at least 7 characters long.<br>The password must contain one character from at least three categories: lowercase letter, number, special character.

Po tych operacjach globalnie w całym kontencie ADFS zostanie ustawiony opis kierujący ze strony logowania na stronę zmiany i hasła oraz na stronie zmiany hasła zostanie ustawiony opis z wymaganiami.
Rysunek 7. Strona logowania ADFS, która odzwierciedla stronę logowania portalu WEBCON.

 

Strona logowania ADFS jest wielojęzyczna i rozszerzając polecenie Set-AdfsGlobalWebContent o lokalizacje PL, to użytkownikowi z polskim językiem przeglądarki zostanie wyświetlony inny opis (analogicznie dla innych języków), np.:

Set-AdfsGlobalWebContent -Locale „pl” -UpdatePasswordPageDescriptionText „Hasło musi zawierać co najmniej 7 znaków.<br>W haśle musi się znaleźć po jednym znaku z przynajmniej z trzech kategorii: mała litera, cyfra, znak specjalny.
Rysunek 8. Strona logowania ADFS wyświetla się w języku przeglądarki.

 

Azure AD UX Web Theme

W przypadku starszych wersji Windows Server i braku defaultowego wyglądu nic straconego. Należy udać się na stronę Microsoft Using an Azure AD UX Web Theme in Active Directory Federation Services i pobrać interesujący nas temat. Znajduje się tam link do repozytorium Github, z którego należy pobrać style CSS i JavaScript. Następnie wgrać pliki na serwer według instrukcji.
Rysunek 9

 

Dalsza część konfiguracji jest analogiczna jak w powyższym opisie.

Więcej informacji na temat dostosowywania wyglądu strony logowania ADFS można znaleźć m.in. na stronach Microsoftu:

https://docs.microsoft.com/en-us/windows-server/identity/ad-fs/operations/ad-fs-user-sign-in-customization
https://docs.microsoft.com/en-us/windows-server/identity/ad-fs/operations/ad-fs-paginated-sign-in