Complemento de inicio de sesión L2L - Configuración

Last updated: June 19, 2026

El plugin de inicio de sesión de L2L es uno de los componentes del proyecto L2L Estudio. El propósito principal de este plugin es permitirle usar L2L como proveedor de SSO para su aplicación de L2L Estudio. Esto le permite mantener un alto nivel de Seguridad en torno a sus datos.

Esta guía explicará cómo agregar el plugin de inicio de sesión de L2L a cualquier aplicación de Bubble.

Configuración del plugin de inicio de sesión de L2L en un proyecto existente

  1. Agrega el plugin L2L Login a tu aplicación
  2. Habilita la API de flujo de trabajo en el editor de Bubble. Ve a Configuración → API y haz clic en la casilla junto a “Habilitar la API de flujo de trabajo y los flujos de trabajo de backend”. Toma nota de la URL raíz de la API de flujo de trabajo, ya que se utilizará más adelante.
  3. Agrega un parámetro adicional al tipo de datos User. Ve a la pestaña Datos y haz clic en el tipo de datos “User”. Agrega el siguiente campo con el tipo indicado:
    1. LoginError → texto
  4. Agrega un nuevo tipo de datos para contener las variables utilizadas para la configuración de inicio de sesión. Ve a la pestaña Datos y crea un nuevo tipo de datos llamado “LoginConfig”. En el nuevo tipo de datos LoginConfig, agrega los siguientes campos con el tipo de datos indicado:
    1. AuthExpiresMinutes → número
    2. BubbleAppCertificate → texto
    3. BubbleAppPrivateKey → texto
    4. BubbleAppURL → texto
    5. CallbackURL → texto
    6. DispatchCertificate → texto
    7. DispatchServer → texto
  5. Agrega un nuevo tipo de datos para contener las sesiones de usuario. Ve a la pestaña Datos y crea un nuevo tipo de datos llamado "UserSession". Agrega los siguientes campos:
    1. AuthExpires → fecha
    2. NameId → texto
    3. UserUniqueId → texto
  6. Crea una nueva página en caso de error de inicio de sesión.
    1. Llama a la nueva página “login_error”
    2. Crea un elemento de texto con el siguiente contenido dinámico: Current User’s LoginError
  7. Crea un nuevo flujo de trabajo de API para gestionar la devolución de autenticación del servidor de Despacho L2L.
    1. En el editor de Bubble, ve al selector de páginas y elige “Flujos de trabajo de backend”.
    2. Haz clic en el cuadro punteado para crear un nuevo flujo de trabajo de backend, elige “Nuevo flujo de trabajo de API…” e introduce lo siguiente en el cuadro de diálogo:
      1. Nombre del flujo de trabajo de API: login_complete
      2. Exponer como flujo de trabajo de API público: marcado
      3. Este flujo de trabajo se puede ejecutar sin autenticación: marcado
      4. Ignorar las reglas de privacidad al ejecutar el flujo de trabajo: no marcado
      5. Activar el flujo de trabajo con: POST
      6. Definición de parámetros: definición manual
      7. Agrega un nuevo parámetro:
        1. Clave: SAMLResponse
        2. Tipo: texto
        3. Es una lista/matriz: no marcado
        4. Opcional: no marcado
        5. Cadena de consulta: no marcado
      8. Agrega un nuevo parámetro:
        1. Clave: sessionid
        2. Tipo: texto
        3. Es una lista/matriz: no marcado
        4. Opcional: marcado
        5. Cadena de consulta: marcado
      9. Agrega un nuevo parámetro:
        1. Clave: user_unique_id
        2. Tipo: texto
        3. Cadena de consulta: marcado
      10. Tipo de respuesta: Redirección de página (302)
      11. Redirección en caso de éxito: index
      12. Redirección en caso de error: login_error
    3. Agrega una nueva acción haciendo clic en el cuadro punteado con el texto “Haz clic aquí para agregar una acción…” y elige Acción → Plugins → validate_response. Introduce lo siguiente en el cuadro de diálogo:
      1. Respuesta: SAMLResponse
      2. Certificado de Despacho: Search for LoginConfigs:first item’s DispatchCertificate
      3. URL de la aplicación Bubble Search for LoginConfigs:first item’s BubbleAppURL
      4. Servidor Search for LoginConfigs:first item’s DispatchServer
    4. Agrega otra acción nueva y elige Datos (cosas) → Crear una cosa nueva...
      1. En el cuadro de diálogo, elige UserSession para el tipo
      2. Haz clic en "Establecer otro campo" para cada uno de los siguientes:
        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 lo siguiente en la sección “Solo cuando”: Result of step 1 (validate_response)’s Is Authenticated is “yes”
    5. Agrega una acción más y elige Cuenta → Realizar cambios en el usuario actual.
      1. En el cuadro de diálogo, haz clic en “Cambiar otro campo” e introduce lo siguiente: LoginError = Result of step 1 (validate_response)’s Error
  8. Agrega un nuevo flujo de trabajo reutilizable que se utilizará para obligar a los usuarios a iniciar sesión.
    1. En el selector de páginas, haz clic en “Agregar un nuevo elemento reutilizable…” y llama al nuevo elemento reutilizable: L2L Login
    2. Haz clic en la pestaña Flujo de trabajo
    3. Agrega un nuevo evento haciendo clic en el cuadro punteado llamado “Haz clic aquí para agregar un evento…” y haz clic en Personalizado → Crear un evento personalizado…
    4. Introduce lo siguiente en el cuadro de diálogo:
      1. Nombre del evento: L2L Login
      2. Solo cuando: Search for UserSessions
      3. En el cuadro Buscar UserSessions, introduce lo siguiente:
        1. Tipo: UserSession
        2. Agrega las siguientes restricciones:
          1. UserUniqueId = CurrentUser's unique id
          2. AuthExpires > Current date/time
      4. Actualiza la sección Solo cuando en el cuadro L2L Login para que indique: Search for UserSessions:count is 0
      5. Agrega una nueva acción haciendo clic en el cuadro punteado llamado “Haz clic aquí para agregar una acción…”
      6. Selecciona Plugins → get_l2l_login_url
      7. En el cuadro de diálogo, introduce lo siguiente:
        1. Servidor de Despacho: Search for LoginConfigs:first item’s DispatchServer
        2. Clave privada de la aplicación Bubble: Search for LoginConfigs: first item’s BubbleAppPrivateKey
        3. Certificado de la aplicación Bubble: Search for LoginConfigs:first item’s BubbleAppCertificate
        4. URL de la aplicación Bubble: Search for LoginConfigs:first item’s BubbleAppURL
        5. URL de devolución de llamada*: Search for LoginConfigs:first item’s CallbackURL  
          1. *Para la versión 2.0.0 y anteriores, usa la siguiente expresión para la URL de devolución de llamada: Search for LoginConfigs:first item’s CallbackURL Arbitrary Text CurrentUser's unique id e introduce el siguiente texto para la entrada de Texto arbitrario: ?user_unique_id=
        6. ID único de usuario: CurrentUser's unique id
    5. Agrega una nueva acción haciendo clic en “Haz clic aquí para agregar una acción…”
      1. Selecciona Navegación → Abrir un sitio web externo
      2. En el cuadro de diálogo, introduce lo siguiente:
        1. Destino: Result of step 1 (get_l2l_login_url)’s login_url
    6. Establece la altura del elemento reutilizable en 0 para poder agregarlo a cada página
      1. Ve a la pestaña Diseño
      2. Selecciona el cuadro blanco
      3. En el cuadro de diálogo, selecciona la pestaña Apariencia
      4. Establece la altura en: 0
  9. Agrega el flujo de trabajo L2L Login a cada página donde se requiera autenticación. Esta guía te mostrará cómo agregarlo a la página index.
    1. Selecciona “index” en el selector de páginas y selecciona la pestaña Diseño
    2. Arrastra L2L Login desde la sección Elementos reutilizables hasta la parte superior de la página.
    3. Haz clic en la pestaña Flujo de trabajo
    4. Crea un nuevo evento haciendo clic en el cuadro llamado “Haz clic aquí para agregar un evento…” y elige General → La página está cargada
    5. Agrega una nueva acción haciendo clic en el cuadro llamado “Haz clic aquí para agregar una acción…”
    6. Elige Eventos personalizados → Activar un evento personalizado desde un elemento reutilizable
    7. En el cuadro de diálogo, introduce lo siguiente:
      1. Elemento reutilizable: L2L Login A (o como se llame tu nuevo elemento)
      2. Evento personalizado: L2L Login

