Plugin de connexion L2L - Configuration

Last updated: June 19, 2026

Le plugin de connexion L2L est l’un des composants du projet L2L Studio. L’objectif principal de ce plugin est de vous permettre d’utiliser L2L comme fournisseur SSO pour votre application L2L Studio. Cela vous permet de maintenir un niveau élevé de sécurité autour de vos données.

Ce guide expliquera comment ajouter le plugin de connexion L2L à n’importe quelle application Bubble.

Configuration du plugin de connexion L2L sur un projet existant

  1. Ajoutez le plugin L2L Login à votre application
  2. Activez l’API Workflow dans l’éditeur Bubble. Allez dans Paramètres → API et cochez la case située à côté de « Enable Workflow API and backend workflows. » Notez l’URL racine de l’API Workflow, car elle sera utilisée ultérieurement.
  3. Ajoutez un paramètre supplémentaire au type de données User. Allez dans l’onglet Données et cliquez sur le type de données « User ». Ajoutez le champ suivant avec le type indiqué :
    1. LoginError → texte
  4. Ajoutez un nouveau type de données pour contenir les variables utilisées pour la configuration de la connexion. Allez dans l’onglet Données et créez un nouveau type de données appelé « LoginConfig ». Sous le nouveau type de données LoginConfig, ajoutez les nouveaux champs suivants avec le type de données indiqué :
    1. AuthExpiresMinutes → nombre
    2. BubbleAppCertificate → texte
    3. BubbleAppPrivateKey → texte
    4. BubbleAppURL → texte
    5. CallbackURL → texte
    6. DispatchCertificate → texte
    7. DispatchServer → texte
  5. Ajoutez un nouveau type de données pour contenir les sessions utilisateur. Allez dans l’onglet Données et créez un nouveau type de données appelé « UserSession ». Ajoutez les champs suivants :
    1. AuthExpires → date
    2. NameId → texte
    3. UserUniqueId → texte
  6. Créez une nouvelle page en cas d’erreur de connexion.
    1. Appelez la nouvelle page « login_error »
    2. Créez un élément texte avec le contenu dynamique suivant : Current User’s LoginError
  7. Créez un nouveau workflow API pour gérer le rappel d’authentification du serveur L2L Dispatch.
    1. Dans l’éditeur Bubble, accédez au sélecteur de page et choisissez « Backend workflows ».
    2. Cliquez sur la zone en pointillés pour créer un nouveau workflow backend, choisissez « New API workflow… » et saisissez les éléments suivants dans la boîte de dialogue :
      1. Nom du workflow API : login_complete
      2. Exposer comme workflow API public : coché
      3. Ce workflow peut être exécuté sans authentification : coché
      4. Ignorer les règles de confidentialité lors de l’exécution du workflow : non coché
      5. Déclencher le workflow avec : POST
      6. Définition des paramètres : définition manuelle
      7. Ajouter un nouveau paramètre :
        1. Clé : SAMLResponse
        2. Type : texte
        3. Est une liste/tableau : non coché
        4. Facultatif : non coché
        5. Querystring : non coché
      8. Ajouter un nouveau paramètre :
        1. Clé : sessionid
        2. Type : texte
        3. Est une liste/tableau : non coché
        4. Facultatif : coché
        5. Querystring : coché
      9. Ajouter un nouveau paramètre :
        1. Clé : user_unique_id
        2. Type : texte
        3. Querystring : coché
      10. Type de réponse : redirection de page (302)
      11. Redirection en cas de succès : index
      12. Redirection en cas d’erreur : login_error
    3. Ajoutez une nouvelle action en cliquant sur la zone en pointillés contenant le texte « Click here to add an action… » et choisissez Action → Plugins → validate_response. Saisissez les éléments suivants dans la boîte de dialogue :
      1. Réponse : SAMLResponse
      2. Certificat Dispatch : Search for LoginConfigs:first item’s DispatchCertificate
      3. URL de l’application Bubble Search for LoginConfigs:first item’s BubbleAppURL
      4. Serveur Search for LoginConfigs:first item’s DispatchServer
    4. Ajoutez une autre action et choisissez Données (Things) → Créer une nouvelle chose...
      1. Dans la boîte de dialogue, choisissez UserSession comme Type
      2. Cliquez sur « Définir un autre champ » pour chacun des éléments suivants :
        1. AuthExpires = Current date/time +(minutes): Search for LoginConfigs:first item's AuthExpiresMinutes
        2. NameId = Result of step 1 (validate_response)’s Name ID
        3. UserUniqueId = user_unique_id
      3. Saisissez ce qui suit dans la section « Uniquement lorsque » : Result of step 1 (validate_response)’s Is Authenticated is “yes”
    5. Ajoutez une dernière action et choisissez Compte → Modifier l’utilisateur actuel.
      1. Dans la boîte de dialogue, cliquez sur « Modifier un autre champ » et saisissez ce qui suit : LoginError = Result of step 1 (validate_response)’s Error
  8. Ajoutez un nouveau workflow réutilisable qui sera utilisé pour forcer les utilisateurs à se connecter.
    1. Dans le sélecteur de page, cliquez sur « Ajouter un nouvel élément réutilisable… » et appelez le nouvel élément réutilisable : L2L Login
    2. Cliquez sur l’onglet Workflow
    3. Ajoutez un nouvel événement en cliquant sur la zone en pointillés appelée « Click here to add an event… » et cliquez sur Personnalisé → Créer un événement personnalisé…
    4. Saisissez les éléments suivants dans la boîte de dialogue :
      1. Nom de l’événement : L2L Login
      2. Uniquement lorsque : Search for UserSessions
      3. Dans la boîte Search for UserSessions, saisissez les éléments suivants :
        1. Type : UserSession
        2. Ajoutez les contraintes suivantes :
          1. UserUniqueId = CurrentUser's unique id
          2. AuthExpires > Current date/time
      4. Mettez à jour la section « Uniquement lorsque » dans la boîte L2L Login afin qu’elle affiche : Search for UserSessions:count is 0
      5. Ajoutez une nouvelle action en cliquant sur la zone en pointillés appelée « Click here to add an action… »
      6. Sélectionnez Plugins → get_l2l_login_url
      7. Dans la boîte de dialogue, saisissez les éléments suivants :
        1. Serveur Dispatch : Search for LoginConfigs:first item’s DispatchServer
        2. Clé privée de l’application Bubble : Search for LoginConfigs: first item’s BubbleAppPrivateKey
        3. Certificat de l’application Bubble : Search for LoginConfigs:first item’s BubbleAppCertificate
        4. URL de l’application Bubble : Search for LoginConfigs:first item’s BubbleAppURL
        5. URL de rappel* : Search for LoginConfigs:first item’s CallbackURL  
          1. *Pour la version 2.0.0 et les versions précédentes, utilisez l’expression suivante pour l’URL de rappel : Search for LoginConfigs:first item’s CallbackURL Arbitrary Text CurrentUser's unique id et saisissez le texte suivant pour l’entrée Arbitrary Text : ?user_unique_id=
        6. ID utilisateur unique : CurrentUser's unique id
    5. Ajoutez une nouvelle action en cliquant sur « Click here to add action… »
      1. Sélectionnez Navigation → Ouvrir un site Web externe
      2. Dans la boîte de dialogue, saisissez les éléments suivants :
        1. Destination : Result of step 1 (get_l2l_login_url)’s login_url
    6. Définissez la hauteur de l’élément réutilisable sur 0 afin de pouvoir l’ajouter à chaque page
      1. Accédez à l’onglet Design
      2. Sélectionnez la boîte blanche
      3. Dans la boîte de dialogue, sélectionnez l’onglet Apparence
      4. Définissez la hauteur sur : 0
  9. Ajoutez le workflow L2L Login à chaque page où l’authentification est requise. Ce guide vous montrera comment l’ajouter à la page index.
    1. Sélectionnez « index » dans le sélecteur de page et sélectionnez l’onglet Design
    2. Faites glisser L2L Login depuis la section Éléments réutilisables vers le haut de la page.
    3. Cliquez sur l’onglet Workflow
    4. Créez un nouvel événement en cliquant sur la boîte appelée « Click here to add an event… » et choisissez Général → La page est chargée
    5. Ajoutez une nouvelle action en cliquant sur la boîte appelée « Click here to add an action… »
    6. Choisissez Événements personnalisés → Déclencher un événement personnalisé depuis un élément réutilisable
    7. Dans la boîte de dialogue, saisissez les éléments suivants :
      1. Élément réutilisable : L2L Login A (ou le nom de votre nouvel élément)
      2. Événement personnalisé : L2L Login

