Configurer l'app de modèle d'Okta et l'app de modèle de plug-in d'Okta

Les apps de modèle vous permettent de créer des intégrations d'application en temps réel sur un système en cours d'exécution.

Pour créer des apps personnalisées, faites votre choix parmi ces apps de modèle courantes Secure Web Authentication (SWA) :

  • App modèle : si l'app prend en charge l'authentification par formulaire POST
  • App plugin modèle : à utiliser si la page du site de l'app possède les champs nom d'utilisateur, mot de passe ou bouton Envoyer
  • App modèle 3 champs : similaire à l'app plugin modèle. Si la page d'une app comporte d'autres champs, tels que ID d'entreprise
  • App plugin modèle 2 pages : également similaire à l'app plugin modèle. Si le flux de connexion est réparti sur deux pages distinctes. Ce modèle ne prend pas en charge l'envoi automatique du plug-in de navigateur
  • App de modèle d'authentification Basic : si l'app prend en charge l'authentification Basic
  • App de modèle de plug-in de cadre : si l'app prend en charge les IFrames

Procédure

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

  2. Cliquez sur Parcourir le catalogue d'applications.
  3. Chercher Modèle.
  4. À partir des résultats de la recherche, ajoutez le type d'application modèle souhaité :

Application modèle

Utilisez l'app modèle si l'app prend en charge l'authentification par formulaire POST vers l'URL spécifiée. Elle contient le nom d'utilisateur et le mot de passe d'un utilisateur grâce aux paramètres nommés et aux champs statiques que vous fournissez.

Saisissez les informations sur la page Paramètres généraux.

  • URL : saisissez l'URL du formulaire de connexion vers laquelle vous envoyez les données par la méthode POST (et non l'URL où le formulaire s'affiche).
  • Champs Paramètre de nom d'utilisateur et Paramètre de mot de passe : saisissez les noms de paramètres qui contiennent les données du nom d'utilisateur et du mot de passe.
  • Champs Paramètre facultatif : saisissez les données de champ statiques supplémentaires dans les paires nom/valeur.
    • Dans Chrome, connectez-vous à l'app que vous souhaitez intégrer.
    • Utilisez les outils de développement Chrome pour afficher le trafic envoyé vers cette page.
    • Ouvrez la page qui contient le formulaire de connexion cible, puis passez sur l'onglet Réseau.
    • Cochez la case Conserver le journal.
    • Effacez le trafic existant et ouvrez votre session.
    • Dans l'onglet En-têtes, cliquez sur le POST vers la page pour consulter toutes les données postées, ainsi que pour consulter l'URL vers laquelle elles sont envoyées.
  • Visibilité de l'application : indiquez si vous souhaitez rendre l'icône de l'application visible aux utilisateurs.
  • Envoi automatique du plug-in de navigateur : indiquez si vous souhaitez connecter automatiquement les utilisateurs lorsqu'ils arrivent sur la page de connexion.

App plugin modèle/App modèle 3 champs/App plugin modèle 2 pages/App plugin modèle Frame

Savoir quand utiliser l'application de modèle de plug-in ou l'application de modèle de plug-in à 3 champs

Si l'app dispose d'une protection contre la falsification de requêtes intersites (XSRF ou CSRF), vous devrez utiliser l'app plugin modèle ou l'app de modèle de plug-in à 3 champs. Pour le savoir, inspectez la page pour voir si le serveur a généré un jeton CSRF. Cherchez également les champs tels que EVENTVALIDATION ou FORMVALIDATION, qui sont générés sur les pages ASP. Le cas échéant, il est nécessaire d'utiliser l'app plugin modèle.

Lorsque vous configurez une app plugin modèleou une app plugin modèle Frame, vous fournissez les sélecteurs CSS dans les champs concernés, car le plug-in est utilisé pour remplir ces champs.

