Embedded Analytics: SAML SSO With Tableau Cloud & OneLogin

Implement single sign-on for Tableau Online with SAML & IdP OneLogin. And create a simple application that embeds a Tableau dashboard into a webpage.

SAML SSO for tableau cloud and onelogin

Goals:

  • Implement single sign-on (SSO) for Tableau Cloud with security assertion markup language (SAML) identity provider (IdP) OneLogin
  • Create a simple embedded analytics application that embeds a Tableau Cloud dashboard into a web page
  • Provide a seamless end user experience in an embedded analytics application (note that this may be at odds with the most robust security setup configuration)

You might also find this article useful:

Embedded Analytics: SAML SSO with Tableau Online & Okta
Implement single sign on (SSO) for Tableau Online with security assertion markup language (SAML) identity provider (IdP) Okta.

Prerequisites:

Tableau Cloud

  1. Tableau Cloud account. If you do not have a Tableau Cloud account, please let us know and we will spin up a trial for you or help you make a purchase.
  2. Admin access to your Tableau Cloud account.
  3. Tableau dashboard content published you want to use for embedded analytics. For testing, you can use any Tableau dashboard published to Tableau Cloud.

OneLogin

  1. OneLogin account. If you do not have an account with OneLogin, you can sign up for a free trial at this link.
  2. Admin access to your OneLogin account.

Web Server for Embedded Analytics Application

  1. Access to a web server and a simple HTML page you can use for testing embedded analytics with a Tableau Cloud dashboard. Check out our blog for instructions on setting up a simple embedded analytics web server with Python and embedding a Tableau dashboard.

Setup Instructions

We followed the set up instructions directly from Tableau's Tableau Cloud help documentation: Configure SAML with OneLogin

As part of our testing, we wanted to make sure the embedded analytics experience was as seamless as possible.

DO THIS AT YOUR OWN RISK. Tableau warns about this in their documentation and in Tableau Cloud itself.

Tableau Cloud extra settings:

On the Tableau Cloud side, under Settings -> Authentication -> Authentication types:

Click "Edit connection..."

Tableau Online enable an additional authentication method - OneLogin (SAML)
Tableau Cloud enable an additional authentication method - OneLogin (SAML)

Under section "6 Embedding options", click "Authenticate using an inline frame (less secure; not supported by all IdPs)".

Tableau Online embedded analytics - authenticate using an iframe
Tableau Cloud embedded analytics - authenticate using an iframe

OneLogin extra settings:

On the OneLogin side, under Administration -> Settings -> Account Settings and under the Basic section, we checked to "Disable Framing Protection (X-Frame-Options)".

OneLogin - Disable Framing Protection (X-Frame-Options)
OneLogin - Disable Framing Protection (X-Frame-Options)

User authentication:

As a last step, update the authentication of any existing/new Tableau Cloud users you want to authenticate via OneLogin. Make sure they are using onelogin.com (SAML) as their authentication rather than Tableau.

Note that a user can only authenticate via a single method, either OneLogin or Tableau.

Update the authentication of existing Tableau Cloud users:

On the Tableau Cloud users page, select the user and click the three dots (...).

Tableau Online - example of a user with Tableau (local) authentication
Tableau Cloud - example of a user with Tableau (local) authentication

Click Authentication...

Tableau Online - configuring authentication for a user
Tableau Cloud - configuring authentication for a user

Change the Authentication from Tableau to onelogin.com (SAML) and click update.

Tableau Online - configuring a user's authentication to OneLogin (SAML)
Tableau Cloud - configuring a user's authentication to OneLogin (SAML)

The user should now have onelogin.com (SAML) in the Authentication column.

Tableau Online - example of a user with OneLogin (SAML) authentication
Tableau Cloud - example of a user with OneLogin (SAML) authentication

Add new users to Tableau Cloud and have them authenticate via OneLogin:

When adding new users to your Tableau Cloud site, click the "+ Add Users" orange button:

Tableau Online - Add Users
Tableau Cloud - Add Users

If you have one or a few users, click "Enter Email Addresses". You can also import using a CSV file if you have a large list.

Tableau Online - Add Users to this Site
Tableau Cloud - Add Users to this Site

Make sure that you select "Add users for onelogin.com (SAML) authentication".

Tableau Online - configure new user for OneLogin (SAML) authentication
Tableau Cloud - configure new user for OneLogin (SAML) authentication

Embed a Tableau Dashboard in a Website

Now that you have at least have one user in Tableau Cloud authenticating via OneLogin, it is time to test the end user experience in an embedded analytics environment.

