Préambule
L’ensemble des manipulations ont été réalisées sur une infrastructure Windows 2012 R2 / ADFS 3.0.
Problématique
Avec quelques connaissances en développement web (CSS et Javascript), il est possible de customiser les pages de logon ADFS. On peut positionner un logo qui remplacera le nom de la federation ou encore changer l’illustration par défaut. De plus, Microsoft offre aussi la possibilité de changer une partie du code Javascript et CSS. Nous verrons donc comment gérer ses templates ADFS puis je détaillerai un script Javascript permettant d’ajouter automatiquement le suffixe UPN de l’utilisateur. Ainsi toute personne souhaitant se connecter n’aura qu’à entrer son samAccountName. Attention, cette méthode n’est fonctionnelle que dans le cas où tous les utilisateurs possèdent le même suffixe UPN.
Gestion des templates ADFS
Microsoft fourni quelques indications pour customiser les pages ADFS sur le lien suivant :
http://technet.microsoft.com/en-us/library/dn280950.aspx . On retrouve notamment les modifications les plus basiques comme les changements d’images ou de messages (erreur, aide,…).
Aussi, dans ADFS 3.0, il est possible de gérer plusieurs templates via les Cmdlets Powershell adéquates. Le template de base se nomme « default« . On peut d’ailleurs récupérer la liste des thèmes avec la Cmdlet Get-ADFSWebTheme. On remarque qu’il s’agit bien du template de base grâce à l’attribut IsBuiltinTheme.
Les étapes de customisation d’un thème sont les suivantes :
-
création d’un nouveau thème
-
export des fichiers du thème
-
modification des fichiers
-
import des fichiers modifiés dans le thème créé
Pour ajouter un nouveau thème il suffit d’utiliser la commande New-AdfsWebTheme en spécifiant le nom du thème ainsi que les sources du nouveau thème. En général, on se basera sur le thème par défaut que l’on customisera ultérieurement.
Il nous faut ensuite exporter les fichiers de ce thème (vers le dossier C:\ADFSTheme par exemple) :
Attention le dossier d’export doit exister (il ne sera pas généré automatiquement).
On remarque que l’on a accès à un certain nombre de fichiers mais pas à tous. En général, ceux que l’on voudra customiser sont le fichier onload.js et le fichier style.css.
Une fois modifiée, il ne reste plus qu’à importer le fichier dans le thème nommé custom. Un exemple avec le fichier onload.js :
Enfin pour définir le thème custom comme actif il faut utiliser la Cmdlet ci-dessous :
Ajout automatique du suffixe UPN
Afin de faciliter l’expérience utilisateur lors d’un usage en situation de mobilité ou via un navigateur ne supportant pas ADFS, il peut être utile d »ajouter automatiquement le suffixe UPN lorsque ce dernier a été omis dans le formulaire d’authentification. Pour les utilisateurs ne connaissant pas les notions de nom de domain Netbios ou d’UPN, cette customisation peut être interessante. Celle-ci nécessite du code Javascript.
ADFS se base sur la valeur entrée dans le champ “UserName” avec l’ID “userNameInput” du fomulaire. Il faut donc modifier cette valeur. Une autre solution (utilisée ici), consiste à changer l’ID et le nom du champ original. Puis, on ajoute un nouveau champ, invisible à l’utilisateur et contenant la bonne valeur ainsi que l’ID et le nom mentionné précédemment. Cette seconde solution est esthétiquement plus réussi (l’utilisateur ne voit pas le changement)
Ci-dessous, se trouve le script a ajouté à la fin du fichier onload.js est à intégrer dans le thème ADFS via la méthode vu précédemment :
Voici les opérations réalisées par le script lorsque le formulaire est valider (via la touche “Entrée” ou un clic sur le bouton de connexion) :
-
Récupération du champ contenant l’identifiant utilisateur
-
Vérification de la présence d’un suffixe UPN
Si le suffixe est manquant :
-
On renomme le champ contenant l’identifiant utilisateur (UserName) et on change son ID (userNameInput).
-
On ajoute un nouveau champ non visible portant les valeurs initiales (Id et nom). Il contiendra la valeur entrée par l’utilisateur avec le suffixe UPN. Celles-ci seront transmises à ADFS.
Une amélioration pourrait être d’ajouter une balise “select” contenant une liste de tous les suffixes UPN possibles. Cela permettrait de gérer les infrastructures utilisant de multiples suffixes UPN.
