Configurer des portails personnalisés avec Okta Browser Plugin

Vous pouvez configurer Okta Browser Plugin afin qu'il se comporte dans votre portail personnalisé de la même façon que dans Okta End-User Dashboard.

Une fois le plug-in configuré, il informe votre portail personnalisé de sa présence. Vous pouvez configurer votre portail personnalisé afin qu'il détecte si le plug-in n'est pas installé et, le cas échéant, invite les utilisateurs finaux à l'installer.

Le plug-in effectue également les appels d'API suivants vers Okta afin de mettre à jour son état :

• /api/plugin/2/sites : cet appel récupère des informations sur la liste de sites sur votre portail personnalisé. Cette option est utile pour les scénarios SSO.
• /api/v1/users/me/home/tabs : cet appel récupère des informations sur l'emplacement des onglets et des applications sur le portail. Le plug-in utilise ces informations pour construire le menu Vos applications qui s'affiche lorsque les utilisateurs finaux cliquent sur l'icône bleue du plug-in.
• /api/internal/enduser/home : cet appel récupère des informations sur l'utilisateur actuellement connecté, telles que les paramètres du plug-in activés.
• /api/plugin/2/hashed-self-service-sites : cet appel récupère des informations utiles pour ajouter des applications en cas de besoin.

Configurer votre portail en tant qu'origine approuvée

Vous pouvez configurer votre portail en tant qu'origine approuvée pour les requêtes dirigées vers Okta Browser Plugin.

Utiliser un domaine parent spécifique

Utilisez un domaine parent spécifique pour une intégration d'un iFrame plus sécurisée.

1. Dans Admin Console, accédez à SécuritéAPI.

2. Cliquez sur l'onglet Origines approuvées.

3. Cliquez sur Ajouter une origine et configurez les paramètres.

   • Nom d'origine : saisissez un nom d'origine pour votre organisation.
   • URL d'origine : saisissez l'URL de l'origine que vous souhaitez approuver. Par exemple, https://votre.portail.personnalise.com.
   • Choisir le type : sélectionnez ces options d'intégration d'un iFrame
     • iFrame intégré : sélectionnez cette option pour autoriser l'intégration d'un iFrame des pages de connexion Okta et des URL à source unique.
     • Permet l'intégration d'iFrame dans le Okta End User Dashboard : sélectionnez cette option pour autoriser l'intégration d'un iFrame pour le End-User Dashboard
4. Cliquez sur Enregistrer.

Utilisez n'importe quel domaine parent

Utilisez n'importe quel domaine parent pour l'intégration d'un iFrame

1. Dans Admin Console, accédez à PersonnalisationsAutre.

2. Dans la section Intégration d'un IFrame, sélectionnez Autoriser l'intégration d'un iFrame.

Modifier votre portail personnalisé

Ensuite, configurez votre portail en tant qu'origine approuvée.

1. Modifiez le code HTML de votre portail personnalisé en ajoutant l'iFrame masqué suivant. Cela a pour effet d'envoyer une requête pluginVersion postMessage à l'iFrame lors du chargement de celui-ci :

   Copier

   <iframe id="okta-frame"
       style="display:none"
       src="https://example.okta.com/app/UserHome/plugin-info"
       onload="this.contentWindow.postMessage('pluginVersion', 'https://example.okta.com/app/UserHome/plugin-info')"/>

   Vous ne pouvez pas utiliser un domaine personnalisé dans src ou onload.

2. Ajoutez du code JavaScript à votre site pour gérer la réponse postMessage de l'iFrame. Par exemple :

   Copier

   window.addEventListener('message', function (event) {
     if (event.origin === 'https://example.okta.com' && 
         event.data && 
         event.data.detected) {
       doSomething(event.data.pluginVersion);
   }});
   

Fonctionnement

1. Okta Browser Plugin examine tous les frames sur la page pour détecter la présence d'un frame pour le formulaire https://*.okta.com/app/UserHome*. Le plug-in informe ensuite ce frame qu'il est installé.

2. Le serveur Okta reçoit la requête et vérifie que l'origine du propriétaire de l'iFrame est approuvée. Une fois la relation de confiance validée, le serveur Okta répond en fournissant une page JSP contenant le code JavaScript. Ce code répond aux requêtes postMessage provenant d'une origine approuvée avec le fichier JSON suivant :

   Copier

   {
     detected: true/false
     pluginVersion: x.y.z // if plugin is present
   }

3. Le plug-in détecte qu'il se trouve sur un point de terminaison /app/UserHome/plugin-info qui s'est chargé correctement. Il met ensuite son état à jour en conséquence en effectuant les quatre appels API à Okta comme décrit précédemment.

4. Un code semblable à ce qui suit gère la réponse postMessage de l'iFrame :

   Copier

   window.addEventListener('message', function (event) {
     if (event.origin === 'https://example.okta.com' &&
         event.data && 
         event.data.detected) {
       doSomething(event.data.pluginVersion);
     }
   });

Considérations de sécurité

Okta requiert une session authentifiée pour cette fonctionnalité.

L'accès est refusé pour le point de terminaison /plugin-info si les conditions suivantes sont réunies :

• Aucune origine approuvée n'a été définie par l'administrateur ;
• Le référent de la requête (par exemple, le frame parent) ne figure pas dans la liste des origines approuvées définie par l'administrateur.

Configurer un exemple pleinement fonctionnel

Pour voir un exemple fonctionnel de cette fonctionnalité, créez un serveur Web local (par exemple, un serveur node.js) afin d'héberger une page HTML simple.

Dans l'exemple suivant, la page est hébergée sur https://example.com.

<leve>
<head>
     <script>
       window.addEventListener('message', function (event) {
        if (event.origin === 'https://example.okta.com' &&
              event.data &&
              event.data.detected) {
            document.getElementById('pluginVersion').innerHTML = event.data.pluginVersion;
        }
      });
    </script>
</head>
<body>
  Plugin Detected: <b><span id="pluginVersion"></span></b>
  <iframe id="okta-frame"
          style="display:none"
          src="https://example.okta.com/app/UserHome/plugin-info"
          onload="this.contentWindow.postMessage('pluginVersion', 'https://example.okta.com/app/UserHome/plugin-info')"/>
</body>
<html>