Configurer le SSO par injection sur des applications web avec l'outil Cyberelements SSO Configurator¶

De nos jours, la configuration du SSO (Single Sign-On) sur des applications web se confronte à une augmentation de la diversité et de la complexité des formulaires de connexion, ce qui implique de devoir paramétrer la configuration à la main lors de la création de l'application web dans la console.

Pour pallier cette limite, notre équipe a developpé l'extension Cyberelements SSO Configurator pour récupérer facilement la configuration depuis la page de connexion.

Installation de l'extension¶

L'extension Cyberelements SSO Configurator se présente sous la forme d'une extension compatible avec les navigateurs basés sur Chromium (Google Chrome, Opera GX, Microsoft Edge, etc.) et sur Firefox.

Navigateurs basés sur ChromiumFirefox

Téléchargez l'archive .zip depuis la Toolbox de la console d'administration et décompressez-la.

Rendez-vous dans la module de gestion des extensions.
Cliquez sur le bouton « Charger l'extension non empaquetée ».

Information

Si le bouton « Charger l'extension non empaquetée » n'est pas visible, vérifiez que le mode développeur est activé.

Sélectionnez le dossier décompressé.
Cliquez sur le bouton « Ajouter » dans le pop-up qui apparaît dans le navigateur.
L'extension est ajoutée à votre navigateur.

Téléchargez le fichier .xpi depuis la Toolbox de la console d'administration.

Ouvrez ce fichier en double-cliquant sur le fichier téléchargé.
Une fenêtre firefox s'ouvre et un pop-up vous demandant si vous souhaitez ajouter l'extension apparaît. Cliquez sur le bouton « Ajouter ».
L'extension est ajoutée à votre navigateur.

Récupération de la configuration du Web SSO à l'aide de Cyberelements SSO Configurator¶

Formulaire de connexion simple¶

Information

Dans cette section, nous utiliserons l'exemple d'une configuration SSO au site MySystancia.

Commencez par vous rendre sur le formulaire de connexion de votre application web.

Puis lancez l'extension en cliquant sur le bouton .

L'extension se lance dans une bannière sur la gauche de votre navigateur.

L'extension identifie automatiquement les champs correspondant à l'identifiant, au mot de passe et au bouton « Se connecter » et colore les champs correspondants.

Contrôlez que les champs détectés soient bons et cliquez sur le bouton pour sauvegarder la configuration dans le presse-papier.

Formulaire de connexion sur plusieurs pages¶

Information

Dans cette section, nous utiliserons l'exemple d'une configuration SSO à l'application Microsoft Outlook.

Les formulaires de connexion des applications web Microsoft sont plus complexes et sont répartis sur plusieurs pages. Il va donc falloir adapter la configuration détectée par l'extension Cyberelements SSO Configurator.

Commencez par vous rendre sur le formulaire de connexion de votre application web.

Puis lancez l'extension en cliquant sur le bouton .

L'extension se lance dans une bannière sur la gauche de votre navigateur.

L'extension identifie automatiquement les champs correspondant à l'identifiant, au mot de passe et au bouton « Se connecter » et colore les champs correspondants.

Dans notre exemple, seul le champ identifiant est présent sur la première page.

On remarque que le bouton « Se connecter » n'a pas été bien détecté et pointe sur le lien de création de compte. Cliquez sur l'icône de l'action button puis sélectionnez le bouton « Suivant ».

La configuration fonctionnant sur le même principe qu'un script, il nous faut ensuite déplacer l'action créée avant le champ du mot de passe. Effectuez un glisser-déposer et positionnez le champ ajouté en seconde position.

Entrez ensuite une adresse email puis cliquez sur le bouton « Suivant » pour passer à la prochaine page et avoir accès au champ de mot de passe.

Cliquez sur le bouton de l'action password puis sélectionnez le champ de mot de passe.

Ajoutez ensuite une action avec le bouton puis cliquez sur le bouton de l'action ajoutée et sélectionnez le bouton « Se connecter ».

Cliquez sur le bouton pour sauvegarder la configuration dans le presse-papier.

Formulaire de connexion avec champs aléatoires¶

Information

Dans cette section, nous utiliserons l'exemple d'une configuration SSO à une application basée sur GLPI.

Suivant l'application web, il est possible que les identifiants des champs du formulaire de connexion soient générés aléatoirement et qu'ils ne correspondront donc plus lors d'une nouvelle connexion.

Pour savoir si votre application génère aléatoirement les identifiants de certains champs, récupérez la configuration du formulaire de connexion une première fois puis collez-la dans un fichier texte.

Puis, rechargez la page de connexion et récupérez une nouvelle fois la configuration du formulaire de connexion. Collez-la dans un autre fichier texte.

Comparez ensuite les deux configurations :

Configuration 1 Configuration 2

{
  "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"
    }
  }
}

{
  "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"
    }
  }
}

On remarque que les éléments login et password ont un nom différent, ce sont donc des champs générés aléatoirement.

Pour que la configuration fonctionne, éditez-la à la main et supprimez le label des champs aléatoires :

{
    "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"
        }
    }
}

Création de l'application dans cyberelements¶

Lors de la création de l'application web dans la console cyberelements, activez le SSO sur l'application en sélectionnant l'option « Activé », « Demander » ou « Fixe » dans le menu déroulant.

Puis, cochez la case « SSO sur des formulaires HTML classiques ».

Enfin, sélectionnez le type de SSO « Injection » et collez la configuration récupérée dans la section précédente dans le champ « Paramètres d'injection ».

Le SSO est maintenant configuré sur votre application.