Articles in this section

See more

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 two additional parameters to the User data type. Go to the Data tab, and click on the “User” data type. Add the following fields with the indicated types:
    1. AuthExpires → date
    2. LoginError → text
    3. NameID → 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, all with the type “text”:
    1. BubbleAppCertificate
    2. BubbleAppPrivateKey
    3. BubbleAppURL
    4. CallbackURL
    5. DispatchCertificate
    6. DispatchServer
  5. 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
  6. 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: LoginComplete
      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. Response Type: Page redirect (302)
      10. Redirection on success: index
      11. 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 Server
    4. Add another new action and choose Account → Make changes to current user.
      1. In the dialog box, click “Change another field” and enter the following: AuthExpires = Current date/time +(hours): 12
        1. This can be customized to the desired duration of users’ sessions.
      2. Click “Change another field” again and enter the following: NameID = Result of step 1 (validate_response)’s Name 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
      2. Enter the following in the “Only when” section: Result of step 1 (validate_response)’s Error is not empty
  7. 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: Current User’s AuthExpires is empty or CurrentUser’s AuthExpires < Current date/time
    5. Add a new action by clicking the dotted box called “Click here to add an action…”
      1. Select Plugins → get_l2l_login_url
      2. In the dialog, enter the following:
        1. Dispatch Server: Search for LoginConfigs:first item’s Server
        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
    6. 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
    7. 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 Layout tab
      4. Set the height to: 0
  8. 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. 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: l2l-login-template.bubbleapps.io
    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 “/LoginComplete” to the end. It should look like this: https://l2l-login-template.bubbleapps.io/version-test/api/1.1/wf/LoginComplete
    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.

Related Articles

Related articles

Comments

0 comments

Please sign in to leave a comment.