For this part, you will need a simple HTML page hosted by a web server. Check out our blog here for instructions on setting up a simple web server with Python and embedding a Tableau dashboard.

Simply navigate to a Tableau dashboard in your Tableau Cloud and click the "Share" button.

Tableau Online Embedded Analytics - Tableau Share Button
Tableau Cloud Embedded Analytics - Tableau Share Button

There are several ways to embed a Tableau dashboard, in this case, just click "Embed Code" to copy the code.

Tableau Online Embedded Analytics - Tableau Embed Code
Tableau Cloud Embedded Analytics - Tableau Embed Code

On your HTML page, paste the "Embed Code".

Here's a simple example of the HTML:

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Embedded Analytics with Tableau Cloud</title>
</head>
<body>
    <script type='text/javascript' src='https://us-east-1.online.tableau.com/javascripts/api/viz_v1.js'></script>
    <div class='tableauPlaceholder' style='width: 1488px; height: 706px;'>
        <object class='tableauViz' width='1488' height='706' style='display:none;'>
            <param name='host_url' value='https%3A%2F%2Fus-east-1.online.tableau.com%2F' />
            <param name='embed_code_version' value='3' />
            <param name='site_root' value='&#47;t&#47;zuar' />
            <param name='name' value='Regional&#47;GlobalTemperatures' />
            <param name='tabs' value='yes' />
            <param name='toolbar' value='yes' />
            <param name='showAppBanner' value='false' />
            <param name='filter' value='iframeSizedToWindow=true' />
        </object>
    </div>
</body>
</html>
Tableau Cloud Embedded Analytics - Embed Code in an HTML page

Save and refresh your page.

If you are still logged into Tableau Cloud, this is what you will see:

Tableau Online Dashboard Embedded Analytics Web Page
Tableau Cloud Dashboard Embedded Analytics Web Page

SSO & End-User Experience

Now let's test the embedded analytics application from the end user's perspective. In an external, customer facing embedded analytics application, your end users will probably not be aware that Tableau is driving their analytics experience nor will they be aware that your application is using OneLogin for authentication. All they will see is your application's login screen.

So let's mimic that environment.

Sign out of Tableau Cloud and then sign back into OneLogin.

Refresh your embedded analytics application's page and you should see this:

Embedded Analytics application - Tableau Online sign in using OneLogin (SAML)
Embedded Analytics application - Tableau Cloud sign in using OneLogin (SAML)

If your user clicks "Sign in to Tableau Cloud", their experience will be something like this:

Embedded Analytics SSO user experience using Tableau Online and OneLogin (SAML)
Embedded Analytics SSO user experience using Tableau Cloud and OneLogin (SAML)

The end user only has to go through this "login" flow once or until they are signed out of Tableau Cloud. Tableau Cloud's idle session timeout duration is 2 hours (and cannot be modified).

Wrap Up

We implemented single sign-on (SSO) for Tableau Cloud using security assertion markup language (SAML) identity provider (IdP) OneLogin.

During the setup we enabled optional (and less secure) features with the goal of creating a seamless end user experience in the embedded analytics application.

We also walked through creating that simple embedded analytics application and embedded a Tableau Cloud dashboard into a webpage.

The end user experience is less than ideal with a user needing to click a button to authenticate, however, they do not have to log in with a username and password. If you are looking for a more seamless embedded analytics experience for your end users, Zuar has products that solve this.

Take advantage of everything Zuar offers to companies using Tableau!

  • Zuar Portal is an easy way to provide branded Tableau dashboards. Monetize your data or provide secure access outside of corporate firewalls.
  • Transport, warehouse, transform, model, report & monitor. Zuar Runner gets data flowing from hundreds of potential sources into a single destination for Tableau.
  • Zuar's team of Tableau-certified consultants can take the headaches out of even the most complex projects.
How to Embed Tableau Dashboards in a Web Page | Zuar
Here’s how to embed Tableau dashboards with aTableau embed code, Tableau Javascript API, and iframe + Tableau share link.
Trusted Ticket Authentication with Tableau Server | Zuar
This article describes how Tableau trusted authentication provides Single Sign-On (SSO) for embedded analytics in third-party applications.
Implementing Trusted Tickets for Tableau Server with NodeJS
This article implements trusted tickets as described in Trusted TicketAuthentication with Tableau Server[https://blog.zuar.com/trusted-ticket-authentication-with-tableau-server/]. We’ll build a ticket broker with a simple API called by a front-end that usesthe HTML5 &lt;template&gt; tag. The intende…
Understanding Tableau Data Extracts & Tableau Data Sources | Zuar
Are you wondering how to use Tableau data extracts and data sources? This is an informative guide.