nFactor de extensibilidad

El marco de autenticación nFactor proporciona la flexibilidad de agregar personalizaciones para hacer que la interfaz de inicio de sesión sea más intuitiva para una experiencia de usuario enriquecida. Puede agregar etiquetas de inicio de sesión personalizadas, credenciales de inicio de sesión personalizadas, pantallas de interfaz de usuario personalizadas, etc.

Con nFactor, cada factor puede tener su propia pantalla de inicio de sesión. En cada pantalla de inicio de sesión puede presentar cualquier información de cualquiera de los factores anteriores o más información que sea invisible en otros factores. Por ejemplo, su último factor puede ser una página informativa en la que el usuario lea las instrucciones y haga clic en Continuar.

Antes de nFactor, las páginas de inicio de sesión personalizadas eran limitadas y las personalizaciones y necesitaban soporte. Fue posible reemplazar el tmindex.html o aplicar reglas de reescritura para cambiar parte de su comportamiento. Sin embargo, no fue posible lograr la funcionalidad subyacente.

Las siguientes personalizaciones relacionadas con nFactor se capturan en detalle en este tema.

• Personalizar etiquetas de inicio de sesión
• Personalizar la interfaz de usuario para mostrar imágenes
• Personalizar el formulario de inicio de sesión de Citrix ADC nFactor

Suposiciones

Está familiarizado con nFactor, comandos de Shell, XML y editores de texto.

Requisitos previos

• La personalización descrita en este tema solo es posible cuando el tema de interfaz de usuario RFWeb (o basado en temas) está configurado en Citrix ADC.
• La directiva de autenticación debe estar vinculada al servidor virtual de autenticación, autorización y auditoría; de lo contrario, el flujo no funciona según lo previsto. Para más detalles, véase CTX224241.
• Tienes los siguientes artículos relacionados con nFactor
  • Esquema XML
  • JavaScript
  • Acciones de autenticación
  • Servidor virtual de autenticación
  • Citrix ADC versión 11.1 y posterior

Personalizar etiquetas de inicio de sesión

Para personalizar las etiquetas de inicio de sesión, necesita lo siguiente:

• Esquema XML que describe el aspecto de la página de inicio de sesión.
• El archivo script.js que contiene el JavaScript que se utiliza para cambiar el proceso de representación.

Funcionamiento

JavaScript analiza el archivo XML, representando cada elemento dentro de la etiqueta <Requirements>. Cada elemento corresponde a una línea en el formulario HTML. Por ejemplo, un campo de inicio de sesión es una línea, el campo de contraseña es otra línea, al igual que el botón de inicio de sesión. Para introducir nuevas líneas, debe especificarlas en el archivo de esquema XML mediante el SDK de StoreFront. El SDK de StoreFront permite que la página de inicio de sesión con un esquema XML utilice la <Requirement> etiqueta y defina elementos en ella. Estos elementos permiten utilizar JavaScript para introducir en ese espacio cualquier elemento HTML que se requiera. En este caso, se crea una línea con algún texto en forma de HTML.

El XML que se puede utilizar es el siguiente:

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

<Requirement>: Espacio proporcionado en la página de inicio de sesión. La credencial llena el espacio y las otras piezas enrutar el motor a la información correcta. En este caso, escriba nsg-custom-cred. Esto se define como texto sin formato y la etiqueta se define para su cuerpo. El requisito XML está emparejado con el código JavaScript para lograr los resultados requeridos.

// 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 parte XML indica la página de inicio de sesión qué mostrar y el código JavaScript proporciona el texto real. El controlador de credenciales abre el espacio y la etiqueta llena el espacio. Dado que todo el tráfico de autenticación ahora es invisible para reescribir y responder, puede cambiar el aspecto de la página. Configuración para personalizar las etiquetas de inicio de sesión

1. Crear y enlazar un tema basado en RFWeb.

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

   La ruta de acceso para los archivos basados en el tema está disponible en el directorio; /var/netScaler/logon/themes/RFWebUI_mod

2. Agregue el siguiente fragmento al final del archivo script.js:

   Nota: Si no se incluyen las líneas anteriores dentro del archivo correcto o si no se incluye ninguna función JavaScript, se impide que se cargue el XML. El error solo se puede ver en la Consola del desarrollador del explorador con el siguiente texto: “Tipo indefinido 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/>");
   },
   });
   

