Plugin de Iniciar sessão L2L - Configuração

Last updated: June 19, 2026

O plugin de início de sessão L2L é um dos componentes do projeto L2L Estúdio. O principal objetivo deste plugin é permitir-lhe utilizar o L2L como fornecedor de SSO para a sua aplicação L2L Estúdio. Isto permite-lhe manter um elevado nível de segurança em torno dos seus dados.

Este guia explica como adicionar o plugin de início de sessão L2L a qualquer aplicação Bubble.

Configuração do plugin de início de sessão L2L num projeto existente

  1. Adicione o plug-in L2L Login à sua aplicação
  2. Ative a API de workflows no Editor do Bubble. Aceda a Settings → API e clique na caixa de verificação junto a “Enable Workflow API and backend workflows.” Tome nota do URL raiz da API de workflows, pois será utilizado mais tarde.
  3. Adicione um parâmetro adicional ao tipo de dados User. Aceda ao separador Data e clique no tipo de dados “User”. Adicione o seguinte campo com o tipo indicado:
    1. LoginError → texto
  4. Adicione um novo tipo de dados para guardar as variáveis utilizadas na configuração de início de sessão. Aceda ao separador Data e crie um novo tipo de dados chamado “LoginConfig.” No novo tipo de dados LoginConfig, adicione os seguintes campos com o tipo de dados indicado:
    1. AuthExpiresMinutes → número
    2. BubbleAppCertificate → texto
    3. BubbleAppPrivateKey → texto
    4. BubbleAppURL → texto
    5. CallbackURL → texto
    6. DispatchCertificate → texto
    7. DispatchServer → texto
  5. Adicione um novo tipo de dados para guardar as sessões de utilizador. Aceda ao separador Data e crie um novo tipo de dados chamado "UserSession." Adicione os seguintes campos:
    1. AuthExpires → data
    2. NameId → texto
    3. UserUniqueId → texto
  6. Crie uma nova página para o caso de ocorrer um erro de início de sessão.
    1. Chame à nova página “login_error”
    2. Crie um elemento de texto com o seguinte conteúdo dinâmico: Current User’s LoginError
  7. Crie um novo workflow de API para processar o callback de autenticação do servidor L2L Dispatch.
    1. No editor do Bubble, aceda ao seletor de páginas e escolha “Backend workflows.”
    2. Clique na caixa pontilhada para criar um novo workflow de backend, escolha “New API workflow…” e introduza o seguinte na caixa de diálogo:
      1. Nome do workflow de API: login_complete
      2. Expor como workflow de API público: selecionado
      3. Este workflow pode ser executado sem autenticação: selecionado
      4. Ignorar regras de privacidade ao executar o workflow: não selecionado
      5. Acionar workflow com: POST
      6. Definição de parâmetros: definição manual
      7. Adicionar um novo parâmetro:
        1. Chave: SAMLResponse
        2. Tipo: texto
        3. É uma lista/matriz: não selecionado
        4. Opcional: não selecionado
        5. Querystring: não selecionado
      8. Adicionar um novo parâmetro:
        1. Chave: sessionid
        2. Tipo: texto
        3. É uma lista/matriz: não selecionado
        4. Opcional: selecionado
        5. Querystring: selecionado
      9. Adicionar um novo parâmetro:
        1. Chave: user_unique_id
        2. Tipo: texto
        3. Querystring: selecionado
      10. Tipo de resposta: redirecionamento de página (302)
      11. Redirecionamento em caso de sucesso: index
      12. Redirecionamento em caso de erro: login_error
    3. Adicione uma nova ação clicando na caixa pontilhada com o texto “Click here to add an action…” e escolha Action → Plugins → validate_response. Introduza o seguinte na caixa de diálogo:
      1. Resposta: SAMLResponse
      2. Certificado de expedição: Search for LoginConfigs:first item’s DispatchCertificate
      3. URL da aplicação Bubble Search for LoginConfigs:first item’s BubbleAppURL
      4. Servidor Search for LoginConfigs:first item’s DispatchServer
    4. Adicione outra ação e escolha Data (Things) → Create a new thing...
      1. Na caixa de diálogo, escolha UserSession para o tipo
      2. Clique em "Set another field" para cada um dos seguintes campos:
        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. Introduza o seguinte na secção “Only when”: Result of step 1 (validate_response)’s Is Authenticated is “yes”
    5. Adicione mais uma ação e escolha Account → Make changes to current user.
      1. Na caixa de diálogo, clique em “Change another field” e introduza o seguinte: LoginError = Result of step 1 (validate_response)’s Error
  8. Adicione um novo workflow reutilizável que será utilizado para obrigar os utilizadores a iniciar sessão.
    1. No seletor de páginas, clique em “Add a new reusable element…” e chame ao novo elemento reutilizável: L2L Login
    2. Clique no separador Workflow
    3. Adicione um novo evento clicando na caixa pontilhada chamada “Click here to add an event…” e clique em Custom → Create a custom event…
    4. Introduza o seguinte na caixa de diálogo:
      1. Nome do evento: L2L Login
      2. Only when: Search for UserSessions
      3. Na caixa Search for UserSessions, introduza o seguinte:
        1. Tipo: UserSession
        2. Adicione as seguintes restrições:
          1. UserUniqueId = CurrentUser's unique id
          2. AuthExpires > Current date/time
      4. Atualize a secção Only when na caixa L2L Login para que apresente: Search for UserSessions:count is 0
      5. Adicione uma nova ação clicando na caixa pontilhada chamada “Click here to add an action…”
      6. Selecione Plugins → get_l2l_login_url
      7. Na caixa de diálogo, introduza o seguinte:
        1. Servidor de expedição: Search for LoginConfigs:first item’s DispatchServer
        2. Chave privada da aplicação Bubble: Search for LoginConfigs: first item’s BubbleAppPrivateKey
        3. Certificado da aplicação Bubble: Search for LoginConfigs:first item’s BubbleAppCertificate
        4. URL da aplicação Bubble: Search for LoginConfigs:first item’s BubbleAppURL
        5. URL de callback*: Search for LoginConfigs:first item’s CallbackURL  
          1. *Para a versão 2.0.0 e anteriores, utilize a seguinte expressão para o URL de callback: Search for LoginConfigs:first item’s CallbackURL Arbitrary Text CurrentUser's unique id e introduza o seguinte texto na entrada Arbitrary Text: ?user_unique_id=
        6. ID exclusivo do utilizador: CurrentUser's unique id
    5. Adicione uma nova ação clicando em “Click here to add action…”
      1. Selecione Navigation → Open an external website
      2. Na caixa de diálogo, introduza o seguinte:
        1. Destino: Result of step 1 (get_l2l_login_url)’s login_url
    6. Defina a altura do elemento reutilizável como 0 para que possa ser adicionado a cada página
      1. Aceda ao separador Design
      2. Selecione a caixa branca
      3. Na caixa de diálogo, selecione o separador Appearance
      4. Defina a altura como: 0
  9. Adicione o workflow L2L Login a todas as páginas onde a autenticação seja necessária. Este guia mostra-lhe como adicioná-lo à página index.
    1. Selecione “index” no seletor de páginas e selecione o separador Design
    2. Arraste L2L Login da secção Reusable Elements para o topo da página.
    3. Clique no separador Workflow
    4. Crie um novo evento clicando na caixa chamada “Click here to add an event…” e escolha General → Page is loaded
    5. Adicione uma nova ação clicando na caixa chamada “Click here to add an action…”
    6. Escolha Custom Events → Trigger a custom event from a reusable element
    7. Na caixa de diálogo, introduza o seguinte:
      1. Elemento reutilizável: L2L Login A (ou o nome que atribuiu ao novo elemento)
      2. Evento personalizado: L2L Login

