Saltar a contenido

Configurar el SSO por inyección en las aplicaciones web con la herramienta CyberElements SSO Configurator

Hoy en día, la configuración del SSO (Single Sign-On) en las aplicaciones web se enfrenta a una diversidad y una complejidad crecientes de los formularios de conexión, lo que obliga a establecer la configuración manualmente al crear la aplicación web en la consola.

Para superar esta limitación, nuestro equipo ha desarrollado una extensión CyberElements SSO Configurator que permite recuperar fácilmente la configuración de la página de conexión.

type:youtube

Instalar la extensión

La extensión CyberElements SSO Configurator es compatible con los navegadores basados en Chromium (Google Chrome, Opera GX, Microsoft Edge, etc.) y con Firefox.

  • Descargue el archivo .zip desde la Toolbox de la consola de administración y descomprímalo.

  • Vaya al módulo de gestión de las extensiones.
  • Haga clic en el botón « Load unpacked extension ».

Información

Si el botón « Load unpacked extension » no está visible, compruebe que el modo de desarrollador está activado.

  • Seleccione la carpeta descomprimida.

  • Haga clic en el botón « Add » de la ventana emergente que aparece en el navegador.

  • La extensión queda añadida al navegador.

  • Descargue el archivo .xpi desde la Toolbox de la consola de administración.

  • Abra este archivo haciendo doble clic en la descarga.
  • Se abre una ventana de Firefox y aparece una ventana emergente que pregunta si desea añadir la extensión. Haga clic en el botón « Add ».
  • La extensión queda añadida al navegador.

Recuperar la configuración del SSO web con CyberElements SSO Configurator

Formulario de conexión sencillo

Información

En esta sección se toma como ejemplo la configuración del SSO para el sitio MySystancia.

Empiece por acceder al formulario de conexión de su aplicación web.

Inicie después la extensión haciendo clic en el botón type:inline.

La extensión se abre en un panel situado a la izquierda del navegador.

La extensión identifica automáticamente los campos correspondientes al identificador, a la contraseña y al botón « Log in », y resalta los campos correspondientes.

Compruebe que los campos detectados son correctos y haga clic en el botón type:inline para guardar la configuración en el portapapeles.

Formulario de conexión de varias páginas

Información

En esta sección se toma como ejemplo la configuración del SSO para la aplicación Microsoft Outlook.

Los formularios de conexión de las aplicaciones web de Microsoft son más complejos y se reparten en varias páginas. Habrá que adaptar, por tanto, la configuración detectada por la extensión CyberElements SSO Configurator.

Empiece por acceder al formulario de conexión de su aplicación web.

Inicie después la extensión haciendo clic en el botón type:inline.

La extensión se abre en un panel situado a la izquierda del navegador.

La extensión identifica automáticamente los campos correspondientes al identificador, a la contraseña y al botón « Log in », y resalta los campos correspondientes.

En nuestro ejemplo, solo el campo del identificador está presente en la primera página.

Observe que el botón « Log in » no se ha detectado correctamente y apunta al vínculo de creación de cuenta. Haga clic en el icono type:inline de la acción button y seleccione el botón « Next ».

Como la configuración funciona según el mismo principio que un script, hay que desplazar después la acción creada antes del campo de la contraseña. Arrastre y suelte el campo añadido para colocarlo en segunda posición.

Introduzca después una dirección de correo electrónico y haga clic en el botón « Next » para pasar a la página siguiente y acceder al campo de la contraseña.

Haga clic en el botón type:inline de la acción password y seleccione el campo de la contraseña.

Añada después una acción con el botón type:inline, haga clic en el botón type:inline de la acción añadida y seleccione el botón « Connect ».

Haga clic en el botón type:inline para guardar la configuración en el portapapeles.

Formulario de conexión con campos aleatorios

Información

En esta sección se toma como ejemplo la configuración del SSO para una aplicación basada en GLPI.

Según la aplicación web, es posible que los identificadores de los campos del formulario de conexión se generen de forma aleatoria y que, por tanto, ya no coincidan en una nueva conexión.

Para saber si su aplicación genera aleatoriamente los identificadores de determinados campos, recupere una primera vez la configuración del formulario de conexión y péguela en un archivo de texto.

Vuelva a cargar después la página de conexión y recupere de nuevo la configuración del formulario. Péguela en otro archivo de texto.

Compare a continuación las dos configuraciones:

Configuración 1 Configuración 2
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
{
  "https://glpi.domain.local/index.php": {
    "login": {
      "id": "login_name",
      "name": "fielda67a46f7296fa6",
      "type": "text",
      "value": "",
      "order": 1,
      "objectType": "input",
      "tag": "input"
    },
    "password": {
      "id": "login_password",
      "name": "fieldb67a46f7296fa9",
      "type": "password",
      "value": "",
      "order": 2,
      "objectType": "input",
      "tag": "input"
    },
    "button": {
      "id": "",
      "name": "submit",
      "type": "submit",
      "value": "",
      "order": 3,
      "objectType": "button",
      "tag": "button"
    }
  }
}
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
{
  "https://glpi.domain.local/index.php": {
    "login": {
      "id": "login_name",
      "name": "fieldb78b57f83a70b7",
      "type": "text",
      "value": "",
      "order": 1,
      "objectType": "input",
      "tag": "input"
    },
    "password": {
      "id": "login_password",
      "name": "fieldc79b57083a70ba",
      "type": "password",
      "value": "",
      "order": 2,
      "objectType": "input",
      "tag": "input"
    },
    "button": {
      "id": "",
      "name": "submit",
      "type": "submit",
      "value": "",
      "order": 3,
      "objectType": "button",
      "tag": "button"
    }
  }
}

Observe que los elementos login y password tienen nombres diferentes: se trata, por tanto, de campos generados aleatoriamente. Para que la configuración funcione, modifíquela manualmente y elimine la etiqueta de los campos aleatorios:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
{
    "https://glpi.domain.local/index.php": {
        "login": {
            "id": "login_name",
            "name": "",
            "type": "text",
            "value": "",
            "order": 1,
            "objectType": "input",
            "tag": "input"
        },
        "password": {
            "id": "login_password",
            "name": "",
            "type": "password",
            "value": "",
            "order": 2,
            "objectType": "input",
            "tag": "input"
        },
        "button": {
            "id": "",
            "name": "submit",
            "type": "submit",
            "value": "",
            "order": 3,
            "objectType": "button",
            "tag": "button"
        }
    }
}

Crear la aplicación en CyberElements

Al crear la aplicación web en la consola CyberElements, active el SSO en la aplicación seleccionando la opción « Enabled », « Request » o « Fixed » en el menú desplegable.

Marque después la casilla « SSO on classic HTML forms ».

Por último, seleccione el tipo de SSO « Injection » y pegue en el campo « Injection settings » la configuración recuperada en la sección anterior.

El SSO queda configurado en su aplicación.