Configurarea injecției SSO pe aplicațiile web cu instrumentul CyberElements SSO Configurator¶

Astăzi, configurarea SSO (Single Sign-On) pe aplicațiile web se confruntă cu o diversitate și o complexitate crescânde ale formularelor de conectare, ceea ce înseamnă că configurarea trebuie stabilită manual la crearea aplicației web în consolă.

Pentru a depăși această limitare, echipa noastră a dezvoltat o extensie CyberElements SSO Configurator care permite preluarea cu ușurință a configurării de pe pagina de conectare.

Instalarea extensiei¶

Extensia CyberElements SSO Configurator este compatibilă cu browserele bazate pe Chromium (Google Chrome, Opera GX, Microsoft Edge etc.) și cu Firefox.

Browsere bazate pe ChromiumFirefox

Descărcați arhiva .zip din modulul Toolbox al consolei de administrare și dezarhivați-o.

Accesați modulul de gestionare a extensiilor.
Faceți clic pe butonul „Load unpacked extension”.

Informație

Dacă butonul „Load unpacked extension” nu este vizibil, verificați dacă modul dezvoltator este activat.

Selectați folderul dezarhivat.
Faceți clic pe butonul „Add” din fereastra pop-up care apare în browser.
Extensia este adăugată în browserul dumneavoastră.

Descărcați fișierul .xpi din modulul Toolbox al consolei de administrare.

Deschideți acest fișier făcând dublu clic pe fișierul descărcat.
Se deschide o fereastră Firefox și apare o fereastră pop-up care întreabă dacă doriți să adăugați extensia. Faceți clic pe butonul „Add”.
Extensia este adăugată în browserul dumneavoastră.

Preluarea configurării SSO web cu CyberElements SSO Configurator¶

Formular de conectare simplu¶

Informație

În această secțiune vom folosi ca exemplu configurarea SSO pentru site-ul MySystancia.

Începeți prin a accesa formularul de conectare al aplicației dumneavoastră web.

Lansați apoi extensia făcând clic pe butonul .

Extensia se lansează într-un panou în partea stângă a browserului.

Extensia identifică automat câmpurile corespunzătoare numelui de utilizator, parolei și butonului „Log in” și evidențiază câmpurile corespunzătoare.

Verificați dacă câmpurile detectate sunt corecte și faceți clic pe butonul pentru a salva configurarea în clipboard.

Formular de conectare cu mai multe pagini¶

Informație

În această secțiune vom folosi ca exemplu configurarea SSO pentru aplicația Microsoft Outlook.

Formularele de conectare ale aplicațiilor web Microsoft sunt mai complexe și sunt repartizate pe mai multe pagini. Va trebui, prin urmare, să adaptăm configurarea detectată de extensia CyberElements SSO Configurator.

Începeți prin a accesa formularul de conectare al aplicației dumneavoastră web.

Lansați apoi extensia făcând clic pe butonul .

Extensia se lansează într-un panou în partea stângă a browserului.

Extensia identifică automat câmpurile corespunzătoare numelui de utilizator, parolei și butonului „Log in” și evidențiază câmpurile corespunzătoare.

În exemplul nostru, doar câmpul de identificator este prezent pe prima pagină.

Observați că butonul „Log in” nu a fost detectat corect și indică legătura de creare a contului. Faceți clic pe pictograma a acțiunii button și selectați butonul „Next”.

Deoarece configurarea funcționează pe același principiu ca un script, trebuie apoi să mutăm acțiunea creată înaintea câmpului de parolă. Trageți și plasați câmpul adăugat pe a doua poziție.

Introduceți apoi o adresă de e-mail și faceți clic pe butonul „Next” pentru a trece la pagina următoare și a accesa câmpul de parolă.

Faceți clic pe butonul al acțiunii password și selectați câmpul de parolă.

Adăugați apoi o acțiune cu butonul , faceți clic pe butonul al acțiunii adăugate și selectați butonul „Connect”.

Faceți clic pe butonul pentru a salva configurarea în clipboard.

Formular de conectare cu câmpuri aleatorii¶

Informație

În această secțiune vom folosi ca exemplu configurarea SSO pentru o aplicație bazată pe GLPI.

În funcție de aplicația web, este posibil ca identificatorii câmpurilor formularului de conectare să fie generați aleatoriu și, prin urmare, să nu mai corespundă la o nouă conectare.

Pentru a afla dacă aplicația dumneavoastră generează aleatoriu identificatorii anumitor câmpuri, preluați o primă dată configurarea formularului de conectare și lipiți-o într-un fișier text.

Reîncărcați apoi pagina de conectare și preluați din nou configurarea formularului de conectare. Lipiți-o în alt fișier text.

Comparați apoi cele două configurări:

Configurare 1 Configurare 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"
    }
  }
}

Observați că elementele login și password au nume diferite, ceea ce înseamnă că sunt câmpuri generate aleatoriu. Pentru ca configurarea să funcționeze, modificați-o manual și ștergeți eticheta câmpurilor aleatorii:

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

Crearea aplicației în CyberElements¶

La crearea aplicației web în consola CyberElements, activați SSO pe aplicație selectând opțiunea „Enabled”, „Request” sau „Fixed” din meniul derulant.

Bifați apoi caseta „SSO on classic HTML forms”.

În final, selectați tipul de SSO „Injection” și lipiți în câmpul „Injection settings” configurarea preluată în secțiunea anterioară.

SSO este acum configurat pe aplicația dumneavoastră.