Plugin de autentificare L2L - Configurare

Last updated: June 19, 2026

Pluginul L2L Autentificare este unul dintre componentele proiectului L2L Studio. Scopul principal al acestui plugin este să vă permită să utilizați L2L ca furnizor SSO pentru aplicația dumneavoastră L2L Studio. Acest lucru vă permite să mențineți un nivel înalt de securitate pentru datele dumneavoastră.

Acest ghid va explica cum să adăugați pluginul L2L Autentificare la orice aplicație Bubble.

Configurarea pluginului L2L Autentificare într-un proiect existent

  1. Adăugați pluginul L2L Login în aplicație
  2. Activați Workflow API în Editorul Bubble. Accesați Settings → API și bifați caseta de selectare de lângă „Enable Workflow API and backend workflows.” Notați URL-ul rădăcină al Workflow API, deoarece va fi folosit ulterior.
  3. Adăugați un parametru suplimentar tipului de date User. Accesați fila Data și faceți clic pe tipul de date „User”. Adăugați următorul câmp cu tipul indicat:
    1. LoginError → text
  4. Adăugați un tip de date nou pentru variabilele utilizate la configurarea autentificării. Accesați fila Data și creați un tip de date nou numit „LoginConfig.” În cadrul noului tip de date LoginConfig, adăugați următoarele câmpuri noi cu tipul de date indicat:
    1. AuthExpiresMinutes → number
    2. BubbleAppCertificate → text
    3. BubbleAppPrivateKey → text
    4. BubbleAppURL → text
    5. CallbackURL → text
    6. DispatchCertificate → text
    7. DispatchServer → text
  5. Adăugați un tip de date nou pentru a păstra sesiunile utilizatorilor. Accesați fila Data și creați un tip de date nou numit "UserSession." Adăugați următoarele câmpuri:
    1. AuthExpires → date
    2. NameId → text
    3. UserUniqueId → text
  6. Creați o pagină nouă în cazul unei erori de autentificare.
    1. Numiți pagina nouă “login_error”
    2. Creați un element text cu următorul conținut dinamic: Current User’s LoginError
  7. Creați un workflow API nou pentru gestionarea callback-ului de autentificare de la serverul L2L Dispatch.
    1. În editorul Bubble accesați selectorul de pagini și alegeți “Backend workflows.”
    2. Faceți clic pe caseta punctată pentru a crea un workflow backend nou, alegeți “New API workflow…” și introduceți următoarele în caseta de dialog:
      1. Numele workflow-ului API: login_complete
      2. Expuneți ca workflow API public: bifat
      3. Acest workflow poate fi rulat fără autentificare: bifat
      4. Ignorați regulile de confidențialitate la rularea workflow-ului: nebifat
      5. Declanșați workflow-ul cu: POST
      6. Definiția parametrilor: Manual definition
      7. Adăugați un parametru nou:
        1. Cheie: SAMLResponse
        2. Tip: text
        3. Este o listă/matrice: nebifat
        4. Opțional: nebifat
        5. Querystring: nebifat
      8. Adăugați un parametru nou:
        1. Cheie: sessionid
        2. Tip: text
        3. Este o listă/matrice: nebifat
        4. Opțional: bifat
        5. Querystring: bifat
      9. Adăugați un parametru nou:
        1. Cheie: user_unique_id
        2. Tip: text
        3. Querystring: bifat
      10. Tip răspuns: Redirecționare pagină (302)
      11. Redirecționare la succes: index
      12. Redirecționare la eroare: login_error
    3. Adăugați o acțiune nouă făcând clic pe caseta punctată cu textul “Click here to add an action…” și alegeți Action → Plugins → validate_response. Introduceți următoarele în caseta de dialog:
      1. Răspuns: SAMLResponse
      2. Certificat Expediere: Search for LoginConfigs:first item’s DispatchCertificate
      3. URL aplicație Bubble Search for LoginConfigs:first item’s BubbleAppURL
      4. Server Search for LoginConfigs:first item’s DispatchServer
    4. Adăugați o altă acțiune nouă și alegeți Data (Things) → Create a new thing...
      1. În caseta de dialog, alegeți UserSession pentru Type
      2. Faceți clic pe "Set another field" pentru fiecare dintre următoarele:
        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. Introduceți următoarele în secțiunea “Only when”: Result of step 1 (validate_response)’s Is Authenticated is “yes”
    5. Adăugați încă o acțiune nouă și alegeți Account → Make changes to current user.
      1. În caseta de dialog, faceți clic pe “Change another field” și introduceți următoarele: LoginError = Result of step 1 (validate_response)’s Error
  8. Adăugați un workflow reutilizabil nou care va fi folosit pentru a forța utilizatorii să se autentifice.
    1. Din selectorul de pagini, faceți clic pe “Add a new reusable element…” și numiți noul element reutilizabil: L2L Login
    2. Faceți clic pe fila Workflow
    3. Adăugați un eveniment nou făcând clic pe caseta punctată numită “Click here to add an event…” și faceți clic pe Custom → Create a custom event…
    4. Introduceți următoarele în caseta de dialog:
      1. Nume eveniment: L2L Login
      2. Doar când: Search for UserSessions
      3. În caseta Search for UserSessions, introduceți următoarele:
        1. Tip: UserSession
        2. Adăugați următoarele constrângeri:
          1. UserUniqueId = CurrentUser's unique id
          2. AuthExpires > Current date/time
      4. Actualizați secțiunea Only when din caseta L2L Login astfel încât să fie: Search for UserSessions:count is 0
      5. Adăugați o acțiune nouă făcând clic pe caseta punctată numită “Click here to add an action…”
      6. Selectați Plugins → get_l2l_login_url
      7. În caseta de dialog, introduceți următoarele:
        1. Server Expediere: Search for LoginConfigs:first item’s DispatchServer
        2. Cheie privată aplicație Bubble: Search for LoginConfigs: first item’s BubbleAppPrivateKey
        3. Certificat aplicație Bubble: Search for LoginConfigs:first item’s BubbleAppCertificate
        4. URL aplicație Bubble: Search for LoginConfigs:first item’s BubbleAppURL
        5. URL callback*: Search for LoginConfigs:first item’s CallbackURL  
          1. *Pentru versiunea 2.0.0 și anterioară, utilizați următoarea expresie pentru URL-ul callback: Search for LoginConfigs:first item’s CallbackURL Arbitrary Text CurrentUser's unique id și introduceți următorul text pentru intrarea Arbitrary Text: ?user_unique_id=
        6. ID unic utilizator: CurrentUser's unique id
    5. Adăugați o acțiune nouă făcând clic pe “Click here to add action…”
      1. Selectați Navigation → Open an external website
      2. În caseta de dialog, introduceți următoarele:
        1. Destinație: Result of step 1 (get_l2l_login_url)’s login_url
    6. Setați înălțimea elementului reutilizabil la 0, astfel încât să poată fi adăugat la fiecare pagină
      1. Accesați fila Design
      2. Selectați caseta albă
      3. În caseta de dialog, selectați fila Appearance
      4. Setați înălțimea la: 0
  9. Adăugați workflow-ul L2L Login la fiecare pagină unde este necesară autentificarea. Acest ghid vă va arăta cum să îl adăugați la pagina index.
    1. Selectați “index” în selectorul de pagini și selectați fila Design
    2. Trageți L2L Login din secțiunea Reusable Elements în partea de sus a paginii.
    3. Faceți clic pe fila Workflow
    4. Creați un eveniment nou făcând clic pe caseta numită “Click here to add an event…” și alegeți General → Page is loaded
    5. Adăugați o acțiune nouă făcând clic pe caseta numită “Click here to add an action…”
    6. Alegeți Custom Events → Trigger a custom event from a reusable element
    7. În caseta de dialog, introduceți următoarele:
      1. Element reutilizabil: L2L Login A (sau oricum se numește noul element)
      2. Eveniment personalizat: L2L Login