Configurer l’application

  1. Ajouter un lien vers l’application Studio dans L2L Expédition
    1. Nous recommandons d’ajouter un lien vers la version de développement dans un site bac à sable, ainsi qu’un lien vers l’application Bubble Live dans vos sites de production. Pour la version de développement, veillez à ajouter /version-test/ à la fin de l’URL Bubble. Pour la version Live, veillez à ne pas l’ajouter.
  2. Créez un nouveau certificat auto-signé et une clé qui seront utilisés pour valider l’application Bubble avec le serveur L2L Expédition. Ceux-ci seront utilisés à l’étape 3.
  3. Téléchargez le certificat L2L.
  4. Saisissez les nouvelles données de l’application dans Bubble. Lors de la création de l’application, veillez à sélectionner la base de données de développement. Lors du déploiement en production, veillez à sélectionner la base de données Live.
    1. Accédez à l’onglet Data → App data, sélectionnez « All LoginConfigs », puis cliquez sur le bouton « New entry ».
    2. Saisissez les éléments suivants dans le nouveau formulaire :
      1. AuthExpiresMinutes → 720
        1. 720 minutes correspondent à 12 heures. Vous pouvez personnaliser ce champ selon ce qui convient à votre application.
      2. BubbleAppCertificate → Copiez-collez l’intégralité du contenu du fichier certificate.pem généré à l’étape 2.
      3. BubbleAppPrivateKey → Copiez-collez l’intégralité du contenu du fichier key.pem généré à l’étape 2.
      4. BubbleAppURL → Il s’agit de l’URL de l’application Bubble. Vous la trouverez dans l’éditeur Bubble sous Settings → Domain / email si vous disposez d’un domaine personnalisé. Si vous n’avez pas de domaine personnalisé, vous pouvez la trouver en cliquant sur le bouton « run » dans l’écran de la liste des applications Bubble. Supprimez tout sauf le domaine complet. Il se présentera comme suit : acme-app.bubbleapps.io
        1. Il sera identique dans vos bases de données Bubble Development et Live. N’ajoutez pas /version-test.
      5. CallbackURL → Une fois authentifié, L2L renverra le navigateur vers cette URL. Vous devrez construire cette URL. Commencez par copier l’URL qui se trouve dans l’écran Settings → API et qui s’appelle « Workflow API root URL ». Ajoutez ensuite « /login_complete » à la fin. Elle devrait se présenter comme suit : https://acme-app.bubbleapps.io/version-test/api/1.1/wf/login_complete
      6. DispatchCertificate → Il s’agit du certificat du serveur L2L Expédition. Celui-ci a été téléchargé à l’étape 3.
      7. DispatchServer → Il s’agit du serveur L2L Expédition du client. Veillez à inclure « https:// ». Il devrait se présenter comme suit : https://acme.leading2lean.com

Publier l’application

Maintenant que le plugin L2L a été ajouté, que les données et les flux de travail ont été définis et que l’application a été configurée, vous pouvez publier l’application. Certaines fonctionnalités de Bubble sont désactivées avant la publication, un abonnement doit donc être ajouté afin de tester complètement le plugin de connexion L2L.

Une fois l’application testée, vous devrez la configurer pour le site Live. Suivez simplement les étapes de la section "Configurer l’application" pour votre base de données Live.

Dépannage

Si vous rencontrez des erreurs dans l’application Bubble ou sur le serveur L2L, vérifiez les points suivants :

  • Vérifiez chacune des configurations de connexion afin de vous assurer qu’elles ne contiennent pas d’espaces supplémentaires ni de sauts de ligne.
  • Assurez-vous que l’URL de l’application Bubble dans votre configuration de connexion correspond à l’URL de la configuration de l’application L2L Studio.

Articles connexes