Saisissez les informations sur la page Paramètres généraux.

  • Libellé de l'application : saisissez le libellé que vous souhaitez afficher sous l'app sur la page d'accueil des utilisateurs finaux.
  • URL de connexion : saisissez l'URL du formulaire de connexion (l'URL réelle où vous pouvez voir le formulaire).
  • URL de cadre : saisissez l'URL de cadre (l'URL qui contient le cadre)
  • URL de redirection : si l'accès à l'URL de la page de connexion redirige vers une autre page, saisissez cette URL ici.
  • Expression régulière : (facultatif) cela vous permet de créer une expression régulière qui fera office de liste d'autorisations. Cela permet d'améliorer la sécurité des apps en limitant l'accès aux URL qui correspondent au modèle que vous définissez. Par exemple, si votre URL de connexion est https://example.com/login et que l'URL de changement de mot de passe est https://example.com/change_password, vous pourrez alors créer une expression régulière qui correspond : https://example.com/(login|change_password).
  • Champ du nom d'utilisateur : saisissez le sélecteur CSS pour le champ du nom d'utilisateur.
  • Champ de mot de passe : saisissez le sélecteur CSS pour le champ de mot de passe.
  • Bouton de connexion : saisissez le sélecteur CSS pour le bouton de connexion.
  • Case à cocher : saisissez le sélecteur CSS pour la case à cocher (par exemple la case à cocher pour l'option Se souvenir de moi, Accepter les conditions, etc.).
  • Bouton Suivant : saisissez le sélecteur CSS pour le bouton Suivant, qui vous redirige vers la page suivante.
  • Sélecteur du champ supplémentaire : saisissez le sélecteur CSS pour le champ supplémentaire.
  • Valeur du champ supplémentaire : saisissez la valeur pour le champ supplémentaire.
  • Les champs que vous voyez dépendent du type de modèle que vous configurez.
  • Si aucun champ d'expression régulière n'est rempli, Okta génère une expression régulière sécurisée à partir de l'URL de connexion qui omet le chemin d'accès de l'URL. Par exemple, si vous indiquez https://www.example.com/login, l'expression régulière générée par Okta est :(?:^https://example\.com(?:$|/)).

    Le chemin de connexion est omis, des caractères d'échappement sont ajoutés à l'URL et l'URL qui en résulte des éléments suivants est entouré : (?:^ et (?:$|/)).

Trouver les champs de sélecteur CSS

Lorsque vous configurez une app plugin modèle, vous fournissez les sélecteurs CSS dans les champs concernés, car le plug-in est utilisé pour remplir ces champs.

Pour déterminer quels sont les sélecteurs CSS, inspectez les éléments individuels d'une page. Grâce aux outils de développement Chrome :

  1. Ouvrez la page qui contient le formulaire de connexion cible.
  2. Effectuez un clic droit sur un champ de saisie ou un bouton et sélectionnez l'option Inspect (Inspecter) pour afficher l'élément DOM (Document Object Model) réel. Dans l'onglet Éléments, affichez les attributs id et class de l'élément et, à l'aide de ces informations, créez un sélecteur CSS.

Il est possible que vous ayez besoin de la hiérarchie complète lorsque vous ne pouvez pas identifier de façon unique les éléments par les attributs id ou class. Pour la page de connexion d'Okta, les sélecteurs seraient les suivants :

  • Nom d'utilisateur : #okta-signin-username

  • Mot de passe : #okta-signin-password

  • Bouton : #okta-signin-submit

Dans les cas où l'app utilise uniquement un attribut name et n'utilise pas d'attribut id pour le nom d'utilisateur, le mot de passe et le bouton Envoyer, vous pouvez essayer d'utiliser input[type="text"]. Par exemple, vous pouvez utiliser input[type="password"] pour un mot de passe et input[type="submit"] pour un bouton Envoyer. D'autres attributs peuvent être interrogés : par exemple, input[class="btn"] en tant qu'alternative pour indiquer un bouton Envoyer.

Cas dans lesquels l'app plugin modèle ne fonctionne pas

L'app plugin modèle est inefficace pour les sites qui :

  • Contiennent beaucoup de création HTML dynamique. Il est possible que cette approche entraîne des défaillances sur ce genre de sites, car les éléments recherchés par le plug-in ne sont pas présents lorsque le plug-in se déclenche.
  • Exigent un paramètre qui ne se limite pas qu'au nom d'utilisateur et au mot de passe. Utilisez l'app plugin modèle à 3 champs si le paramètre est statique et ne change pas.
  • Comportent plusieurs étapes dans le processus de connexion ou chargent plusieurs pages entre l'URL initiale et la page qui contient le formulaire.

Vous pouvez résoudre les situations précédentes grâce à une intégration de plug-in, mais pas dans le contexte de l'App plugin modèle. Dans ce cas-là, vous devrez manuellement saisir l'intégration d'app. Contactez les services professionnels d'Okta pour discuter du prix de l'app.

Application de modèle d'authentification Basic

Utilisez ce modèle si votre app prend en charge l'authentification de base.

  • Libellé de l'application : saisissez le libellé à afficher sous l'app sur la page d'accueil des utilisateurs finaux.
  • URL : saisissez l'URL du formulaire de connexion (l'URL réelle où vous pouvez voir le formulaire).
  • URL d'authentification : saisissez l'URL du site d'authentification de l'app.
  • Visibilité de l'application : indiquez si vous souhaitez rendre l'icône de l'application visible aux utilisateurs.
  • Envoi automatique du plug-in de navigateur : indiquez si vous souhaitez connecter automatiquement les utilisateurs lorsqu'ils arrivent sur la page de connexion.

Problème connu

L'app plugin modèle ne peut pas fonctionner dans les cas où la page de connexion de l'app redirige les utilisateurs vers leur URL de provenance, car cela crée une boucle infinie. L'application SWA doit rediriger l'utilisateur vers la page d'accueil du site Web, et non vers la page de connexion. Cela signifie que la page de connexion accepte les identifiants de l'utilisateur avant de le rediriger vers la page d'accueil Okta.

Rubrique liée

Configurer le modèle de l'application WS-Federation d'Okta