Articles in this section

L2L Login Plugin - Setup

  • Updated
Follow

The L2L Login Plugin is one of the components of the L2L Studio project. The primary purpose of this plugin is to allow you to use L2L as an SSO provider for your L2L Studio app. This allows you to maintain a high level of security around your data.

This guide will explain how to add the L2L Login plugin to any Bubble app. 

Configuring the L2L Login Plugin on an Existing Project

  1. Add the L2L Login plugin to your App
  2. Enable the Workflow API In the Bubble Editor. Go to Settings → API and click the checkbox next to “Enable Workflow API and backend workflows.” Note the Workflow API root URL, as it will be used later.
  3. Add an additional parameter to the User data type. Go to the Data tab, and click on the “User” data type. Add the following field with the indicated type:
    1. LoginError → text
  4. Add a new data type to hold variables used for the login configuration. Go to the Data tab, and create a new data type called “LoginConfig.” Under the new LoginConfig data type, add the following new fields with the indicated data type:
    1. AuthExpiresMinutes → number
    2. BubbleAppCertificate → text
    3. BubbleAppPrivateKey → text
    4. BubbleAppURL → text
    5. CallbackURL → text
    6. DispatchCertificate → text
    7. DispatchServer → text
  5. Add a new data type to hold User Sessions. Go to the Data tab, and create a new data type called "UserSession." Add the following fields:
    1. AuthExpires → date
    2. NameId → text
    3. UserUniqueId → text
  6. Create a new Page in the event of a login error.
    1. Call the new page “login_error”
    2. Create a text element with the following dynamic content: Current User’s LoginError
  7. Create a new API workflow to handle the authentication callback from the L2L Dispatch server.
    1. In the Bubble editor go to the page chooser, and choose “Backend workflows.”
    2. Click on the dotted box to create a new backend workflow, and choose “New API workflow…” and enter the following in the dialog box:
      1. API workflow name: login_complete
      2. Expose as a public API workflow: checked
      3. This workflow can be run without authentication: checked
      4. Ignore privacy rules when running the workflow: not checked
      5. Trigger workflow with: POST
      6. Parameter definition: Manual definition
      7. Add a new parameter:
        1. Key: SAMLResponse
        2. Type: text
        3. Is a list/array: not checked
        4. Optional: not checked
        5. Querystring: not checked
      8. Add a new parameter:
        1. Key: sessionid
        2. Type: text
        3. Is a list/array: not checked
        4. Optional: checked
        5. Querystring: checked
      9. Add a new parameter:
        1. Key: user_unique_id
        2. Type: text
        3. Querystring: checked
      10. Response Type: Page redirect (302)
      11. Redirection on success: index
      12. Redirection on error: login_error
    3. Add a new action by clicking on the dotted box with text “Click here to add an action…” and choose Action → Plugins → validate_response. Enter the following into the dialog box:
      1. Response: SAMLResponse
      2. Dispatch Certificate: 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. Add another new action and choose Data (Things) → Create a new thing...
      1. In the dialog box, choose UserSession for the Type
      2. Click "Set another field" for each of the following:
        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. Enter the following in the “Only when” section: Result of step 1 (validate_response)’s Is Authenticated is “yes”
    5. Add one more new action and choose Account → Make changes to current user.
      1. In the dialog box, click “Change another field” and enter the following: LoginError = Result of step 1 (validate_response)’s Error
  8. Add a new reusable workflow that will be used to force users to log on.
    1. From the Page chooser, click “Add a new reusable element…” and call the new reusable element: L2L Login
    2. Click the Workflow tab
    3. Add a new event by clicking the dotted box called “Click here to add an event…” and click Custom → Create a custom event…
    4. Enter the following in the Dialog:
      1. Event Name: L2L Login
      2. Only when: Search for UserSessions
      3. In the Search for UserSessions box, enter the following:
        1. Type: UserSession
        2. Add the following constraints:
          1. UserUniqueId = CurrentUser's unique id
          2. AuthExpires > Current date/time
      4. Update the Only when section in the L2L Login box so it reads: Search for UserSessions:count is 0
      5. Add a new action by clicking the dotted box called “Click here to add an action…”
      6. Select Plugins → get_l2l_login_url
      7. In the dialog, enter the following:
        1. Dispatch Server: Search for LoginConfigs:first item’s DispatchServer
        2. Bubble App Private Key: Search for LoginConfigs: first item’s BubbleAppPrivateKey
        3. Bubble App Certificate: Search for LoginConfigs: first item’s BubbleAppCertificate
        4. Bubble App URL: Search for LoginConfigs:first item’s BubbleAppURL
        5. Callback URL: Search for LoginConfigs:first item’s CallbackURL Arbitrary Text CurrentUser's unique id
          1. Enter the following text for the Arbitrary Text entry: ?user_unique_id=
    5. Add a new action by clicking “Click here to add action…”
      1. Select Navigation → Open an external website
      2. In the dialog, enter the following:
        1. Destination: Result of step 1 (get_l2l_login_url)’s login_url
    6. Set the height of the reusable element to 0 so it can be added to each page
      1. Go go the Design tab
      2. Select the white box
      3. In the dialog, select the Appearance tab
      4. Set the height to: 0
  9. Add the L2L Login workflow to every page where authentication is required. This guide will show you how to add it to the index page.
    1. Select “index” in the Page chooser and select the Design tab
    2. Drag the L2L Login from the Reusable Elements section to the top of the page.
    3. Click on the Workflow tab
    4. Create a new event by clicking the box called “Click here to add an event…” and choose General → Page is loaded
    5. Add a new action by clicking the box called “Click here to add an action…”
    6. Choose Custom Events → Trigger a custom event from a reusable element
    7. In the dialog box, enter the following:
      1. Reusable element: L2L Login A (or whatever your new element is called)
      2. Custom event: L2L Login

