L2L Inloggen-plug-in - Instellen

Last updated: June 19, 2026

De L2L Inloggen-plugin is een van de onderdelen van het L2L Studio-project. Het belangrijkste doel van deze plugin is om je L2L te laten gebruiken als een SSO-provider voor je L2L Studio-app. Hiermee kun je een hoog beveiligingsniveau voor je gegevens handhaven.

Deze handleiding legt uit hoe je de L2L Inloggen-plugin aan elke Bubble-app kunt toevoegen.

De L2L Inloggen-plugin configureren in een bestaand project

  1. Voeg de L2L Login plug-in toe aan je app
  2. Schakel de Workflow API in de Bubble-editor in. Ga naar Instellingen → API en klik op het selectievakje naast “Workflow API en backend-workflows inschakelen.” Noteer de basis-URL van de Workflow API, aangezien deze later wordt gebruikt.
  3. Voeg een extra parameter toe aan het gegevenstype User. Ga naar het tabblad Data en klik op het gegevenstype “User”. Voeg het volgende veld met het aangegeven type toe:
    1. LoginError → tekst
  4. Voeg een nieuw gegevenstype toe voor variabelen die voor de inlogconfiguratie worden gebruikt. Ga naar het tabblad Data en maak een nieuw gegevenstype met de naam “LoginConfig”. Voeg onder het nieuwe gegevenstype LoginConfig de volgende nieuwe velden met het aangegeven gegevenstype toe:
    1. AuthExpiresMinutes → getal
    2. BubbleAppCertificate → tekst
    3. BubbleAppPrivateKey → tekst
    4. BubbleAppURL → tekst
    5. CallbackURL → tekst
    6. DispatchCertificate → tekst
    7. DispatchServer → tekst
  5. Voeg een nieuw gegevenstype toe voor User Sessions. Ga naar het tabblad Data en maak een nieuw gegevenstype met de naam "UserSession". Voeg de volgende velden toe:
    1. AuthExpires → datum
    2. NameId → tekst
    3. UserUniqueId → tekst
  6. Maak een nieuwe pagina voor het geval van een inlogfout.
    1. Noem de nieuwe pagina “login_error”
    2. Maak een tekstelement met de volgende dynamische inhoud: Current User’s LoginError
  7. Maak een nieuwe API-workflow voor het afhandelen van de authenticatiecallback van de L2L Dispatch-server.
    1. Ga in de Bubble-editor naar de paginakiezer en kies “Backend-workflows.”
    2. Klik op het gestippelde vak om een nieuwe backend-workflow te maken, kies “New API workflow…” en voer het volgende in het dialoogvenster in:
      1. Naam API-workflow: login_complete
      2. Beschikbaar stellen als openbare API-workflow: ingeschakeld
      3. Deze workflow kan zonder authenticatie worden uitgevoerd: ingeschakeld
      4. Privacyregels negeren bij het uitvoeren van de workflow: niet ingeschakeld
      5. Workflow activeren met: POST
      6. Parameterdefinitie: Handmatige definitie
      7. Een nieuwe parameter toevoegen:
        1. Sleutel: SAMLResponse
        2. Type: tekst
        3. Is een lijst/array: niet ingeschakeld
        4. Optioneel: niet ingeschakeld
        5. Querystring: niet ingeschakeld
      8. Een nieuwe parameter toevoegen:
        1. Sleutel: sessionid
        2. Type: tekst
        3. Is een lijst/array: niet ingeschakeld
        4. Optioneel: ingeschakeld
        5. Querystring: ingeschakeld
      9. Een nieuwe parameter toevoegen:
        1. Sleutel: user_unique_id
        2. Type: tekst
        3. Querystring: ingeschakeld
      10. Responstype: Paginadoorverwijzing (302)
      11. Doorverwijzing bij succes: index
      12. Doorverwijzing bij fout: login_error
    3. Voeg een nieuwe actie toe door op het gestippelde vak met de tekst “Klik hier om een actie toe te voegen…” te klikken en kies Actie → Plug-ins → validate_response. Voer het volgende in het dialoogvenster in:
      1. Response: SAMLResponse
      2. Dispatch-certificaat: Search for LoginConfigs:first item’s DispatchCertificate
      3. Bubble-app-URL Search for LoginConfigs:first item’s BubbleAppURL
      4. Server Search for LoginConfigs:first item’s DispatchServer
    4. Voeg nog een nieuwe actie toe en kies Data (dingen) → Een nieuw ding maken...
      1. Kies in het dialoogvenster UserSession voor het Type
      2. Klik voor elk van de volgende velden op "Nog een veld instellen":
        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. Voer het volgende in het gedeelte “Alleen wanneer” in: Result of step 1 (validate_response)’s Is Authenticated is “yes”
    5. Voeg nog een nieuwe actie toe en kies Account → Wijzigingen aanbrengen in huidige gebruiker.
      1. Klik in het dialoogvenster op “Nog een veld wijzigen” en voer het volgende in: LoginError = Result of step 1 (validate_response)’s Error
  8. Voeg een nieuwe herbruikbare workflow toe die wordt gebruikt om gebruikers te dwingen in te loggen.
    1. Klik in de paginakiezer op “Een nieuw herbruikbaar element toevoegen…” en noem het nieuwe herbruikbare element: L2L Login
    2. Klik op het tabblad Workflow
    3. Voeg een nieuwe gebeurtenis toe door op het gestippelde vak “Klik hier om een gebeurtenis toe te voegen…” te klikken en klik op Aangepast → Een aangepaste gebeurtenis maken…
    4. Voer het volgende in het dialoogvenster in:
      1. Naam gebeurtenis: L2L Login
      2. Alleen wanneer: Search for UserSessions
      3. Voer in het vak Zoeken naar UserSessions het volgende in:
        1. Type: UserSession
        2. Voeg de volgende voorwaarden toe:
          1. UserUniqueId = CurrentUser's unique id
          2. AuthExpires > Current date/time
      4. Werk het gedeelte Alleen wanneer in het vak L2L Login bij zodat het luidt: Search for UserSessions:count is 0
      5. Voeg een nieuwe actie toe door op het gestippelde vak “Klik hier om een actie toe te voegen…” te klikken
      6. Selecteer Plug-ins → get_l2l_login_url
      7. Voer het volgende in het dialoogvenster in:
        1. Dispatch-server: Search for LoginConfigs:first item’s DispatchServer
        2. Privésleutel van Bubble-app: Search for LoginConfigs: first item’s BubbleAppPrivateKey
        3. Certificaat van Bubble-app: Search for LoginConfigs:first item’s BubbleAppCertificate
        4. URL van Bubble-app: Search for LoginConfigs:first item’s BubbleAppURL
        5. Callback-URL*: Search for LoginConfigs:first item’s CallbackURL  
          1. *Voor versie 2.0.0 en eerder gebruik je de volgende expressie voor de Callback-URL: Search for LoginConfigs:first item’s CallbackURL Arbitrary Text CurrentUser's unique id en voer je de volgende tekst in voor de invoer voor willekeurige tekst: ?user_unique_id=
        6. Unieke gebruikers-ID: CurrentUser's unique id
    5. Voeg een nieuwe actie toe door op “Klik hier om een actie toe te voegen…” te klikken
      1. Selecteer Navigatie → Een externe website openen
      2. Voer het volgende in het dialoogvenster in:
        1. Bestemming: Result of step 1 (get_l2l_login_url)’s login_url
    6. Stel de hoogte van het herbruikbare element in op 0 zodat het aan elke pagina kan worden toegevoegd
      1. Ga naar het tabblad Ontwerp
      2. Selecteer het witte vak
      3. Selecteer in het dialoogvenster het tabblad Uiterlijk
      4. Stel de hoogte in op: 0
  9. Voeg de L2L Login-workflow toe aan elke pagina waarvoor authenticatie vereist is. Deze handleiding laat zien hoe je deze aan de indexpagina toevoegt.
    1. Selecteer “index” in de paginakiezer en selecteer het tabblad Ontwerp
    2. Sleep L2L Login vanuit het gedeelte Herbruikbare elementen naar de bovenkant van de pagina.
    3. Klik op het tabblad Workflow
    4. Maak een nieuwe gebeurtenis door op het vak “Klik hier om een gebeurtenis toe te voegen…” te klikken en kies Algemeen → Pagina is geladen
    5. Voeg een nieuwe actie toe door op het vak “Klik hier om een actie toe te voegen…” te klikken
    6. Kies Aangepaste gebeurtenissen → Een aangepaste gebeurtenis van een herbruikbaar element activeren
    7. Voer het volgende in het dialoogvenster in:
      1. Herbruikbaar element: L2L Login A (of hoe je nieuwe element ook heet)
      2. Aangepaste gebeurtenis: L2L Login

