Plugin de Entrar L2L - Configuração

Last updated: June 19, 2026

O Plugin de Entrar L2L é um dos componentes do projeto L2L Estúdio. O principal objetivo deste plugin é permitir que você use o L2L como um provedor de SSO para seu aplicativo L2L Estúdio. Isso permite que você mantenha um alto nível de segurança em torno dos seus dados.

Este guia explicará como adicionar o plugin de Entrar L2L a qualquer aplicativo Bubble.

Configurando o Plugin de Entrar L2L em um Projeto Existente

  1. Adicione o plugin L2L Login ao seu aplicativo
  2. Ative a API de Workflow no Editor do Bubble. Vá para Configurações → API e marque a caixa de seleção ao lado de “Ativar a API de Workflow e os workflows de backend.” Anote a URL raiz da API de Workflow, pois ela será usada posteriormente.
  3. Adicione um parâmetro adicional ao tipo de dados User. Vá para a aba Dados e clique no tipo de dados “User”. Adicione o campo a seguir com o tipo indicado:
    1. LoginError → texto
  4. Adicione um novo tipo de dados para armazenar as variáveis usadas na configuração de login. Vá para a aba Dados e crie um novo tipo de dados chamado “LoginConfig”. No novo tipo de dados LoginConfig, adicione os campos a seguir com os tipos de dados indicados:
    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 armazenar as sessões de usuário. Vá para a aba Dados e crie um novo tipo de dados chamado "UserSession". Adicione os campos a seguir:
    1. AuthExpires → data
    2. NameId → texto
    3. UserUniqueId → texto
  6. Crie uma nova página para o caso de erro de login.
    1. Chame a nova página de “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 lidar com o callback de autenticação do servidor L2L Dispatch.
    1. No editor do Bubble, vá para o seletor de páginas e escolha “Workflows de backend”.
    2. Clique na caixa pontilhada para criar um novo workflow de backend, escolha “Novo workflow de API...” e insira o seguinte na caixa de diálogo:
      1. Nome do workflow de API: login_complete
      2. Expor como um workflow de API público: marcado
      3. Este workflow pode ser executado sem autenticação: marcado
      4. Ignorar regras de privacidade ao executar o workflow: não marcado
      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/array: não marcado
        4. Opcional: não marcado
        5. Querystring: não marcado
      8. Adicionar um novo parâmetro:
        1. Chave: sessionid
        2. Tipo: texto
        3. É uma lista/array: não marcado
        4. Opcional: marcado
        5. Querystring: marcado
      9. Adicionar um novo parâmetro:
        1. Chave: user_unique_id
        2. Tipo: texto
        3. Querystring: marcado
      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 “Clique aqui para adicionar uma ação…” e escolha Ação → Plugins → validate_response. Insira o seguinte na caixa de diálogo:
      1. Resposta: SAMLResponse
      2. Certificado do Dispatch: Search for LoginConfigs:first item’s DispatchCertificate
      3. URL do aplicativo Bubble Search for LoginConfigs:first item’s BubbleAppURL
      4. Servidor Search for LoginConfigs:first item’s DispatchServer
    4. Adicione outra nova ação e escolha Dados (Coisas) → Criar uma nova coisa...
      1. Na caixa de diálogo, escolha UserSession para o Tipo
      2. Clique em "Definir outro campo" para cada um dos itens a seguir:
        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. Insira o seguinte na seção “Somente quando”: Result of step 1 (validate_response)’s Is Authenticated is “yes”
    5. Adicione mais uma nova ação e escolha Conta → Fazer alterações no usuário atual.
      1. Na caixa de diálogo, clique em “Alterar outro campo” e insira o seguinte: LoginError = Result of step 1 (validate_response)’s Error
  8. Adicione um novo workflow reutilizável que será usado para forçar os usuários a fazer login.
    1. No seletor de páginas, clique em “Adicionar um novo elemento reutilizável…” e chame o novo elemento reutilizável de: L2L Login
    2. Clique na aba Workflow
    3. Adicione um novo evento clicando na caixa pontilhada chamada “Clique aqui para adicionar um evento…” e clique em Personalizado → Criar um evento personalizado…
    4. Insira o seguinte na caixa de diálogo:
      1. Nome do evento: L2L Login
      2. Somente quando: Search for UserSessions
      3. Na caixa Pesquisar UserSessions, insira 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 seção Somente quando na caixa L2L Login para que ela leia: Search for UserSessions:count is 0
      5. Adicione uma nova ação clicando na caixa pontilhada chamada “Clique aqui para adicionar uma ação…”
      6. Selecione Plugins → get_l2l_login_url
      7. Na caixa de diálogo, insira o seguinte:
        1. Servidor Dispatch: Search for LoginConfigs:first item’s DispatchServer
        2. Chave privada do aplicativo Bubble: Search for LoginConfigs: first item’s BubbleAppPrivateKey
        3. Certificado do aplicativo Bubble: Search for LoginConfigs:first item’s BubbleAppCertificate
        4. URL do aplicativo 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, use a seguinte expressão para a URL de callback: Search for LoginConfigs:first item’s CallbackURL Arbitrary Text CurrentUser's unique id e insira o seguinte texto na entrada Texto arbitrário: ?user_unique_id=
        6. ID exclusivo do usuário: CurrentUser's unique id
    5. Adicione uma nova ação clicando em “Clique aqui para adicionar uma ação…”
      1. Selecione Navegação → Abrir um site externo
      2. Na caixa de diálogo, insira 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 ele possa ser adicionado a cada página
      1. Vá para a aba Design
      2. Selecione a caixa branca
      3. Na caixa de diálogo, selecione a aba Aparência
      4. Defina a altura como: 0
  9. Adicione o workflow L2L Login a todas as páginas nas quais a autenticação é necessária. Este guia mostrará como adicioná-lo à página index.
    1. Selecione “index” no seletor de páginas e selecione a aba Design
    2. Arraste o L2L Login da seção Elementos reutilizáveis para o topo da página.
    3. Clique na aba Workflow
    4. Crie um novo evento clicando na caixa chamada “Clique aqui para adicionar um evento…” e escolha Geral → A página foi carregada
    5. Adicione uma nova ação clicando na caixa chamada “Clique aqui para adicionar uma ação…”
    6. Escolha Eventos personalizados → Acionar um evento personalizado de um elemento reutilizável
    7. Na caixa de diálogo, insira o seguinte:
      1. Elemento reutilizável: L2L Login A (ou qualquer que seja o nome do seu novo elemento)
      2. Evento personalizado: L2L Login