Configurar la aplicación

  1. Agregar un enlace a la aplicación Estudio en L2L Despacho
    1. Recomendamos agregar un enlace en un sitio de pruebas a la versión de desarrollo y un enlace a la aplicación Bubble en vivo en sus sitios de Producción. Para la versión de desarrollo, asegúrese de agregar /version-test/ al final de la URL de Bubble. Para la versión en vivo, asegúrese de omitirlo.
  2. Crear un nuevo certificado autofirmado y una clave que se utilizarán para validar la aplicación Bubble con el servidor L2L Despacho. Estos se utilizarán en el paso 3.
  3. Descargar el certificado de L2L.
  4. Ingresar los nuevos datos de la aplicación en Bubble. Mientras crea la aplicación, asegúrese de seleccionar la base de datos de Desarrollo. Al implementarla en vivo, asegúrese de seleccionar la base de datos En vivo.
    1. Vaya a la pestaña Datos → Datos de la aplicación, seleccione “All LoginConfigs” y luego haga clic en el botón “Nueva entrada”.
    2. Ingrese lo siguiente en el nuevo formulario:
      1. AuthExpiresMinutes → 720
        1. 720 minutos son 12 horas. Puede elegir personalizar este campo según lo que tenga sentido para su aplicación.
      2. BubbleAppCertificate → Copie y pegue todo el contenido del archivo certificate.pem generado en el paso 2.
      3. BubbleAppPrivateKey → Copie y pegue todo el contenido del archivo key.pem generado en el paso 2.
      4. BubbleAppURL → Esta es la URL de la aplicación Bubble. Puede encontrarla en el Editor de Bubble, en Configuración → Dominio / correo electrónico, si tiene un dominio personalizado. Si no tiene un dominio personalizado, puede encontrarla haciendo clic en el botón “ejecutar” en la pantalla de la lista de aplicaciones de Bubble. Elimine todo excepto el dominio completo. Se verá así: acme-app.bubbleapps.io
        1. Será la misma en las bases de datos de Desarrollo y En vivo de Bubble. No agregue /version-test.
      5. CallbackURL → Una vez autenticado, L2L enviará el navegador de vuelta a esta URL. Deberá construir esta URL. Comience copiando la URL que se encuentra en la pantalla Configuración → API, denominada “URL raíz de la API de flujo de trabajo”. Ahora agregue “/login_complete” al final. Debería verse así: https://acme-app.bubbleapps.io/version-test/api/1.1/wf/login_complete
      6. DispatchCertificate → Este es el certificado del servidor L2L Despacho. Se descargó en el paso 3.
      7. DispatchServer → Este es el servidor L2L Despacho del cliente. Asegúrese de incluir “https://”. Debería verse así: https://acme.leading2lean.com

Publicar la aplicación

Ahora que se ha añadido el complemento L2L, se han definido los datos y los flujos de trabajo, y se ha configurado la aplicación, puede publicar la aplicación. Algunas funciones de Bubble están deshabilitadas antes de la publicación, por lo que se debe añadir una suscripción para probar completamente el complemento de inicio de sesión de L2L.

Una vez probada la aplicación, deberá configurarla para el sitio Live. Simplemente siga los pasos de la sección "Configurar la aplicación" para su base de datos Live.

Resolución de problemas

Si recibe errores en la aplicación de Bubble o en el servidor L2L, compruebe lo siguiente:

  • Compruebe cada una de las configuraciones de inicio de sesión para asegurarse de que no tengan espacios adicionales ni saltos de línea.
  • Asegúrese de que la URL de la aplicación de Bubble en la configuración de inicio de sesión coincida con la URL de la configuración de la aplicación de L2L Estudio.

Artículos relacionados