Citrix ADC

nFactor Extensibilité

Le cadre d’authentification nFactor offre la flexibilité d’ajouter des personnalisations pour rendre l’interface d’ouverture de session plus intuitive pour une expérience utilisateur riche. Vous pouvez ajouter des étiquettes de connexion personnalisées, des informations d’identification de connexion personnalisées, la personnalisation des affichages de l’interface utilisateur, etc.

Avec nFactor, chaque facteur peut avoir son propre écran d’ouverture de session. Dans chaque écran d’ouverture de session, vous pouvez présenter toutes les informations provenant de l’un des facteurs précédents ou plus d’informations qui sont invisibles dans d’autres facteurs. Par exemple, votre dernier facteur peut être une page informative où l’utilisateur lit les instructions et clique sur continuer.

Avant nFactor, les pages de connexion personnalisées étaient limitées et les personnalisations et nécessitaient un support. Il était possible de remplacer le tmindex.html ou d’appliquer des règles de réécriture pour modifier une partie de son comportement. Cependant, il n’a pas été possible d’atteindre la fonctionnalité sous-jacente.

Les personnalisations associées à nFactor suivantes sont capturées en détail dans cette rubrique.

  • Personnaliser les étiquettes de connexion
  • Personnaliser l’interface utilisateur pour afficher les images
  • Personnaliser le formulaire d’ouverture de session Citrix ADC nFactor

Hypothèses

Vous êtes familier avec nFactor, les commandes Shell, XML et les éditeurs de texte.

Conditions préalables

  • La personnalisation décrite dans cette rubrique n’est possible que lorsque le thème de l’interface utilisateur RFWeb (ou basé sur un thème) est configuré sur Citrix ADC.
  • La stratégie d’authentification doit être liée au serveur virtuel d’authentification, d’autorisation et d’audit, sinon le flux ne fonctionne pas comme prévu. Pour plus de détails, voir CTX224241.
  • Vous avez les éléments suivants liés à nFactor
    • Schéma XML
    • JavaScript
    • Actions d’authentification
    • Authentification serveur virtuel
    • Citrix ADC version 11.1 et ultérieure

Personnaliser les étiquettes d’ouverture de session

Pour personnaliser les étiquettes d’ouverture de session, vous avez besoin des éléments suivants :

  • Schéma XML qui décrit l’apparence de la page d’ouverture de session.
  • Le fichier script.js qui contient le JavaScript utilisé pour modifier le processus de rendu.

Fonctionnement

Le JavaScript analyse le fichier XML, rendant chaque élément à l’intérieur de la<Requirements> balise. Chaque élément correspond à une ligne du formulaire HTML. Par exemple, un champ de connexion est une ligne, le champ de mot de passe est une autre ligne, de même que le bouton d’ouverture de session. Pour introduire de nouvelles lignes, vous devez les spécifier dans le fichier de schéma XML à l’aide du SDK StoreFront. Le SDK StoreFront permet à la page d’ouverture de session avec un schéma XML d’utiliser la<Requirement> balise et de définir des éléments dessus. Ces éléments permettent d’utiliser JavaScript pour introduire dans cet espace les éléments HTML requis. Dans ce cas, une ligne est créée avec du texte sous la forme de HTML.

Le XML qui peut être utilisé est le suivant :

<Requirement>
<Credential>
<Type>nsg-custom-cred</Type>
<ID>passwd</ID>
</Credential>
<Label>
<Type>nsg-custom-label</Type>
</Label>
</Requirement>

<Requirement>: espace fourni dans la page d’ouverture de session. Les informations d’identification remplissent l’espace et les autres pièces acheminent le moteur vers les informations correctes. Dans ce cas, tapez nsg-custom-cred. Ceci est défini comme du texte brut et l’étiquette est définie pour son corps. L’exigence XML est associée au code JavaScript pour obtenir les résultats requis.

// Custom Label Handler for Self Service Links
CTXS.ExtensionAPI.addCustomAuthLabelHandler({
getLabelTypeName: function () { return "nsg-custom-label"; },
getLabelTypeMarkup: function (requirements) {
return $("< Your HTML Code Here>");
},
// Instruction to parse the label as if it was a standard type
parseAsType: function () {
return "plain";
}
});
//Custom Credential Handler for Self Service Links
CTXS.ExtensionAPI.addCustomCredentialHandler({
getCredentialTypeName: function () { return "nsg-custom-cred"; },
getCredentialTypeMarkup: function (requirements) {
return $("<div/>");
},
});