Configurar o aplicativo

  1. Adicionar um link para o aplicativo Estúdio no Despacho L2L
    1. Recomendamos adicionar um link em um site sandbox para a versão de desenvolvimento e um link para o aplicativo Bubble ativo nos seus sites de produção. Para a versão de desenvolvimento, certifique-se de acrescentar /version-test/ ao final da URL do Bubble. Para a versão ativa, certifique-se de não acrescentá-lo.
  2. Crie um novo certificado autoassinado e uma chave que serão usados para validar o aplicativo Bubble com o servidor do Despacho L2L. Eles serão usados na etapa 3.
  3. Baixe o certificado L2L.
  4. Insira os novos dados do aplicativo no Bubble. Durante a criação do aplicativo, certifique-se de selecionar o banco de dados de desenvolvimento. Ao implantar em produção, certifique-se de selecionar o banco de dados de produção.
    1. Vá para a aba Data → App data, selecione “All LoginConfigs” e clique no botão “New entry”.
    2. Insira o seguinte no novo formulário:
      1. AuthExpiresMinutes → 720
        1. 720 minutos correspondem a 12 horas. Você pode optar por personalizar este campo conforme fizer sentido para o seu aplicativo.
      2. BubbleAppCertificate → Copie/cole todo o conteúdo do arquivo certificate.pem gerado na etapa 2.
      3. BubbleAppPrivateKey → Copie/cole todo o conteúdo do arquivo key.pem gerado na etapa 2.
      4. BubbleAppURL → Esta é a URL do aplicativo Bubble. Ela pode ser encontrada no Editor do Bubble, em Settings → Domain / email, se você tiver um domínio personalizado. Se você não tiver um domínio personalizado, ela poderá ser encontrada clicando no botão “run” na tela da lista de aplicativos do Bubble. Remova tudo, exceto o domínio completo. Ele será semelhante a este: acme-app.bubbleapps.io
        1. Será o mesmo nos bancos de dados de Desenvolvimento e Produção do Bubble. Não acrescente /version-test.
      5. CallbackURL → Depois de autenticado, o L2L enviará o navegador de volta para esta URL. Você precisará construir esta URL. Comece copiando a URL encontrada na tela Settings → API, chamada “Workflow API root URL”. Agora acrescente “/login_complete” ao final. Ela deverá ser semelhante a esta: https://acme-app.bubbleapps.io/version-test/api/1.1/wf/login_complete
      6. DispatchCertificate → Este é o certificado do servidor de Despacho L2L. Ele foi baixado na etapa 3.
      7. DispatchServer → Este é o servidor de Despacho L2L do cliente. Certifique-se de incluir “https://.”. Ele deverá ser semelhante a este: https://acme.leading2lean.com

Publicar o aplicativo

Agora que o Plugin L2L foi adicionado, os dados e fluxos de trabalho foram definidos e o aplicativo foi configurado, você pode publicar o aplicativo. Alguns recursos do Bubble estão desativados antes da publicação, portanto, uma assinatura deve ser adicionada para testar completamente o plugin L2L Entrar.

Depois que o aplicativo tiver sido testado, você precisará configurá-lo para o site Live. Basta seguir as etapas na seção "Configurar o aplicativo" para o seu banco de dados Live.

Solução de problemas

Se você estiver recebendo erros no aplicativo Bubble ou no servidor L2L, verifique o seguinte:

  • Verifique cada uma das Configurações de Login para garantir que não tenham espaços extras ou novas linhas.
  • Certifique-se de que a URL do aplicativo Bubble da sua Configuração de Login corresponda à URL da Configuração do aplicativo do Estúdio L2L.

Artigos relacionados