ADFS3.0 Customizing the AD FS Sign-in Pages(二、JS篇)

   三年多前寫過一篇adfs3.0的登入頁面的自定義，但之前的部落格裡只介紹了一些基本的修改樣式的指令，本篇開始探討下在js層面能做哪些自定義。

   當我們用下面這條powershell的指令把預設的樣式匯出來後，我會看到一個script的資料夾，裡面有一個onload.js的檔案

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

    第一個預設場景是，使用者不想輸入賬號的域字首,比如說下圖中的賬號是smart\666，使用者不想輸入域的smart\的字首，只想輸入666這個工號。

   要實現這個需求，我們只需要在點選登入按鈕之前在使用者名稱之前加個字首即可，在onload.js檔案最下方加入如下程式碼，主要的作用就是判斷使用者名稱是否帶有域字首，如果沒有則新增。

var AppendUPN = function () {
	debugger;
var userName = document.getElementById(Login.userNameInput);

if (!(/\\/.test(userName.value)))
{
userName.value = 'smart\\' + userName.value;
}
return true;
}

document.getElementById('submitButton').onclick = new Function("AppendUPN();return Login.submitLoginRequest();");
document.getElementById('loginForm').onkeypress = function(event){ if(event && event.keyCode == 13) {AppendUPN();Login.submitLoginRequest()}};

   修改完後如何把改後的js傳上去，可以參考上一篇如何新建一個custom樣式，然後在用下面這條指令把custom中的js給替換掉。

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

 

    再比如修改使用者名稱輸入框的預設提示，在onload.js中加入如下程式碼即可。

 

document.forms['loginForm'].UserName.placeholder = '您的工號';

 

    第二個場景，修改輸入框上方的提示，即我上圖中的"請使用您的工號和密碼登入"，將下述js新增到onload.js的最下方

 

var loginMessage = document.getElementById(’loginMessage‘);
if (loginMessage)
{
// loginMessage element is present, modify its properties.
loginMessage.innerHTML = ‘這裡就填你想要顯示的內容’;
}

 

    第三個場景，使用者名稱文字框中不輸入域名，使用者名稱框中輸入的格式有兩種，一種是smart\666,一種是666@smart.com，這裡說的是前一種，js程式碼如何

var AppendUPN = function () {
var userName = document.getElementById(Login.userNameInput);
if (!(/\\/.test(userName.value)))--判斷使用者名稱是否帶域名，如果不帶則追加
{
userName.value = ‘Corp\\’ + userName.value;
}
return true;
}
document.getElementById(‘submitButton’).onclick = new Function(“AppendUPN();return Login.submitLoginRequest();”);
document.getElementById(‘loginForm’).onkeypress = function(event){ if(event && event.keyCode == 13) {AppendUPN();Login.submitLoginRequest()}};

  JS上還有其他可操作的空間有代繼續研究。