AD FS サインイン ページの高度なカスタマイズ

  • [アーティクル]

Windows Server 2012 R2 以降の Active Directory フェデレーション サービス (AD FS) では、ユーザーのサインイン エクスペリエンスのカスタマイズがサポートされています。 ほとんどのシナリオでは、組み込みの Windows PowerShell コマンドレットを使用して AD FS サインイン ページを構成できます。 可能な場合は常に、組み込みの Windows PowerShell コマンドを使用してカスタマイズすることをお勧めします。 詳細については、「AD FS のユーザー サインインのカスタマイズ」を参照してください。

AD FS に付属する PowerShell コマンドを使用して有効にできないサインイン エクスペリエンスを提供することが必要になる場合があります。 AD FS で提供される onload.js ファイルにカスタム コードを追加することで、サインイン エクスペリエンスを構成できます。 このファイル コードは、すべての AD FS ページで実行されます。

考慮事項

AD FS サインイン ページのカスタマイズを開始する前に、次の重要な考慮事項を確認してください。

重要

リダイレクト フローに影響を与えたり、AD FS で使用されるプロトコル パラメーターを変更したりするカスタマイズ変更はサポートされません。

  • onload.js ファイルは、フォーム ベースのサインイン ページ、ホーム領域検出ページなど、すべての AD FS ページで実行されます。 カスタム コードが意図したとおりにのみ実行され、予期せず実行されないことを常に確認してください。

  • AD FS には、default という名前の組み込みの Web テーマが付属しています。 既定の Web テーマを作成する onload.js のコンテンツは変更できません。 onload.js を更新するには、AD FS サインイン ページ用のカスタム Web テーマを作成して使用します。 詳細については、「AD FS のユーザー サインインのカスタマイズ」を参照してください。

  • 既定の Web テーマ用の元の onload.js ファイルには、さまざまなフォーム ファクターのページ レンダリングを処理するコードも含まれています。 お勧めのカスタマイズ方法は、カスタム ロジック コードを既存の onload.js ファイルに追加することです。 onload.js ファイルの元のコンテンツは変更しないでください。

  • HTML 要素を参照する場合は、その要素を処理する前に、要素が存在することを必ず確認してください。 この手順により、堅牢性が確保され、該当の要素が含まれないページでカスタム ロジックが実行されることがなくなります。 既存の HTML 要素を確認するには、AD FS サインイン ページで HTML ソースを表示します。

  • 代替環境でカスタマイズ内容を検証し、カスタマイズを運用環境の AD FS サーバーに移動する前にテストを実行することをお勧めします。 この手順により、検証前のカスタマイズがエンド ユーザーの目に触れる可能性が減少します。

カスタマイズ手順

以降のセクションでは、AD FS サインイン ページ用に onload.js ファイル コンテンツをカスタマイズする手順について説明します。

カスタム Web テーマを作成する

カスタム ロジックを onload.js ファイルに追加するには、最初の手順としてカスタム Web テーマを作成します。 簡単な方法は、既定の Web テーマをエクスポートし、元のコードをカスタマイズのベースとして使用することです。

次のコマンドレットを実行して、既定の Web テーマを複製することでカスタム Web テーマを作成します。

New-AdfsWebTheme –Name custom –SourceName default

onload.js ファイルを生成する

次の手順は、カスタム Web テーマをエクスポートして、更新できるonload.js ファイルを用意します。

次のコマンドレットを実行してカスタム Web テーマをエクスポートし、onload.js ファイルを生成します。

Export-AdfsWebTheme –Name default –DirectoryPath c:\theme

onload.js ファイルは、コマンドレットで指定されたディレクトリ内の script フォルダーに配置されます。 この例では、指定したフォルダーは c:\theme です。

カスタマイズを追加する

これで、onload.js のコンテンツを変更し、シナリオに合わせてカスタム ロジック コードを追加する準備ができました。 前述のように、onload.js ファイルの末尾にカスタム コードを追加してください。

一般的なカスタマイズを示すコード スニペットについては、次の「例」のセクションを参照してください。

ターゲット onload.js ファイルを変更する

カスタマイズを追加したら、元の onload.js ファイルではなく、この onload.js ファイルを使用するように AD FS の Web テーマを更新する必要があります。

次のコマンドレットを実行して、対象の onload.js ファイルを Web テーマ定義のターゲットとして設定します。

  • Windows Server 2016 以降の AD FS の場合:

    Set-AdfsWebTheme -TargetName custom -OnLoadScriptPath "c:\theme\script\onload.js"

  • Windows Server 2012 R2 の AD FS の場合:

    Set-AdfsWebTheme -TargetName custom -AdditionalFileResource @{Uri='/adfs/portal/script/onload.js';path="c:\theme\script\onload.js"}

AD FS にカスタマイズを適用する

最後の手順では、AD FS サインイン ページにカスタマイズを適用します。

次のコマンドレットを実行して、カスタマイズ内容で AD FS を更新します。

Set-AdfsWebConfig -ActiveThemeName custom

例

次の例では、AD FS サインイン ページを構成するために onload.js ファイルに追加できるカスタム コードを示します。

Note

カスタム コードは必ず onload.js ファイルの末尾に追加してください。

サインイン ページのタイトル文字列を変更する

AD FS フォーム ベースのサインイン ページでは、ユーザー入力フィールドの上にタイトルが表示されます。 既定のタイトル値は "組織アカウントを使用してサインイン" です。

onload.js ファイルに次のコードを追加して、既定の文字列値をカスタム文字列に置き換えます。 コードで、loginMessage.innerHTML パラメーターの値をタイトルに使用するカスタム文字列に設定します。

// Sample code to change page title string

// Check if loginMessage element is present
var loginMessage = document.getElementById('loginMessage');
if (loginMessage)
{
       // If loginMessage element is present, change title to custom value
       loginMessage.innerHTML = 'Custom title string value';
}

SAM アカウント名のサインインを受け入れる

AD FS フォーム ベースのサインイン ページでは、既定で 2 つのサインイン方法がサポートされています。

  • userPrincipalName": A user principal name (UPN), such as user@contoso.com など。
  • samAccountName: ドメインで修飾されたセキュリティ アカウント マネージャー (SAM) アカウント名 (contoso\user や contoso.com\user など)。

すべてのユーザーが同じドメインにいて、ユーザーが自分の SAM アカウント名のみを知っているシナリオを考えてみましょう。 ユーザーが SAM アカウント名のみを使用してサインインできるように、サインイン ページを更新できます。

SAM アカウントのみからのサインインを有効にするには、次のコードを onload.js ファイルに追加します。 コードで、userNameValue パラメーターの値を目的のドメインに設定します。

// Sample code to enable user login from SAM account name only

if (typeof Login != 'undefined'){

    Login.submitLoginRequest = function () {
    
    var u = new InputUtil();
    var e = new LoginErrors();
    var userName = document.getElementById(Login.userNameInput);
    var password = document.getElementById(Login.passwordInput);

    // Update login method with desired domain value
    if (userName.value && !userName.value.match('[@\\\\]'))
    {
        var userNameValue = 'contoso.com\\' + userName.value;
        document.forms['loginForm'].UserName.value = userNameValue;
    }
    
    // Check for user name errors
    if (!userName.value) {
       u.setError(userName, e.userNameFormatError);
       return false;
    }

    // Check for password errors
    if (!password.value)
    {
        u.setError(password, e.passwordEmpty);
        return false;
    }

    // Update the form page 
    document.forms['loginForm'].submit();
    return false;
    };

}