How to set up SSO AutoLogin to 3rd party web pages (sso/html media types)

Modified on Wed, 08 Feb 2023 at 12:39 PM

SSO AutoLogin allows users to automatically login with the same credentials they already used to log into the app. The 3rd party site must have the same SSO/OAuth set up as the EventPilot platform. The 3rd party site must implement the autologin feature. Contact your project manager to receive the documentation for your developer to implement. 


Once implemented, you can link to your 3rd party page by importing the URL into the EventPilot Conference App Builder as a Media Item and then linking to it from the Home Screen or a banner ad. 


For example, imagine you want your attendees to access your learning management system (LMS) page directly from the app. Both, the app and your LMS use the same membership authentication setup. You want to add a button on the Home Screen called "Take a course", which launches your LMS and your users don't have to log in again. They are automatically logged in when clicking the button. 


If user is already logged in to the app, the user will be auto-logged in to sso/html site with their same credentials when they access that media.

If a user attempts to access an sso/html site prior to having logged into the app, they will be redirected to the login page.  Once they enter their credentials and successfully authenticated, they will be redirected to the sso/html site (media they first attempted to access).


Requirements

  • OAuth (SSO) login to app must be set up prior to setting up this feature
  • The URL must be secure: only https links are supported in the app 


Prepare the Data Source CSV

Create a CSV file (you can easily do this in a Google sheet or Excel) with the following columns: 


Media ID,Title,Type,URL/URN


Enter the contents for these fields. 

  • Media ID: This is an alphanumeric ID of your choosing up to 20 characters. Make it clear enough so you know what it refers to. Using our example, you could call it autologin-lms
  • Title: Give it a title that could appear in the app. Using our example, we could call it Take a Course
  • Type: must be set to sso/html
  • URL/URN: This is a URN with specific requirements that contains the URL of the 3rd party page. Login details are sent to that page. 


Use the following post URL URN structure that contains the final destination URL as a parameter in the URN:


urn:eventpilot:all:html:post:url=urlherewithouthttps://|username=++USERNAME++|password=++PASSWORD++


Example

urn:eventpilot:all:html:post:url=ativsoftware.com|username=++USERNAME++|password=++PASSWORD++


Attention: 

If the URL contains any = signs, you must escape them. Meaning you replace any sign with %3D

For example:


URL:                               eventpilotadmin.com/index.php?confid=ABC24

Escaped version:     eventpilotadmin.com/index.php?confid%3DABC24

Final URN example with an html encoded URL: 

urn:eventpilot:all:html:post:url=eventpilotadmin.com/index.php?confid%3DABC24|username=++USERNAME++|password=++PASSWORD++


When a user, who is not logged in, tries to access the media item, the login prompt will appear.





If your source URL already contains encodings, you may need to use a base64 encoded URL:

  1. paste the full URL including https:// into the first field in the online encoder http://www.base64url.com/
  2. In the results, copy from the 2nd field, the base64 encoded (not the third field)
  3. if you see any = symbol in the encoded version, replace it with ##EQUAL##
  4. Change url to b64url to indicate that this URL is base64 encoded e.g. urn:eventpilot:all:html:post:b64url=base64encodedURLhere
  5. then paste the final encoded URL into the orange text area (see example below)

Final URN example with a base 64 encoded URL: 

urn:eventpilot:all:html:post:b64url=ZXZlbnRwaWxvdGFkbWluLmNvbS9pbmRleC5waHA/Y29uZmlkPUFCQzI0|username=++USERNAME++|password=++PASSWORD++



If your base 64 encoded URL contains any equal = symbols, you must replace each with ##EQUAL##

For example, if the base 64 encoder returned a URL like the one below, notice the = sign at the end 


ZXZlbnRwaWxvdGFkbWluLmNvbS9pbmRleC5waHA/Y29uZmlkPUFCQz09MjQ=


You must replace it with ##EQUAL##

ZXZlbnRwaWxvdGFkbWluLmNvbS9pbmRleC5waHA/Y29uZmlkPUFCQz09MjQ##EQUAL##


Your final URN would look like this: 

urn:eventpilot:all:html:post:b64url=ZXZlbnRwaWxvdGFkbWluLmNvbS9pbmRleC5waHA/Y29uZmlkPUFCQz09MjQ##EQUAL##|username=++USERNAME++|password=++PASSWORD++



Data Source Import Setup


sso/html media types are only supported as an import (cannot create this media type manually in the Conference App Builder)

  1. Contact your internal IT specialist and ensure that cookies persist for the login URLs being utilized in the app.  

  2. In the Conference App Builder, do the following:

    1. Go to the Media tab

    2. Add a data source by choosing the + next to Data Sources

    3. Source > CSV URL / CSV Upload
    4. Type > Full Data (Default)
    5. Name > CONFID_SSOHTML
      1. CONFID is a reference to your project, typically ABC23 or SOT24.
    6. URL > Add URL for CSV or Upload CSV directly
    7. Click Next
    8. In the Field Map tab, map your field correctly with the following required file headers:
      • Media ID
      • Title
      • Type: in this case, type must be sso/html (all lower case)
      • URL/URN
    9. Click Import
    10. Review Results Page
      • If errors are displayed, review and contact your Project Manager with any questions


Device Browser Support:

  • Android: Chrome

  • iOS: Safari

  • Webapp/Planner: Chrome 10+

 Important: If logging out as one user and logging back in as another, you must clear browsing data on your browser (on the actual app on your device if testing there).


In-App Use Examples


Home Screen Banner or Button

  1. add a banner or button and connect it to the media item using the Action Builder
    1. Select Action > Individual Item > Media
    2. Search your Title in our example, we would search for Take a Course
    3. Select the correct result you want to link to
    4. Click Save 


Link from a Session Detail View

If you import your agenda data, add the ID to the Media column of your Agenda CSV. In our example above, we would add the ID autologin-lms