Configurarea aplicației

  1. Adăugați un link către aplicația Studio în L2L Expediere
    1. Vă recomandăm să adăugați un link într-un site sandbox către versiunea de dezvoltare și un link către aplicația Bubble Live în site-urile de producție. Pentru versiunea de dezvoltare, asigurați-vă că adăugați /version-test/ la sfârșitul URL-ului Bubble. Pentru versiunea Live, asigurați-vă că îl omiteți.
  2. Creați un nou certificat autosemnat și o cheie care vor fi utilizate pentru validarea aplicației Bubble cu serverul L2L Expediere. Acestea vor fi utilizate la pasul 3.
  3. Descărcați certificatul L2L.
  4. Introduceți datele noii aplicații în Bubble. În timpul construirii aplicației, asigurați-vă că selectați baza de date Development. La implementarea în mediul live, asigurați-vă că selectați baza de date Live.
    1. Accesați fila Data → App data, selectați „All LoginConfigs”, apoi faceți clic pe butonul „New entry”.
    2. Introduceți următoarele în formularul nou:
      1. AuthExpiresMinutes → 720
        1. 720 de minute înseamnă 12 ore. Puteți alege să personalizați acest câmp în funcție de ceea ce este potrivit pentru aplicația dvs.
      2. BubbleAppCertificate → Copiați/lipiți întregul conținut al fișierului certificate.pem generat la pasul 2.
      3. BubbleAppPrivateKey → Copiați/lipiți întregul conținut al fișierului key.pem generat la pasul 2.
      4. BubbleAppURL → Acesta este URL-ul aplicației Bubble. Îl puteți găsi în Bubble Editor, în Settings → Domain / email, dacă aveți un domeniu personalizat. Dacă nu aveți un domeniu personalizat, îl puteți găsi făcând clic pe butonul „run” din ecranul listei aplicațiilor Bubble. Eliminați totul, cu excepția domeniului complet. Va arăta astfel: acme-app.bubbleapps.io
        1. Va fi același în bazele de date Bubble Development și Live. Nu adăugați /version-test.
      5. CallbackURL → După autentificare, L2L va trimite browserul înapoi la acest URL. Va trebui să construiți acest URL. Începeți prin a copia URL-ul din ecranul Settings → API, denumit „Workflow API root URL”. Acum adăugați „/login_complete” la sfârșit. Ar trebui să arate astfel: https://acme-app.bubbleapps.io/version-test/api/1.1/wf/login_complete
      6. DispatchCertificate → Acesta este certificatul serverului L2L Expediere. Acesta a fost descărcat la pasul 3.
      7. DispatchServer → Acesta este serverul L2L Expediere al clientului. Asigurați-vă că includeți „https://”. Ar trebui să arate astfel: https://acme.leading2lean.com

Publicarea aplicației

Acum că Pluginul L2L a fost adăugat, datele și fluxurile de lucru au fost definite, iar aplicația a fost configurată, puteți publica aplicația. Unele funcții Bubble sunt dezactivate înainte de publicare, așadar trebuie adăugat un abonament pentru a testa complet pluginul L2L Login.

După ce aplicația a fost testată, va trebui să configurați aplicația pentru site-ul Live. Pur și simplu urmați pașii din secțiunea „Configurarea aplicației” pentru baza de date Live.

Depanare

Dacă primiți erori în aplicația Bubble sau pe serverul L2L, verificați următoarele:

  • Verificați fiecare configurație de autentificare pentru a vă asigura că nu conține spații suplimentare sau linii noi.
  • Asigurați-vă că URL-ul aplicației Bubble din configurația de autentificare corespunde URL-ului configurației aplicației L2L Studio.

Articole înrudite