[AD FS]ログイン画面をAzure ADの新UIライクにカスタマイズする

こんにちは、富士榮です。

Azure Active Directoryのサインイン画面が新しいUIに変わったのに、AD FSはいつまでも昔のままというのは微妙だよね、ということでAD FSのログインUIをAzure ADに合わせるカスタムCSSが公開されています。

Using an Azure AD UX Web Theme in Active Directory Federation Services
https://docs.microsoft.com/en-us/windows-server/identity/ad-fs/operations/azure-ux-web-theme-in-ad-fs

早速試した先人のblog
https://msfreaks.wordpress.com/2017/11/19/adfs-new-sign-in-experience-added/

このドキュメントに従いgithubよりCSSをダウンロードし、AD FSのカスタムテーマを設定してみたいと思います。（Windows Server 2016のAD FS用、とありますが、2012R2でもちゃんと動いています。他のバージョンは試してませんが）

まずは旧UIです。お馴染みですね。

ちなみに、bingの画像をとってきて自動的にログイン画面の背景に使う、というスクリプトが公開されているので、こちらを使っています。

Automated Bing Wallpaper for ADFS 3.0 Themes
https://gallery.technet.microsoft.com/Automated-Bing-Wallpaper-c34136eb

先の手順に従ってカスタムテーマを設定していきます。
まずは、DefaultテーマのExportを行います。ちなみにこの手順が先のサイトでは省略されているのですが、必ず必要なので実施をしてください。この手順を飛ばすとonLoad.jsがないので背景が設定されません。

Export-AdfsWebTheme -Name Default -DirectoryPath C:\Style\default

次に、カスタムテーマを作成します。
必要なCSSや画像がダウンロード済みなことを確認し、以下を実行します。

New-AdfsWebTheme -Name custom -StyleSheet @{path="c:\style\ThemeCenterBrand.css"} -Illustration @{path="C:\Style\bing.png"} -AdditionalFileResource @{Uri='/adfs/portal/script/onload.js';path="c:\style\default\script\onload.js"}

後は、テーマを有効化すればOKです。

Set-AdfsWebConfig -ActiveThemeName custom

こんな感じになります。

ロゴなんかも変えるとこんなこともできますね。
カークとラーズが隠れてしまってますが・・・