Personalización avanzada de las páginas de inicio de sesión de AD FS
Servicios de federación de Active Directory (AD FS) en Windows Server 2012 R2 y versiones posteriores admite la personalización de la experiencia de inicio de sesión del usuario. En la mayoría de los escenarios, puede usar los cmdlets de Windows PowerShell integrados para configurar las páginas de inicio de sesión de AD FS. El enfoque recomendado es usar los comandos integrados de Windows PowerShell para la personalización siempre que sea posible. Para más información, consulte Personalización del inicio de sesión del usuario de AD FS.
A veces, es posible que tenga que proporcionar una experiencia de inicio de sesión que no se pueda habilitar mediante los comandos de PowerShell que se incluyen con AD FS. Esta experiencia de inicio de sesión se puede configurar agregando código personalizado al archivo onload.js proporcionado con AD FS. El código del archivo se ejecuta en todas las páginas de AD FS.
Consideraciones
Antes de empezar a personalizar las páginas de inicio de sesión de AD FS, revise las siguientes consideraciones importantes.
Importante
No se admite ningún cambio de personalización que afecte a los flujos de redireccionamiento o que modifique los parámetros de protocolo usados por AD FS.
El archivo onload.js se ejecuta en todas las páginas de AD FS, incluidas las páginas de inicio de sesión basadas en formularios, las páginas de detección del dominio principal, etc. Asegúrese siempre de que el código personalizado solo se ejecuta según lo previsto y no de forma inesperada.
AD FS se distribuye con un tema web integrado llamado predeterminado. No se puede modificar el contenido de onload.js que crea el tema web predeterminado. Para actualizar el archivo onload.js, cree y use un tema web personalizado para las páginas de inicio de sesión de AD FS. Para más información, consulte Personalización del inicio de sesión del usuario de AD FS.
El archivo onload.js original del tema web predeterminado también contiene código para controlar la representación de páginas para diferentes factores de forma. El enfoque de personalización recomendado es anexar el código de lógica personalizada al archivo onload.js existente. No modifique el contenido del archivo onload.js original.
Al hacer referencia a cualquier elemento HTML, asegúrese de comprobar siempre que existe ese elemento antes de actuar en él. Este paso proporciona solidez y garantiza que no se ejecuta lógica personalizada en páginas que no contengan ese elemento. Para identificar los elementos HTML existentes, vea el origen HTML en las páginas de inicio de sesión de AD FS.
Se recomienda validar las personalizaciones en un entorno alternativo y ejecutar pruebas antes de mover las personalizaciones a los servidores de AD FS de producción. Este paso reduce las probabilidades de que los usuarios finales se expongan a estas personalizaciones antes de validarlas.
Pasos de personalización
En las secciones siguientes se proporcionan los pasos para personalizar el contenido del archivo onload.js para las páginas de inicio de sesión de AD FS.
Creación de un tema web personalizado
Para agregar la lógica personalizada al archivo onload.js, el primer paso es crear un tema web personalizado. Un método rápido consiste en exportar el tema web predeterminado y, luego, usar el código original como base para las personalizaciones.
Ejecute el siguiente cmdlet para crear un tema web personalizado duplicando el tema web predeterminado:
New-AdfsWebTheme –Name custom –SourceName default
Generación del archivo onload.js
El siguiente paso es exportar el tema web personalizado para que tenga un archivo onload.js que pueda actualizar.
Ejecute el siguiente cmdlet para exportar el tema web personalizado y generar un archivo onload.js:
Export-AdfsWebTheme –Name default –DirectoryPath c:\theme
El archivo onload.js se coloca en la carpeta script del directorio especificado en el cmdlet. En el ejemplo, la carpeta especificada es c:\theme.
Adición de personalizaciones
Ahora está listo para modificar el contenido de onload.js y agregar código de lógica personalizada para sus escenarios. Como se mencionó, asegúrese de agregar el código personalizado al final del archivo onload.js.
Consulte la sección siguiente Ejemplos para ver los fragmentos de código que muestran personalizaciones comunes.
Modificación del archivo onload.js de destino
Después de agregar las personalizaciones, debe actualizar el tema web de AD FS para usar el archivo onload.js en lugar del archivo onload.js original.
Ejecute el siguiente cmdlet para establecer el archivo onload.js como destino de las definiciones de tema web:
Para AD FS en Windows Server 2016 y versiones posteriores:
Set-AdfsWebTheme -TargetName custom -OnLoadScriptPath "c:\theme\script\onload.js"Para AD FS en Windows Server 2012 R2:
Set-AdfsWebTheme -TargetName custom -AdditionalFileResource @{Uri='/adfs/portal/script/onload.js';path="c:\theme\script\onload.js"}
Aplicación de personalizaciones a AD FS
El último paso es aplicar las personalizaciones a las páginas de inicio de sesión de AD FS.
Ejecute el siguiente cmdlet para actualizar AD FS con las personalizaciones:
Set-AdfsWebConfig -ActiveThemeName custom
Ejemplos
En los ejemplos siguientes se proporciona código personalizado que puede agregar al archivo onload.js para configurar páginas de inicio de sesión de AD FS.
Nota
Anexe siempre código personalizado al final del archivo onload.js.
Modificación de la cadena de título de la página de inicio de sesión
La página de inicio de sesión basada en formularios de AD FS muestra un título encima de los campos de entrada del usuario. El valor de título predeterminado es "Iniciar sesión con la cuenta de la organización".
Reemplace el valor de cadena predeterminado por una cadena personalizada agregando el código siguiente al archivo onload.js. En el código, establezca el valor del parámetro loginMessage.innerHTML en la cadena personalizada que se usará para el título.
// 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';
}
Aceptación del inicio de sesión del nombre de la cuenta SAM
La página de inicio de sesión basada en formularios de AD FS admite dos métodos de inicio de sesión de forma predeterminada:
userPrincipalName": A user principal name (UPN), such asuser@contoso.com`.samAccountName: un nombre de cuenta del Administrador de cuentas de seguridad (SAM) calificado por dominio, comocontoso\userocontoso.com\user.
Considere un escenario en el que todos los usuarios están en el mismo dominio y los usuarios solo conocen su nombre de cuenta SAM. Puede actualizar la página de inicio de sesión para permitir que los usuarios inicien sesión solo con su nombre de cuenta SAM.
Habilite el inicio de sesión desde cuentas SAM con solo agregar el código siguiente al archivo onload.js. En el código, establezca el valor del parámetro userNameValue en el dominio deseado.
// 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;
};
}