Personnalisation avancée des pages de connexion AD FS

Les services de fédération Active Directory (AD FS) dans Windows Server 2012 R2 et versions ultérieures prennent en charge la personnalisation de l’expérience de connexion utilisateur. Pour la plupart des scénarios, vous pouvez utiliser les applets de commande Windows PowerShell intégrées pour configurer les pages de connexion AD FS. L’approche recommandée consiste à utiliser les commandes Windows PowerShell intégrées pour la personnalisation dans la mesure du possible. Pour plus d’informations, consultez AD-FS Personnalisation de la connexion utilisateur.

Parfois, vous devrez peut-être fournir une expérience de connexion qui ne peut pas être activée à l’aide des commandes PowerShell fournies avec AD FS. Vous pouvez configurer l’expérience de connexion en ajoutant du code personnalisé au fichier onload.js fourni avec AD FS. Le code de fichier est exécuté sur toutes les pages AD FS.

Considérations

Avant de commencer à personnaliser les pages de connexion AD FS, passez en revue les considérations importantes suivantes.

Importante

Toute modification de personnalisation qui a un impact sur les flux de redirection ou modifie les paramètres de protocole utilisés par AD FS n’est pas prise en charge.

• Le fichier onload.js est exécuté sur toutes les pages AD FS, y compris les pages de connexion basées sur les formulaires, les pages de découverte du domaine d’accueil, et ainsi de suite. Vérifiez toujours que votre code personnalisé s’exécute uniquement comme prévu et non de manière inattendue.

• AD FS est fourni avec un thème web intégré appelé par défaut. Vous ne pouvez pas modifier le contenu onload.js qui crée le thème web par défaut. Pour mettre à jour le fichier onload.js, créez et utilisez un thème web personnalisé pour les pages de connexion AD FS. Pour plus d’informations, consultez AD-FS Personnalisation de la connexion utilisateur.

• Le fichier onload.js d’origine pour le thème web par défaut contient également du code pour gérer le rendu des pages pour différents facteurs de forme. L’approche de personnalisation recommandée consiste à ajouter votre code logique personnalisé au fichier onload.js existant. Ne modifiez pas le contenu du fichier onload.js d’origine.

• Lorsque vous référencez des éléments HTML, vérifiez toujours l’existence de l’élément avant d’agir sur l’élément. Cette étape fournit une robustesse et garantit que la logique personnalisée n’est pas exécutée sur les pages qui ne contiennent pas cet élément. Pour identifier les éléments HTML existants, affichez la source HTML sur les pages de connexion AD FS.

• Il est recommandé de valider vos personnalisations dans un autre environnement et d’exécuter des tests avant de déplacer vos personnalisations sur des serveurs AD FS de production. Cette étape réduit les chances d’exposer les utilisateurs finaux aux personnalisations avant la validation.

Étapes de personnalisation

Les sections suivantes fournissent les étapes permettant de personnaliser le contenu du fichier onload.js pour les pages de connexion AD FS.

Créer un thème web personnalisé

Pour ajouter votre logique personnalisée au fichier onload.js, la première étape consiste à créer un thème web personnalisé. Une méthode rapide consiste à exporter le thème web par défaut, puis à utiliser le code d’origine comme base pour vos personnalisations.

Exécutez l’applet de commande suivante pour créer un thème web personnalisé en dupliquant le thème web par défaut :

New-AdfsWebTheme –Name custom –SourceName default

Générer un fichier onload.js

L’étape suivante consiste à exporter votre thème web personnalisé afin d’avoir un fichier onload.js que vous pouvez mettre à jour.

Exécutez l’applet de commande suivante pour exporter votre thème web personnalisé et générer un fichier onload.js :

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

Le fichier onload.js est placé dans le dossier de script dans le répertoire spécifié dans l’applet de commande. Dans l’exemple, le dossier spécifié est c:\theme.

Ajouter des personnalisations

Vous êtes maintenant prêt à modifier le contenu onload.js et à ajouter du code logique personnalisé pour vos scénarios. Comme mentionné, veillez à ajouter votre code personnalisé à la fin du fichier onload.js.

Consultez la section Exemples suivants pour les extraits de code qui illustrent les personnalisations courantes.

Modifier le fichier cible onload.js

Après avoir ajouté vos personnalisations, vous devez mettre à jour le thème web AD FS pour utiliser votre fichier onload.js plutôt que le fichier de onload.js d’origine.

Exécutez l’applet de commande suivante pour définir votre fichier onload.js comme cible pour les définitions de thème web :

• Pour AD FS sur Windows Server 2016 et versions ultérieures :

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

• Pour AD FS sur Windows Server 2012 R2 :

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

Appliquer des personnalisations à AD FS

La dernière étape consiste à appliquer vos personnalisations aux pages de connexion AD FS.

Exécutez l’applet de commande suivante pour mettre à jour AD FS avec vos personnalisations :

Set-AdfsWebConfig -ActiveThemeName custom

Exemples

Les exemples suivants fournissent du code personnalisé que vous pouvez ajouter au fichier onload.js pour configurer les pages de connexion AD FS.

Remarque

Ajoutez toujours du code personnalisé à la fin du fichier onload.js.

Modifier la chaîne de titre de la page de connexion

La page de connexion basée sur les formulaires AD FS affiche un titre au-dessus des champs d’entrée utilisateur. La valeur de titre par défaut est « Se connecter avec votre compte d’organisation ».

Remplacez la valeur de chaîne par défaut par une chaîne personnalisée en ajoutant le code suivant au fichier onload.js. Dans le code, définissez la valeur du paramètre loginMessage.innerHTML sur la chaîne personnalisée à utiliser comme titre.

// 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';
}

Accepter la connexion au nom du compte SAM

La page de connexion basée sur les formulaires AD FS prend en charge deux méthodes de connexion par défaut :

• userPrincipalName": A user principal name (UPN), such as user@contoso.com`.
• samAccountName : Un nom de compte SAM (Security Account Manager) qualifié de domaine, tel que contoso\user ou contoso.com\user.

Envisagez un scénario où tous les utilisateurs se trouvent dans le même domaine et que les utilisateurs connaissent uniquement leur nom de compte SAM. Vous pouvez mettre à jour la page de connexion pour autoriser les utilisateurs à se connecter à l’aide de leur nom de compte SAM uniquement.

Activez la connexion à partir de comptes SAM uniquement en ajoutant le code suivant au fichier onload.js. Dans le code, définissez la valeur du userNameValue paramètre sur le domaine souhaité.

// 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;
    };

}

Liens connexes

• Personnalisation de la connexion utilisateur AD FS