IU extendida

Puede ampliar el flujo de la interfaz de usuario (UI) de inicio de sesión con páginas personalizadas creadas con elementos dinámicos. Las IU extendidas admiten completamente la cultura y varios idiomas. Es posible crear varias IU personalizadas con diferentes elementos dinámicos. Cada página de IU extendida puede llamar a una API de forma opcional. Si se llama a una API, las reclamaciones devueltas se agregan a la colección de reclamaciones; de lo contrario, los valores de entrada se agregan como el tipo de reclamación de salida definido en los elementos dinámicos.

Los elementos dinámicos consisten en campos fijos, un campo personalizable y elementos de contenido de texto y HTML. Con esto puede solicitar fácilmente el nombre del usuario, usar uno o más campos definidos por usted y mostrar un logotipo y un enlace en una página de IU extendida.

Las IU extendidas se pueden agregar a los siguientes métodos de autenticación en la pestaña Extended UI; login, login externo, OpenID Connect, SAML 2.0 y enlace de entorno.

Seleccionar página de IU extendida Selecciona una página de IU extendida en el flujo de inicio de sesión agregando el tipo de reclamación open_extended_ui con el nombre de la página de IU extendida en las transformaciones de reclamaciones de primer nivel. En un método de autenticación SAML 2.0 seleccione la página de IU extendida con la reclamación SAML 2.0 correspondiente http://schemas.foxids.com/ws/identity/claims/openextendedui en las transformaciones de reclamaciones de primer nivel. Posteriormente, las páginas de IU extendida pueden seleccionarse en las transformaciones de reclamaciones de IU extendida agregando el tipo de reclamación open_extended_ui (solo reclamación JWT) con el nombre de la siguiente página de IU extendida.

Ejemplo Esta página de ejemplo solicita al usuario que ingrese su número de seguridad social (mostrado en dos idiomas). La IU extendida de ejemplo agrega el valor de entrada a la colección de reclamaciones como el tipo de reclamación social_security_number. En un escenario real, probablemente llamaría a una API para validar el número de seguridad social. En inglés:

En danés:

La página de ejemplo está configurada en un método de autenticación en la pestaña Extended UI con tres elementos.

La IU extendida se puede personalizar con CSS en el método de autenticación login llamado Default login, a menos que cree otro método de login y use ese en su lugar. Hay mucha flexibilidad en cómo se pueden diseñar los diálogos.

Traducciones

Los textos (y mensajes de error) usados en elementos dinámicos se traducen automáticamente si están definidos como textos globales con traducciones. De lo contrario, se crea automáticamente un elemento de texto en los entornos donde puede agregar traducciones. Si desea admitir varios idiomas, debe crear los textos en inglés y añadir traducciones.

Encuentra los textos y las traducciones en la pestaña Settings y luego en la pestaña Texts.

Implementar API

Cada página de IU extendida puede llamar a una API con el resultado de los elementos dinámicos y las reclamaciones seleccionadas. La API puede luego validar la entrada del usuario y, en caso de éxito, devolver reclamaciones o un mensaje de error al usuario.

Debe implementar una API simple que FoxIDs llama cuando el usuario envía la página. Por favor, consulte el código de ejemplo.

La API tiene una URL base y la funcionalidad se divide en carpetas. Actualmente, solo se admite la carpeta validate (funcionalidad) para validar los elementos dinámicos y las reclamaciones seleccionadas. Se pueden agregar otras carpetas más adelante.

Si la URL base de la API es https://somewhere.org/mystore, la URL de la carpeta validate será https://somewhere.org/mystore/validate.

FoxIDs Cloud llama a su API desde la IP 57.128.60.142. La IP saliente puede cambiar y pueden añadirse más con el tiempo.

Solicitud

La llamada API está protegida con autenticación HTTP Basic, donde FoxIDs envía el ID external_extended_ui como nombre de usuario y el secreto configurado como contraseña.

La API se llama con HTTP POST y un cuerpo JSON.

Este es un cuerpo de solicitud JSON con dos elementos dinámicos y dos reclamaciones:

{
 "elements": [
        {
            "Name": "ne5uqp5z",
            "Type": "Email",
            "ClaimType": "email",
            "Value": "some@test.org"
        },
        {
            "Name": "ktvywqwc",
            "Type": "Custom",
            "ClaimType": "my_claim",
            "Value": "123456"
        }
    ],
 "claims": [
        {
            "type": "sub",
            "value": "1b1ac05e-5937-4939-a49c-0e84a89662df"
        },
        {
            "type": "email",
            "value": "some_other@test.org"
        }
    ]
}

Respuesta

Éxito En caso de éxito, la API debe devolver el código HTTP 200 y una lista de claims (la lista puede estar vacía).

Por ejemplo, los valores de entrada válidos como reclamaciones:

{
    "claims": [
        {
            "type": "email",
            "value": "some@test.org"
        },
        {
            "type": "my_claim",
            "value": "123456"
        }
    ]
}

Error La API debe devolver el código HTTP 401 (Unauthorized) y un error (requerido) si se rechaza la autenticación Basic. Opcionalmente, agregue una descripción del error en ErrorMessage.

{
    "error": "invalid_api_id_secret",
    "ErrorMessage": "Invalid API ID or secret"
}

La API puede devolver el código HTTP 400 (401 y 403 también se admiten) y un error (requerido) si la entrada es rechazada. Opcionalmente, agregue un mensaje de error al usuario en UiErrorMessage y una descripción del error en ErrorMessage. El UiErrorMessage se traduce como texto y debe estar en inglés si desea admitir varios idiomas.

Un error de validación general:

{
    "error": "invalid",
    "ErrorMessage": "Something is not accepted.",
    "UiErrorMessage": "Please change the thing that is wrong."
}

Un error de validación conectado a un elemento dinámico por el nombre del elemento:

{
    "error": "invalid",
    "elements": [
           {
               "Name": "ktvywqwc",
               "ErrorMessage": "The element is not valid because of something.",
               "UiErrorMessage": "Please change the value to the correct value."
           }
       ]
}

Si se producen otros errores, la API debe devolver el código HTTP 500 u otro código de error apropiado. Se recomienda agregar un mensaje de error técnico en ErrorMessage. El mensaje de error luego podrá encontrarse en los registros de FoxIDs.

Los mensajes de error devueltos por la API en ErrorMessage NO se muestran al usuario; solo se registran.

Ejemplo de API

El ejemplo ExternalExtendedUiApiSample muestra cómo implementar la API en ASP.NET Core.

Puede usar esta colección de Postman para llamar y probar su API con Postman.

Configurar

Configure una página de IU extendida en un método de autenticación para llamar a su API en FoxIDs Control Client.

Navegue a la pestaña Authentication y seleccione el método de autenticación, luego seleccione la pestaña Extended UI. Encuentre la página de IU extendida y configure la API.

• Opcionalmente seleccione las reclamaciones que deben enviarse a la API.
• Agregue la URL base de la API sin la carpeta validate en API URL
• Agregue el API secret
• Agregue un mensaje de error genérico que se muestra al usuario si la API devuelve un error sin UiErrorMessage