Esquema de inicio de sesión utilizado en este ejemplo

<?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>

Ejecute los siguientes comandos para cargar el esquema personalizado en config.

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 siguiente figura muestra la página de inicio de sesión que se representa con esta configuración.

Personalizar la interfaz de usuario para mostrar imágenes

nFactor permite una visualización personalizada con el uso de archivos loginschema. Es posible que haya un requisito para otras personalizaciones distintas de las ofrecidas por los archivos de esquema de inicio de sesión integrados. Por ejemplo, mostrar un hipervínculo o escribir lógica personalizada en la interfaz de usuario. Estos se pueden lograr mediante ‘credenciales personalizadas’ que comprenden la extensión loginschema y el archivo javascript correspondiente.

Para que la personalización de la interfaz de usuario muestre imágenes, se utiliza como ejemplo un flujo de implementación en la integración “Citrix ADC-Swivel”.

Hay dos factores en este flujo.

• Primer factor: Comprueba las credenciales de AD del usuario.
• Segundo factor: Solicita el inicio de sesión del usuario en función de la pertenencia al grupo.

En este flujo, todos los usuarios pasan por el primer factor. Antes del segundo factor, hay un pseudo factor para comprobar si algunos usuarios pueden ser omitidos del factor “giratorio”. Si el usuario requiere factor “giratorio”, se muestra una imagen y un cuadro de texto para introducir el código.

Solución

La solución para personalizar la interfaz de usuario para mostrar imágenes contiene dos partes;

• Extensión Loginschema.
• Script personalizado para procesar la extensión loginschema.

Extensión Loginschema

Para controlar la representación de formularios, se inyecta un ‘id’/’credencial’ personalizado en el loginschema. Esto se puede hacer reutilizando el esquema existente y modificando según el requisito.

En el ejemplo, se considera un esquema de inicio de sesión que solo tiene un campo de texto (como /nsconfig/LoginSchema/LoginSchema/OnlyPassword.xml). El siguiente fragmento se agrega al 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>

En el fragmento, “swivel_cred” se especifica como “Type” de la credencial. Debido a que esto no se reconoce como una ‘credencial ‘incorporada, la interfaz de usuario busca un controlador para este tipo y lo llama si existe.Se envía un valor inicial para esta credencial, que es una expresión que Citrix ADC rellena dinámicamente. En el ejemplo, es el nombre del usuario utilizado para notificar al servidor giratorio el nombre de usuario. Es posible que no se necesite todo el tiempo o que se pueda aumentar con otros datos. Estos datos deben agregarse según sea necesario.

Javascript para manejar credenciales personalizadas

Cuando la interfaz de usuario encuentra una credencial personalizada, busca un controlador. Todos los manejadores personalizados se escriben en /var/netScaler/logon/logonPoint/custom/Script.js para el tema del portal predeterminado. Para temas de portal personalizados, script.js se puede encontrar en el directorio/var/netscaler/logon/themes/<custom_theme>/.

Se agrega el siguiente script para representar el marcado de credenciales personalizadas.

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

Este fragmento es para manejar el marcado de ‘swivel_cred’. El nombre de la credencial resaltado debe coincidir con el ‘tipo’ especificado anteriormente en la extensión loginschema. Para generar marcado, debe agregarse una imagen cuyo origen apunta al servidor giratorio. Una vez hecho esto, la interfaz de usuario carga la imagen desde la ubicación especificada. Debido a que este loginschema también tiene un cuadro de texto, la interfaz de usuario representa ese cuadro de texto.

Nota: El administrador puede modificar el “estilo” del elemento de imagen para cambiar el tamaño de la imagen. Actualmente está configurado para 200x200 píxeles.

Configuración para personalizar la interfaz de usuario para mostrar imágenes

La configuración de nFactor se construye mejor de abajo hacia arriba, es decir, el último factor primero porque cuando intenta especificar ‘NextFactor’ para los factores anteriores, necesita el nombre del factor siguiente.

Configuración del factor de giro:

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

Nota: Descargue SwivelImage.xml del loginschema utilizado en el ejemplo.

Pseudo factor para la configuración de comprobación de grupo:

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

Primer factor para iniciar sesión en 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

En la configuración, se especifican tres factores de los cuales uno es implícito/pseudo.

Esquema de inicio de sesión utilizado en este ejemplo

