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上还有其他可操作的空间有代继续研究。