AD FSのサインイン画面をカスタマイズ+パスワード変更サイトの有効化

どうも、Miyaです。

これまでAD FS+Office365のフェデレーションIDの構成について説明してきました。
Windows Server 2016 AD FS + Office365のフェデレーションIDの構成①
Windows Server 2016 AD FS + Office365のフェデレーションIDの構成②
Windows Server 2016 AD FS 証明書認証を代替ホスト名でバインドする

AD FSでフェデレーション構成を取り入れることによって、AD FS独自のサインイン画面にリダイレクトされるのですが、利用者に対してあまり好ましくない画面構成と思いませんか?
ADFS

★規定のサインイン画面が不親切と思う点
その①:サインインに失敗した時の問い合わせ窓口が不明である。
その②:どのID/PWを入力すればいいのかわからない。
その③:そもそも自組織のサインインページなのか。
その④:パスワードを忘れた場合の手順が分からない。
どの⑤:追加アカウントを作成したい場合の手順が分からない。

…などなど、他にも考えればいくらでもありそうですが、これらの案内をサインインページに記載できると利用者・管理者ともに安心できると私は思います。

実は、AD FSのサインインページは結構ゴリゴリにカスタマイズすることが可能なんです。
Title:AD FS user sign-in customization

また、AD FSの目玉機能の一つとして、パスワード変更サイトの公開があります。
Title:Update password customization

この機能のおかげで、利用者はADに接続できない(例えば社外NW)環境からでもWAP経由でAD FSに対してパスワード変更を依頼することが可能になります。

本記事では、AD FSのサインインページを使い勝手がよくなるようカスタマイズする方法をご紹介していきます。

スポンサーリンク:

サインインページのカスタマイズ

まずは、最終成果物である私のカスタマイズ後のサインインページをご覧ください。
赤枠で囲まれている箇所が規定の設定をカスタマイズした箇所になります。
ADFSカスタマイズ

基本的にAD FSのPowerShellコマンドで簡単にカスタマイズできるので、本記事を参考にぜひカスタマイズしてみてはいかがでしょうか。

カスタマイズの下準備

AD FSのサインイン画面はテーマと呼ばれるセットで構成されている部分と、全体設定に二分されます。

規定で設定されているテーマは、Get-AdfsWebThemaコマンドで確認できます。

このテーマを編集することでサインイン画面をカスタマイズ出来るのですが、規定のテーマを編集するのはよろしくないので、新規でテーマを作成します。

Set-AdfsWebTheme

上記コマンドでは、規定のテーマであるDefaultをベースに新規テーマ”itbeginner”を作成しています。
Getコマンドでテーマの一覧を確認してみましょう。
Set-AdfsWebTheme

このように、Defaultとitbeginnerの二つのテーマが作成されていることが確認できます。
新規作成したitbeginnerをこれからカスタマイズしていくのですが、各々のコマンドが反映された経過を観察するために、先にitbeginnerをアクティブなテーマとして設定しておきます。