El siguiente es un esquema de ejemplo con credencial giratoria y un cuadro de texto.

Nota: Al copiar datos para el explorador web, las cotizaciones pueden mostrarse de manera diferente. Copie datos en editores como el bloc de notas antes de guardarlos en archivos.

<?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>

Resultado

Una vez realizada la configuración, se muestra la siguiente imagen.

Nota: La altura y la ubicación de la imagen se pueden modificar en JavaScript.

Personalizar el formulario de inicio de sesión de Citrix ADC nFactor para mostrar u ocultar campos

La interfaz de usuario RFWeb de Citrix Gateway permite una amplia variedad de personalizaciones. Esta capacidad cuando se combina con el marco de autenticación nFactor permite a los clientes configurar flujos complejos sin comprometer los flujos de trabajo existentes.

En este ejemplo, hay dos opciones de autenticación, OAuth y LDAP disponibles en la lista Tipo de inicio de sesión. Cuando se carga el formulario por primera vez, se muestran los campos de nombre de usuario y contraseña (LDAP se muestra primero). Si se selecciona OAuth, todos los campos se ocultan porque OAuth implica la descarga de autenticación a un servidor de terceros. De esta forma, el administrador puede configurar flujos de trabajo intuitivos según la conveniencia del usuario.

Nota:

• Los valores de la lista Tipo de inicio de sesión se pueden modificar con modificaciones simples en el archivo de script.
• Esta sección describe solo la parte de la interfaz de usuario del flujo. El manejo del tiempo de ejecución de la autenticación está fuera del ámbito de este artículo. Se recomienda a los usuarios que consulten la documentación de nFactor para la configuración de autenticación.

Cómo personalizar el formulario de inicio de sesión nFactor

Personalizar el formulario de inicio de sesión de nFactor se puede clasificar en dos partes

• Enviar esquema de inicio de sesión derecho a la interfaz de usuario
• Escribir un controlador para interpretar loginschema y selecciones de usuario

Enviar esquema de inicio de sesión derecho a la interfaz de usuario

En este ejemplo, se envía una reclamación/requisito simple en el loginschema.

Para ello, se modifica el archivo SingleAuth.xml. SingleAuth.xml se suministra con el firmware de Citrix ADC y se puede encontrar en el directorio /nsconfig/LoginSchema/LoginSchema.

Pasos para enviar loginschema:

1. Inicie sesión a través de SSH y colóquese en shell (escriba ‘shell’).

2. Copie SingleAuth.xml en un archivo diferente para modificarlo.

   Nota: La carpeta de destino es diferente de la carpeta predeterminada de loginschemas de Citrix ADC.

   cp /nsconfig/loginschema/loginschema/singleauth.xml /nsconfig/loginschema/singleauthdynamic.xml

3. Agregue la siguiente notificación a SingleAuthDynamic.xml.

   <Requirement><Credential><ID>nsg_dropdown</ID><Type>nsg_dropdown</Type></Credential><Label><Text>Logon Type:</Text><Type>plain</Type></Label></Requirement>
   

4. Configure Citrix ADC para enviar este esquema de inicio de sesión para cargar el primer formulario.

   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
   

Cambios de script para cargar formularios y gestionar eventos de usuario

Puede modificar el JavaScript que permite al administrador personalizar la visualización para el formulario de inicio de sesión. En este ejemplo, se muestran el campo de nombre de usuario y contraseña si se elige LDAP y se ocultan si se elige OAuth. El administrador también puede ocultar solo la contraseña. Los administradores deben agregar el siguiente fragmento al directorio “script.js” que está en “/var/netScaler/logon/logonPoint/Custom”.

Nota: Dado que este directorio es un directorio global, cree un tema del portal y modifique el archivo “script.js” dentro de esa carpeta, en "/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;
    }
});

Experiencia de usuario final

Cuando un usuario final carga la página de inicio de sesión por primera vez, aparece la siguiente pantalla.

Si OAuth está seleccionado en Tipo de inicio de sesión, los campos de nombre de usuario y contraseña están ocultos.

Si LDAP está seleccionado, se muestran el nombre de usuario y la contraseña. De esta forma, la página de inicio de sesión se puede cargar dinámicamente en función de la selección del usuario.

Esquema de inicio de sesión utilizado en este ejemplo

<?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>

Importante: Para obtener más información sobre varios temas relacionados con nFactor, consulte Factor nFactor.