AD FS 登入頁面的進階自定義
Windows Server 2012 R2 和更新版本中的 Active Directory 同盟服務 （AD FS） 支援自定義使用者登入體驗。 在大部分情況下，您可以使用內建的 Windows PowerShell Cmdlet 來設定 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 隨附內建的 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 主題，然後使用原始程式代碼作為自定義的基礎。
執行下列 Cmdlet，藉由複製預設 Web 主題來建立自定義 Web 主題：
New-AdfsWebTheme –Name custom –SourceName default
產生 onload.js 檔案
下一個步驟是導出自定義 Web 主題，讓您可以更新 onload.js 檔案。
執行下列 Cmdlet 以匯出您的自訂 Web 主題，併產生 onload.js 檔案：
Export-AdfsWebTheme –Name default –DirectoryPath c:\theme
onload.js 檔案會放在 cmdlet 所指定目錄中 腳稿 資料夾中。 在此範例中，指定的資料夾是 c:\theme。
新增自訂項目
現在您已準備好修改 onload.js 內容，併為您的案例新增自定義邏輯程序代碼。 如前所述，請務必將自定義程式代碼新增至 onload.js 檔案的結尾。
如需示範常見自定義的代碼段，請參閱下列 範例 一節。
變更目標 onload.js 檔案
新增自訂項目之後，您必須更新AD FS Web 主題，以使用您的 onload.js 檔案，而不是原始的 onload.js 檔案。
執行下列 Cmdlet，將 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
範例
下列範例提供自定義程式碼，您可以新增至 onload.js 檔案，以設定AD FS登入頁面。
備註
一律將自定義程式代碼附加至 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 表單型登入頁面預設支援兩種登入方法：
-
userPrincipalName": A user principal name (UPN), such asuser@contoso.com'。 -
samAccountName：網域限定的安全性帳戶管理員 （SAM） 帳戶名稱，例如contoso\user或contoso.com\user。
假設所有用戶都位於相同的網域，且使用者只知道其 SAM 帳戶名稱。 您可以更新登入頁面，只允許使用者使用其 SAM 帳戶名稱登入。
僅藉由將下列程式代碼新增至 onload.js 檔案，才能從 SAM 帳戶啟用登入。 在程式代碼中，將 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;
};
}