La partie XML indique la page d’ouverture de session à afficher, et le code JavaScript fournit le texte réel. Le gestionnaire d’informations d’identification ouvre l’espace et l’étiquette remplit l’espace. Comme tout le trafic d’authentification est désormais invisible pour réécrire et répondre, vous pouvez modifier l’apparence de la page. Configuration pour personnaliser les étiquettes de connexion

  1. Créez et liez un thème basé sur RFWeb.

    add vpn portaltheme RfWebUI_MOD -basetheme RfWebUI
    
    bind vpn vserver TESTAAA –portaltheme RfWebUI_MOD
    

    Le chemin d’accès des fichiers basés sur le thème est disponible dans le répertoire ; /var/netscaler/logon/themes/rfwebui_mod

  2. Ajoutez l’extrait suivant à la fin du fichier script.js :

    Remarque : Ne pas inclure les lignes précédentes dans le fichier correct ou manquant pour inclure des fonctions JavaScript empêche le chargement du XML. L’erreur ne peut être visible que dans la Console du développeur du navigateur avec le texte suivant : « Type non défini nsg-custom-cred. »

    // Custom Label Handler for Self Service Links
    CTXS.ExtensionAPI.addCustomAuthLabelHandler({
    getLabelTypeName: function () { return "nsg-custom-label"; },
    getLabelTypeMarkup: function (requirements) {
    return $("<a href="https://identity.test.com/identity/faces/register" style="font-size: 16px;" style="text-align: center;">Self Registration</a><br><a href="https://identity.test.com/identity/faces/forgotpassword" style="font-size: 16px;" style="text-align: center;">Forgot Password</a><br><a href="https://identity.test.com/identity/faces/forgotuserlogin" style="font-size: 16px;" style="text-align: center;">Forgot User Login</a>");
    },
    // Instruction to parse the label as if it was a standard type
    parseAsType: function () {
    return "plain";
    }
    });
    //Custom Credential Handler for Self Service Links
    CTXS.ExtensionAPI.addCustomCredentialHandler({
    getCredentialTypeName: function () { return "nsg-custom-cred"; },
    getCredentialTypeMarkup: function (requirements) {
    return $("<div/>");
    },
    });
    

Schéma de connexion utilisé dans cet exemple

<?xml version="1.0" encoding="utf-8"?>
<AuthenticateResponse xmlns="http://citrix.com/authentication/response/1">
<Status>success</Status>
<Result>more-info</Result>
<StateContext/>
<AuthenticationRequirements>
<PostBack>/nf/auth/doAuthentication.do</PostBack>
<CancelPostBack>/Citrix/Authentication/ExplicitForms/CancelAuthenticate</CancelPostBack>
<CancelButtonText>Cancel</CancelButtonText>
<Requirements>
<Requirement>
<Credential>
<ID>login</ID>
<SaveID>Username</SaveID>
<Type>username</Type>
</Credential>
<Label>
<Text>User name</Text>
<Type>plain</Type>
</Label>
<Input>
<AssistiveText>Please supply either domain\username or user@fully.qualified.domain</AssistiveText>
<Text>
<Secret>false</Secret>
<ReadOnly>false</ReadOnly>
<InitialValue></InitialValue>
<Constraint>.+</Constraint>
</Text>
</Input>
</Requirement>
<Requirement>
<Credential>
<ID>passwd</ID>
<SaveID>Password</SaveID>
<Type>password</Type>
</Credential>
<Label>
<Text>Password:</Text>
<Type>plain</Type>
</Label>
<Input>
<Text>
<Secret>true</Secret>
<ReadOnly>false</ReadOnly>
<InitialValue/>
<Constraint>.+</Constraint>
</Text>
</Input>
</Requirement>
<Requirement>
<Credential>
<Type>nsg-custom-cred</Type>
<ID>passwd</ID>
</Credential>
<Label>
<Type>nsg-custom-label</Type>
</Label>
</Requirement>
<Requirement>
<Credential>
<ID>loginBtn</ID>
<Type>none</Type>
</Credential>
<Label>
<Type>none</Type>
</Label>
<Input>
<Button>Please Log On</Button>
</Input>
</Requirement>
</Requirements>
</AuthenticationRequirements>
</AuthenticateResponse>

Exécutez les commandes suivantes pour charger le schéma personnalisé dans la configuration.

add authentication loginSchema custom -authenticationSchema custom.xml

add authentication loginSchemaPolicy custom -rule true -action custom

bind authentication vserver AAATEST -policy custom -priority 100 -gotoPriorityExpression END

La figure suivante affiche la page de connexion qui est rendue avec cette configuration.

Image localisée

Personnaliser l’interface utilisateur pour afficher les images

nFactor permet un affichage personnalisé avec l’utilisation de fichiers loginschema. Il peut être nécessaire d’autres personnalisations autres que celles offertes par les fichiers loginschema intégrés. Par exemple, afficher un lien hypertexte ou écrire une logique personnalisée dans l’interface utilisateur. Ceux-ci peuvent être obtenus en utilisant des « informations d’identification personnalisées » qui comprennent l’extension loginschema et le fichier javascript correspondant.

Pour la personnalisation de l’interface utilisateur pour afficher des images, un flux de déploiement dans l’intégration « Citrix ADC-Swivel » est utilisé à titre d’exemple.

Il y a deux facteurs dans ce flux.

  • Premier facteur : Vérifie les informations d’identification AD de l’utilisateur.
  • Deuxième facteur : invite l’utilisateur à ouvrir une session en fonction de l’appartenance au groupe.

Image localisée

Dans ce flux, tous les utilisateurs passent par le premier facteur. Avant le deuxième facteur, il y a un pseudo-facteur pour vérifier si certains utilisateurs peuvent être omis du facteur « pivotement ». Si l’utilisateur a besoin d’un facteur « pivotant », une image et une zone de texte s’affichent pour entrer le code.

Solution

La solution de personnalisation de l’interface utilisateur pour afficher les images contient deux parties ;

  • Extension Loginschema.
  • Script personnalisé pour traiter l’extension loginschema.

Extension Loginschema

Pour contrôler le rendu du formulaire, un identifiant personnalisé est injecté dans le loginschema. Cela peut être fait en réutilisant le schéma existant et en modifiant selon l’exigence.

Dans l’exemple, un loginschema qui n’a qu’un seul champ de texte (tel que /nsconfig/loginschema/loginschema/OnlyPassword.xml) est pris en compte. L’extrait suivant est ajouté à la loginschema.

<Requirement><Credential><ID>swivel_cred</ID><Type>swivel_cred</Type><Input><Text><Hidden>true</Hidden><InitialValue>${http.req.user.name}</InitialValue></Text></Input></Credential></Requirement>

Dans l’extrait, « swivel_cred » est spécifié comme « Type » des informations d’identification. Comme cela n’est pas reconnu comme une « identification » intégrée, l’interface utilisateur recherche un gestionnaire pour ce type et l’appelle s’il existe. Une valeur initiale est envoyée pour ces informations d’identification, qui est une expression que Citrix ADC remplit dynamiquement. Dans l’exemple, il s’agit du nom de l’utilisateur utilisé pour notifier le serveur pivotant du nom d’utilisateur. Il peut ne pas être nécessaire tout le temps ou il peut être augmenté avec d’autres données. Ces détails doivent être ajoutés au besoin.

Javascript pour gérer les informations d’identification personnalisées

Lorsque l’interface utilisateur trouve des informations d’identification personnalisées, elle recherche un gestionnaire. Tous les gestionnaires personnalisés sont écrits dans /var/netscaler/logon/logonpoint/custom/script.js pour le thème de portail par défaut. Pour les thèmes de portail personnalisés, script.js peut être trouvé dans le répertoire/var/netscaler/logon/themes/<custom_theme>/.

Le script suivant est ajouté pour rendre le marquage des informations d’identification personnalisées.

CTXS.ExtensionAPI.addCustomCredentialHandler({
    // The name of the credential, must match the type returned by the server
    getCredentialTypeName: function () { return "swivel_cred"; },
    // Generate HTML for the custom credential
    getCredentialTypeMarkup: function (requirements) {
        var div = $("<div></div>");
        var image = $("<img/>");
        var username = requirements.input.text.initialValue; //Get the secret from the response
        image.attr({
            "style" : "width:200px;height:200px;",
            "id" : "qrcodeimg",
            "src" : "https://myswivelserver.citrix.com:8443/pinsafe/SCImage?username=" + username
        });
        div.append(image);
        return div;
    }
});

Cet extrait sert à gérer le balisage pour ‘swivel_cred’. Le nom des informations d’identification en surbrillance doit correspondre au « type » spécifié précédemment dans l’extension loginschema. Pour générer un balisage, une image dont la source pointe vers le serveur pivotant doit être ajoutée. Une fois cela fait, l’interface utilisateur charge l’image à partir de l’emplacement spécifié. Étant donné que ce loginschema a également une zone de texte, l’interface utilisateur rend cette zone de texte.

Remarque : L’administrateur peut modifier le « style » de l’élément d’image pour redimensionner l’image. Actuellement, il est configuré pour 200x200 pixels.

Configuration pour la personnalisation de l’interface utilisateur pour afficher les images

La configuration nFactor est mieux construite de bas en haut, c’est le dernier facteur en premier car lorsque vous essayez de spécifier ‘NextFactor’ pour les facteurs précédents, vous avez besoin du nom du facteur suivant.

Configuration du facteur de pivotement :

add loginschema swivel_image –authenticationSchema /nsconfig/loginschema/SwivelImage.xml

add authentication policylabel SwivelFactor –loginSchema swivel_image

bind authentication policylabel SwivelFactor –policy <policy-to-check-swivel-image> -priority 10

Remarque : Téléchargez SwiveLimage.xml à partir du loginschema utilisé dans l’exemple.

Pseudo facteur pour la configuration du contrôle de groupe :

add authentication policylabel GroupCheckFactor

add authentication policy contractors_auth_policy –rule ‘http.req.user.is_member_of(“contractors”)’ –action NO_AUTHN

add authentication policy not_contractors _auth_policy–rule true –action NO_AUTHN

bind authentication policylabel GroupCheckFactor –policy contractors_auth_policy –pri 10 –nextFactor SwivelFactor

bind authentication policylabel GroupCheckFactor –policy not_contractors_auth_policy –pri 20

Premier facteur pour la connexion à Active Directory :

add ldapAction <>

add authentication policy user_login_auth_policy –rule true –action <>

bind authentication vserver <> -policy user_login_auth_policy –pri 10 –nextFactor GroupCheckFactor

Dans la configuration, trois facteurs sont spécifiés dont un est implicite/pseudo.

Schéma de connexion utilisé dans cet exemple

Voici un exemple de schéma avec des informations d’identification pivotantes et une zone de texte.

Remarque : lors de la copie de données pour le navigateur Web, les guillemets peuvent s’afficher différemment. Copiez des données dans des éditeurs comme le bloc-notes avant de les enregistrer dans des fichiers.

<?xml version="1.0" encoding="UTF-8"?>
<AuthenticateResponse xmlns="http://citrix.com/authentication/response/1">
<Status>success</Status>
<Result>more-info</Result>
<StateContext></StateContext>
<AuthenticationRequirements>
<PostBack>/nf/auth/doAuthentication.do</PostBack>
<CancelPostBack>/nf/auth/doLogoff.do</CancelPostBack>
<CancelButtonText>Cancel</CancelButtonText>
<Requirements>
<Requirement><Credential><ID>swivel_cred</ID><Type>swivel_cred</Type><Input><Text><Hidden>true</Hidden><InitialValue>${http.req.user.name}</InitialValue></Text></Input></Credential></Requirement>
<Requirement><Credential><ID>passwd</ID><SaveID>ExplicitForms-Password</SaveID><Type>password</Type></Credential><Label><Text>Password:</Text><Type>plain</Type></Label><Input><Text><Secret>true</Secret><ReadOnly>false</ReadOnly><InitialValue></InitialValue><Constraint>.+</Constraint></Text></Input></Requirement>
<Requirement><Credential><Type>none</Type></Credential><Label><Text>Hello ${http.req.user.name}, Please enter passcode from above image.</Text><Type>confirmation</Type></Label><Input /></Requirement>
<Requirement><Credential><ID>saveCredentials</ID><Type>savecredentials</Type></Credential><Label><Text>Remember my password</Text><Type>plain</Type></Label><Input><CheckBox><InitialValue>false</InitialValue></CheckBox></Input></Requirement>
<Requirement><Credential><ID>loginBtn</ID><Type>none</Type></Credential><Label><Type>none</Type></Label><Input><Button>Log On</Button></Input></Requirement>
</Requirements>
</AuthenticationRequirements>
</AuthenticateResponse>

Résultat

Une fois la configuration effectuée, l’image suivante s’affiche.

Image localisée

Remarque : La hauteur et le placement de l’image peuvent être modifiés dans le JavaScript.

Personnaliser le formulaire d’ouverture de session Citrix ADC nFactor pour afficher ou masquer les champs

L’interface utilisateur RFWeb de Citrix Gateway permet une grande variété de personnalisations. Cette fonctionnalité, associée à la structure d’authentification nFactor, permet aux clients de configurer des flux complexes sans compromettre les flux de travail existants.

Dans cet exemple, deux options d’authentification, OAuth et LDAP sont disponibles à partir de la liste Type d’ouverture de session. Lorsque le formulaire est chargé pour la première fois, les champs nom d’utilisateur et mot de passe (LDAP est affiché en premier) sont affichés. Si OAuth est sélectionné, tous les champs sont masqués car OAuth implique un déchargement de l’authentification vers un serveur tiers. De cette façon, l’administrateur peut configurer des workflows intuitifs selon la commodité de l’utilisateur.

Remarque :

  • Les valeurs de la liste Type d’ouverture de session peuvent être modifiées avec des modifications simples au fichier de script.
  • Cette section décrit uniquement la partie de l’interface utilisateur du flux. La gestion du temps d’exécution de l’authentification est hors du champ d’application de cet article. Il est recommandé aux utilisateurs de se référer à la documentation nFactor pour la configuration de l’authentification.

Comment personnaliser le formulaire d’ouverture de session nFactor

Personnaliser le formulaire d’ouverture de session nFactor peut être classé en deux parties

  • Envoi de loginschema droit à l’interface utilisateur
  • Ecrire un gestionnaire pour interpréter les sélections loginschema et utilisateur

Envoyer loginschema droit à l’interface utilisateur

Dans cet exemple, une revendication/exigence simple est envoyée dans le loginschema.

Pour cela, le fichier SingleAuth.xml est modifié. SingleAuth.xml est livré avec le firmware Citrix ADC et se trouve dans le répertoire /nsconfig/loginschema/loginschema.

Étapes pour envoyer loginschema :

  1. Connectez-vous via SSH et passez à shell (tapez ‘shell’).

  2. Copiez SingleAuth.xml dans un autre fichier pour modification.

    Remarque : le dossier de destination est différent du dossier loginschemas Citrix ADC par défaut.

    cp /NSConfig/LoginsChema/LoginsChema/SingleAuth.xml /NSConfig/LoginsChema/SingleAuthDynamic.xml

  3. Ajoutez la revendication suivante à SingleAuthDynamic.xml.

    <Requirement><Credential><ID>nsg_dropdown</ID><Type>nsg_dropdown</Type></Credential><Label><Text>Logon Type:</Text><Type>plain</Type></Label></Requirement>
    
  4. Configurez Citrix ADC pour envoyer ce loginschema pour charger le premier formulaire.

    add loginschema single_auth_dynamic –authenticationSchema SingleAuthDynamic.xml
    
    add loginschemaPolicy single_auth_dynamic –rule true –action single_auth_dynamic
    
    bind authentication vserver aaa_nfactor –policy single_auth_dynamic –pri 10
    

Modifications de script pour charger le formulaire et gérer les événements utilisateur

Vous pouvez modifier le JavaScript qui permet à l’administrateur de personnaliser l’affichage du formulaire d’ouverture de session. Dans cet exemple, le champ Nom d’utilisateur et mot de passe s’affiche si LDAP est choisi et sont masqués si OAuth est choisi. L’administrateur peut également masquer uniquement le mot de passe.Les administrateurs doivent ajouter l’extrait suivant à « script.js » qui se trouve dans le répertoire « /var/netscaler/logon/logonpoint/custom ».

Remarque : Comme ce répertoire est un répertoire global, créez un thème de portail et modifiez le fichier « script.js » dans ce dossier, à"/var/netscaler/logon/themes/<THEME_NAME>".

CTXS.ExtensionAPI.addCustomCredentialHandler({
    // The name of the credential, must match the type returned by the server
    getCredentialTypeName: function () { return "nsg_dropdown"; },
    // Generate HTML for the custom credential
    getCredentialTypeMarkup: function (requirements) {
        var div = $("<div></div>");
        var select = $("<select name='nsg_dropdown'></select>").attr("id", "nsg_dropdown");

        var rsa = $("<option></option>").attr("selected", "selected").text("LDAP").val("LDAP");
        var OAuthID = $("<option></option>").text("OAuth").val("OAuth");
        select.append(rsa, OAuthID);

        select.change(function(e) {
            var value = $(this).val();
            var ldapPwd = $($(".credentialform").find(".CredentialTypepassword")[0]);
            var ldapUname = $($(".credentialform").find(".CredentialTypeusername"));
            if(value == "OAuth") {
                if (ldapPwd.length)
                        ldapPwd.hide();
                if (ldapUname.length)
                        ldapUname.hide();
            } else if(value == "LDAP") {
                if (ldapPwd.length)
                        ldapPwd.show();
                if (ldapUname.length)
                        ldapUname.show();
            }
        });
       div.append(select);
        return div;
    }
});

Expérience utilisateur final

Lorsqu’un utilisateur final charge la page d’ouverture de session pour la première fois, l’écran suivant apparaît.

Image localisée

Si OAuth est sélectionné dans Type d’ouverture de session, les champs nom d’utilisateur et mot de passe sont masqués.

Image localisée

Si LDAP est sélectionné, le nom d’utilisateur et le mot de passe s’affichent. De cette façon, la page d’ouverture de session peut être chargée dynamiquement en fonction de la sélection de l’utilisateur.

Schéma de connexion utilisé dans cet exemple

<?xml version="1.0" encoding="UTF-8"?>
<AuthenticateResponse xmlns="http://citrix.com/authentication/response/1">
<Status>success</Status>
<Result>more-info</Result>
<StateContext></StateContext>
<AuthenticationRequirements>
<PostBack>/nf/auth/doAuthentication.do</PostBack>
<CancelPostBack>/nf/auth/doLogoff.do</CancelPostBack>
<CancelButtonText>Cancel</CancelButtonText>
<Requirements>
<Requirement><Credential><ID>login</ID><SaveID>ExplicitForms-Username</SaveID><Type>username</Type></Credential><Label><Text>User name</Text><Type>plain</Type></Label><Input><AssistiveText>Please supply either domain\username or user@fully.qualified.domain</AssistiveText><Text><Secret>false</Secret><ReadOnly>false</ReadOnly><InitialValue></InitialValue><Constraint>.+</Constraint></Text></Input></Requirement>
<Requirement><Credential><ID>passwd</ID><SaveID>ExplicitForms-Password</SaveID><Type>password</Type></Credential><Label><Text>Password:</Text><Type>plain</Type></Label><Input><Text><Secret>true</Secret><ReadOnly>false</ReadOnly><InitialValue></InitialValue><Constraint>.+</Constraint></Text></Input></Requirement>
<Requirement><Credential><ID>nsg_dropdown</ID><Type>nsg_dropdown</Type></Credential><Label><Text>Logon Type:</Text><Type>plain</Type></Label></Requirement>
<Requirement><Credential><Type>none</Type></Credential><Label><Text>First factor</Text><Type>confirmation</Type></Label><Input /></Requirement>
<Requirement><Credential><ID>saveCredentials</ID><Type>savecredentials</Type></Credential><Label><Text>Remember my password</Text><Type>plain</Type></Label><Input><CheckBox><InitialValue>false</InitialValue></CheckBox></Input></Requirement>
<Requirement><Credential><ID>loginBtn</ID><Type>none</Type></Credential><Label><Type>none</Type></Label><Input><Button>Log On</Button></Input></Requirement>
</Requirements>
</AuthenticationRequirements>
</AuthenticateResponse>

Important : pour plus de détails sur diverses rubriques liées à nFactor, reportez-vous à la section nFactor.