PowerShellから下記コマンドを実行して、アクティブテーマをDefault⇒itbeginnerに変更しましょう。
あ、勿論ですが本番環境では最後にアクティブ化しましょう(笑

下準備は以上で完了です。次セクションから本格的にカスタマイズ工程に入っていきます。

ロゴの挿入

まずはロゴの挿入です。現在、AD FSの上部には組織名もしくはフェデレーションサービス名が表記されていますね。
フェデレーション名が表示されている場合は、一見すると怪しいページに飛ばされたと勘違いする利用者もいそうです。

Set-AdfsWebTheme

下記コマンドを実行して、該当箇所にロゴ画像を表示することができます。
画像ファイルは、10KB以下が要件で、260×35のサイズで解像度は96dpiが推奨値となっています。

コマンド実行後のサインイン画面を見てみると、指定したロゴ画像が表示されています。

Set-AdfsWebTheme

設定したロゴ画像を削除したい場合は下記コマンドを実行してください。

イラスト画像の変更

次はイラスト画像です。イラスト画像とはサインイン画面の左側である青い画像です。

Set-AdfsWebTheme

ここもロゴ画像と同様に任意の画像を設定することができます。
但し、設定できる画像は200KB以下である必要があります。解像度の高い画像は設定できませんね…残念。

画像を用意したら、下記コマンドで設定しましょう。

コマンド実行後のサインインページを確認してみると、指定した画像が設定されていることが確認できます。

Set-AdfsWebTheme

これだけで大分雰囲気が変わりましたね。ここに企業理念の画像を張り付けたがる方々がいらっしゃいますが、一社員として推奨しません…。

各種リンクの設置

次に各種リンクの設定です。右下にヘルプデスク・ホーム・プライバシーリンクを設定できます。

・ヘルプデスクリンク

・ホームリンク

・プライバシーリンク

Set-AdfsWebTheme

紹介しておきながら何ですが、かなり文字サイズが小さく設定されているので、利用者の目に入りにくいですね。

次で説明する[CSSの編集]セクションで装飾が可能なので、目立つようカスタマイズするのも良いかと思います。
多要素認証を取り入れている組織では、認証手順のページリンクを貼ってあげるなどの活用法があるのではないでしょうか。

JavaScript・CSSの編集

次にご紹介するのが、AD FSサインイン画面のJavaScriptとCSSの編集方法です。

AD FSには、サインインページを構成するJavaScriptとCSSファイルをエクスポートして、自由にカスタマイズする機能が備えられています。素晴らしいですね。

まずは、PowerShellから下記コマンドを実行して構成ファイルをエクスポートしましょう。

コマンド実行後、指定したファイルパスに構成ファイルがエクスポートされています。

Export-AdfsWebTheme

まずはJavaScriptを編集してサインインの説明文の文言を変更しましょう。

JavaScriptの編集

[Script]フォルダ配下のOnload.jsをテキストエディタで開き、下記ソースコードを末尾に追加します。

[“置換したい文字列に”]に表記させたい文言を記入してください。
編集が完了したら、Onload.jsファイルをAD FSにアップロードしましょう。

コマンド実行後のサインイン画面では、サインイン画面が入力した文字列に置き換わっていることが確認できました。

Set-AdfsWebTheme

但し、文字の横幅がWidthを超えてしまっているため、2行で表記されています。ちょっとダサいので、CSSで調整してみましょう。

CSSの編集

サインインの説明文箇所のクラス名を開発者ツールで見てみると、divクラスのworkAreaであることが分かります。

Set-AdfsWebTheme

cssフォルダ配下のStyle.cssをテキストエディタで開きます。
workAreaのWidthを一行で収まるようCSSを上書きし、下記コマンドでAD FSにアップロードしましょう。

修正したスタイルシートが反映されて、説明文が一行で表示されているのが確認できます。

Set-AdfsWebTheme

サインイン説明文の挿入

さて、次はサインインボタンの下に記載する案内文です。今回はこちらの箇所にヘルプデスクの案内を記載したいと思います。

案内文の追加には下記コマンドを使用するのですが、今までのコマンドとは異なりますね。

本記事の冒頭でこんなことが書かれていたことを思い出してください。

AD FSのサインイン画面はテーマと呼ばれるセットで構成されている部分と、全体設定に二分されます。

何が言いたいかというと、今までのカスタマイズ設定はテーマに対して編集していたのに対して、本セクションの設定は全体設定であることです。

つまり、テーマを変更しようがSet-AdfsGlobalWebContentで設定した箇所は不変であるということです。

サインインの案内文を挿入するには”SignInPageDescriptionText”オプションを使います。
本設定はHTML形式で設定可能なため、HTMLタグの使用および簡易的な文字装飾を実装出来ます。

私はこんな感じで案内文を書いてみました。

実行後のAD FSサインイン画面がこちらになります。

Set-AdfsGlobalWebContent

パスワード変更サイトの有効化

さて、一度話をそらしてAD FSの便利機能の一つであるパスワード変更サイトの有効化について話しておきます。

この機能を有効にすることで利用者はAD FSに対してパスワード変更を依頼し、AD FSがその利用者の代理でActive Directoryにパスワード変更を行います。

つまり、WAP経由でこの機能を公開することで利用者はドメインネットワーク外・またはワークグループ端末からでもパスワード変更が可能な環境を作り出すことができるんです。

このパスワード変更サイトを有効にして、リンクをサインインページに記載してあげれば利用者のパスワード変更が簡易化されるのではないでしょうか。

有効化手順

AD FSの管理コンソールから[エンドポイント]でadfs/portal/updatepassword/を有効にしましょう。
WAP経由でアクセスさせたい場合には、[プロキシに対して有効にする]も選択しておきましょう。

passwordupdate

AD FSのサービスを再起動します。

再起動後、https://<フェデレーション名>/adfs/portal/updatepassword/でパスワード変更サイトにアクセスできること確認しておきましょう。
Set-AdfsGlobalWebContent

サインイン案内文へのリンク貼り付け

パスワード変更サイトが開設出来たので、これをサインインの案内文にリンクを載せてみました。これで利用者はAD FSのサインイン画面からパスワード変更が可能になります。

実行後はこんな感じです。私のセンスは置いておいて、既定のページ構成よりも遥かに改善されているのがお分かりいただけたかと思います。

Set-AdfsGlobalWebContent

ロケールの設定

本記事のカスタマイズのご紹介は以上になりますが、現時点では大きな課題が残っています。
グローバル企業にお勤めの方ならお分かりだと思いますが、カスタマイズしたサインイン画面が多言語化されていない。という点です。

本記事のカスタマイズ内容はすべて日本語で記載されているため、英語圏内の従業員が利用する環境ですとアウトです。

そこで、AD FSでは接続端末のロケール設定によって表示したい内容を分岐する機能を備えています

例えば、ロゴ画像、イラスト画像を変更するコマンドのハッシュキーにlocale=”国コード”を追加してあげることで、「UserAgentがJaの場合に表示する」といった応用設定が可能なんです。(Onload.jsは不可みたいです。)

このハッシュキーを使えば、ロケール設定が英語の端末からのアクセスには英語表記のロゴ画像を表示させるなどの構成が可能になります。

ちなみに、本記事のようにコマンド実行時にロケールを指定していない場合は、規定の設定として解釈されます。

Set-AdfsGlobalWebContentコマンドも、-localeオプションで国コードを指定するとロケールごとの設定が出来ます。
Title:Set-AdfsGlobalWebContent

グローバルな認証基盤として構成しているのであれば、既定の言語を英語としておくケースが多いです。

おわりに

いかがでしたでしょうか。AD FSのサインインページって柔軟にカスタマイズ可能であることをご理解いただけましたでしょうか。

本記事で紹介したカスタマイズ項目以外にも、証明書利用者信頼ごとに表示する内容を分岐させたり、エラー文によって表示するエラー文章をカスタマイズしたり、多要素認証の構成画面もカスタマイズ可能です。

サインイン画面のあるべき姿として、本記事でカスタマイズした情報のほかに、IDもしくはPWを忘れたときの対処手順のリンクや、アカウント新規作成のリンクを設けると尚良いかもしれませんね。

また、多要素認証を導入している場合には、それ用の手順も記載してあげると問い合わせが減って、管理者としてもありがたいですよね。

より高度なカスタマイズをしたい方はMicrosoftの公開情報にも記載されているので、ぜひお試しください。
Title:AD FS user sign-in customization

それでは、良いOffice365ライフをっ♪

スポンサーリンク