Configure the App

  1. Add a link to the Studio App in L2L Dispatch
    1. We recommend adding a link in a sandbox site to the development version, and a link to the Live Bubble app in your production sites. For the development version, be sure to append /version-test/ to the end of the Bubble URL. For the Live version, be sure to leave it off.
  2. Create a new self-signed certificate and key that will be used to validate the Bubble app with the L2L Dispatch server. These will be used in step 3.
  3. Download the L2L Certificate.
  4. Enter new app data in Bubble. While building the app, be sure to select the Development database. When deploying to live, be sure to select the Live database.
    1. Go to the Data → App data tab, select “All LoginConfigs,” then click the “New entry” button.
    2. Enter the following in the new form:
      1. AuthExpiresMinutes → 720
        1. 720 minutes is 12 hours. You may choose to customize this field to whatever makes sense for your app.
      2. BubbleAppCertificate → Copy/paste the entire contents of the certificate.pem file generated in step 2.
      3. BubbleAppPrivateKey → Copy/paste the entire contents of the key.pem file generated in step 2.
      4. BubbleAppURL → This is the URL of the bubble app. This can be found in the Bubble Editor under Settings → Domain / email if you have a custom domain. If you do not have a custom domain, this can be found by by clicking the “run” button on the Bubble App list screen. Trim off everything but the full domain. It will look like this: acme-app.bubbleapps.io
        1. It will be the same in both your Development and Live Bubble databases. Do not append /version-test.
      5. CallbackURL → Once authenticated, L2L will send the browser back to this URL. You will need to construct this URL. Start by copying the URL found in the Settings → API screen called “Workflow API root URL.” Now append “/login_complete” to the end. It should look like this: https://acme-app.bubbleapps.io/version-test/api/1.1/wf/login_complete
      6. DispatchCertificate → This is the certificate of the L2L Dispatch server. This was downloaded in step 3.
      7. DispatchServer → This is the Customer’s L2L Dispatch server. Be sure to include “https://.” It should like this: https://acme.leading2lean.com

Publish the App

Now that the L2L Plugin has been added, data and workflows have been defined, and the app has been configured, you can publish the app. Some Bubble features are disabled prior to publishing, so a subscription must be added in order to fully test the L2L Login plugin.

Once the app has been tested, you will need to configure the app for the Live site. Simply follow the steps in the "Configure the App" section for your Live database.

Troubleshooting

If you are getting errors on the Bubble app or on the L2L server, check the following:

  • Check each of the Login Configs that they don't have extra spaces or new lines.
  • Make sure your Login Config's Bubble App URL matches the URL of the L2L Studio App Config.

Related Articles

Related articles

Comments

0 comments

Please sign in to leave a comment.