De app configureren

  1. Een link naar de Studio-app toevoegen in L2L Verzenden
    1. We raden aan een link op een sandboxsite naar de ontwikkelversie toe te voegen en een link naar de Live Bubble-app op uw productiesites. Voeg voor de ontwikkelversie /version-test/ toe aan het einde van de Bubble-URL. Laat dit voor de Live-versie weg.
  2. Maak een nieuw zelfondertekend certificaat en een sleutel die worden gebruikt om de Bubble-app met de L2L Dispatch-server te valideren. Deze worden gebruikt in stap 3.
  3. Download het L2L-certificaat.
  4. Voer nieuwe appgegevens in Bubble in. Selecteer tijdens het bouwen van de app de Development-database. Selecteer bij het implementeren naar Live de Live-database.
    1. Ga naar het tabblad Data → App data, selecteer “All LoginConfigs” en klik vervolgens op de knop “New entry”.
    2. Voer het volgende in het nieuwe formulier in:
      1. AuthExpiresMinutes → 720
        1. 720 minuten is 12 uur. U kunt ervoor kiezen dit veld aan te passen aan wat voor uw app logisch is.
      2. BubbleAppCertificate → Kopieer/plak de volledige inhoud van het bestand certificate.pem dat in stap 2 is gegenereerd.
      3. BubbleAppPrivateKey → Kopieer/plak de volledige inhoud van het bestand key.pem dat in stap 2 is gegenereerd.
      4. BubbleAppURL → Dit is de URL van de Bubble-app. Deze is te vinden in de Bubble Editor onder Settings → Domain / email als u een aangepast domein hebt. Als u geen aangepast domein hebt, kunt u deze vinden door op de knop “run” te klikken in het scherm met de Bubble-apps. Verwijder alles behalve het volledige domein. Het ziet er als volgt uit: acme-app.bubbleapps.io
        1. Deze is hetzelfde in zowel uw Development- als Live-Bubble-databases. Voeg /version-test niet toe.
      5. CallbackURL → Na authenticatie stuurt L2L de browser terug naar deze URL. U moet deze URL samenstellen. Begin met het kopiëren van de URL in het scherm Settings → API met de naam “Workflow API root URL”. Voeg vervolgens “/login_complete” toe aan het einde. De URL moet er als volgt uitzien: https://acme-app.bubbleapps.io/version-test/api/1.1/wf/login_complete
      6. DispatchCertificate → Dit is het certificaat van de L2L Dispatch-server. Dit is gedownload in stap 3.
      7. DispatchServer → Dit is de L2L Dispatch-server van de klant. Voeg “https://” toe. De URL moet er als volgt uitzien: https://acme.leading2lean.com

De app publiceren

Nu de L2L Plugin is toegevoegd, de gegevens en workflows zijn gedefinieerd en de app is geconfigureerd, kunt u de app publiceren. Sommige Bubble-functies zijn uitgeschakeld voordat u publiceert, dus er moet een abonnement worden toegevoegd om de L2L Inloggen-plugin volledig te kunnen testen.

Nadat de app is getest, moet u de app configureren voor de Live-site. Volg hiervoor eenvoudig de stappen in het gedeelte "De app configureren" voor uw Live-database.

Probleemoplossing

Als u fouten krijgt in de Bubble-app of op de L2L-server, controleer dan het volgende:

  • Controleer elk van de Inlogconfiguraties op extra spaties of nieuwe regels.
  • Controleer of de Bubble-app-URL van uw Inlogconfiguratie overeenkomt met de URL van de L2L Studio-appconfiguratie.

Gerelateerde artikelen