Configurar a aplicação

  1. Adicionar uma ligação para a aplicação Estúdio no L2L Expedição
    1. Recomendamos adicionar uma ligação num site sandbox para a versão de desenvolvimento e uma ligação para a aplicação Bubble em Produção nos seus sites de produção. Para a versão de desenvolvimento, certifique-se de que acrescenta /version-test/ ao final do URL do Bubble. Para a versão em Produção, certifique-se de que o deixa de fora.
  2. Criar um novo certificado autoassinado e uma chave que serão utilizados para validar a aplicação Bubble com o servidor L2L Expedição. Estes serão utilizados no passo 3.
  3. Transferir o certificado L2L.
  4. Introduzir os novos dados da aplicação no Bubble. Ao criar a aplicação, certifique-se de que seleciona a base de dados de desenvolvimento. Ao implementar em Produção, certifique-se de que seleciona a base de dados de Produção.
    1. Aceda ao separador Data → App data, selecione “All LoginConfigs” e, em seguida, clique no botão “New entry”.
    2. Introduza os seguintes dados no novo formulário:
      1. AuthExpiresMinutes → 720
        1. 720 minutos correspondem a 12 horas. Pode optar por personalizar este campo para o valor que fizer sentido para a sua aplicação.
      2. BubbleAppCertificate → Copie/cole todo o conteúdo do ficheiro certificate.pem gerado no passo 2.
      3. BubbleAppPrivateKey → Copie/cole todo o conteúdo do ficheiro key.pem gerado no passo 2.
      4. BubbleAppURL → Este é o URL da aplicação Bubble. Pode encontrá-lo no Editor do Bubble, em Settings → Domain / email, se tiver um domínio personalizado. Se não tiver um domínio personalizado, pode encontrá-lo clicando no botão “run” no ecrã da lista de aplicações Bubble. Remova tudo exceto o domínio completo. Terá o seguinte aspeto: acme-app.bubbleapps.io
        1. Será igual nas bases de dados Bubble de Desenvolvimento e de Produção. Não acrescente /version-test.
      5. CallbackURL → Depois de autenticado, o L2L enviará o navegador de volta para este URL. Terá de construir este URL. Comece por copiar o URL encontrado no ecrã Settings → API, denominado “Workflow API root URL”. Agora acrescente “/login_complete” ao final. Deverá ter o seguinte aspeto: https://acme-app.bubbleapps.io/version-test/api/1.1/wf/login_complete
      6. DispatchCertificate → Este é o certificado do servidor L2L Expedição. Foi transferido no passo 3.
      7. DispatchServer → Este é o servidor L2L Expedição do cliente. Certifique-se de que inclui “https://.” Deverá ter o seguinte aspeto: https://acme.leading2lean.com

Publicar a aplicação

Agora que o Plugin L2L foi adicionado, os dados e os fluxos de trabalho foram definidos e a aplicação foi configurada, pode publicar a aplicação. Algumas funcionalidades do Bubble estão desativadas antes da publicação, pelo que deve ser adicionada uma subscrição para testar completamente o plugin L2L Iniciar sessão.

Depois de a aplicação ter sido testada, terá de configurar a aplicação para o site em Produção. Basta seguir os passos da secção "Configurar a aplicação" para a sua base de dados em Produção.

Resolução de problemas

Se estiver a receber erros na aplicação Bubble ou no servidor L2L, verifique o seguinte:

  • Verifique cada uma das Configurações de Iniciar sessão para garantir que não têm espaços extra ou novas linhas.
  • Certifique-se de que o URL da aplicação Bubble na sua Configuração de Iniciar sessão corresponde ao URL da Configuração da aplicação do Estúdio L2L.

Artigos relacionados