Goals:

  • Implement single sign on (SSO) for Tableau Online with security assertion markup language (SAML) identity provider (IdP) Okta
  • Create a simple embedded analytics application that embeds a Tableau Online 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)

Prerequisites:

Tableau Online

  1. Tableau Online account. If you do not have a Tableau Online 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 Online account.
  3. Tableau dashboard content published you want to use for embedded analytics. For testing, you can use any Tableau dashboard published to Tableau Online.

Okta:

  1. Okta account. If you do not have an account with Okta, you can sign up for a free trial here.
  2. Admin access to your Okta 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 Online dashboard. Check out our blog for instructions on setting up a simple embedded analytics web server with Python and embedding a Tableau dashboard.
Embedded Analytics: 3 ways to embed Tableau dashboards into a web page
The purpose of this blog is to help you test 3 ways to embed Tableau dashboards in an embedded analytics application by setting up a simple web server using a Python 3 HTTP server and embedding a Tableau dashboard in a simple HTML web page. We won’t be covering Tableau Server / Tableau Online secu…

Setup instructions:

We followed the set up instructions directly from Okta's help documentation: How to Configure SAML 2.0 for Tableau Server

Tableau also has it's own set of instructions as an alternative or for more information: Configure SAML with Okta

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 Online itself.

Tableau Online extra settings:

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

Tableau Online enable an additional authentication method - Okta (SAML)
Tableau Online enable an additional authentication method - Okta (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 Online embedded analytics - authenticate using an iframe

Okta extra settings:

In the Okta app, under Admin -> Settings -> Customization and under the IFrame Embedding section, we checked to "Allow IFrame embedding".

Okta - Enabling IFrame Embedding
Okta - Enabling IFrame Embedding

User authentication:

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

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

Update the authentication of existing Tableau Online users:

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

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

Click Authentication...

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

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

Tableau Online - configuring a user's authentication to okta.com (SAML)
Tableau Online - configuring a user's authentication to okta.com (SAML)

If you are testing this on your own user, this will log you out of Tableau Online. When you log back in you will authenticate via Okta.

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

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

Add new users to Tableau Online and have them authenticate via Okta:

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

Tableau Online - Add Users
Tableau Online - 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 Online - Add Users to this Site
Tableau Online - configure new user for Okta (SAML) authentication
Tableau Online - configure new user for Okta (SAML) authentication

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

Embed a Tableau dashboard in a website:

Now that you have at least have one user in Tableau Online authenticating via Okta, 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 Online and click the "Share" button.

Tableau Online Embedded Analytics - Tableau Share Button
Tableau Online 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 Online 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 Online</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 Online Embedded Analytics - Embed Code in an HTML page

Save and refresh your page.

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

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

SSO and 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 Okta for authentication. All they will see is your application's login screen.

So let's mimic that environment.

Sign out of Okta.

Sign out of Tableau Online. It turns out that this step is harder than it seems. There is no sign out button in Tableau Online when using Okta for authentication. So, I needed to do the following:

  1. Change my user's authentication method back to Tableau.
  2. Sign back in using my Tableau Online credentials.
  3. Change my user's authentication method to okta.com (SAML). This logs the user out again.

Sign back into Okta.

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

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

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

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

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

Conclusion:

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

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 Online 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, we have products that solve this.

Related content:

Embedded Analytics: 3 ways to embed Tableau dashboards into a web page
The purpose of this blog is to help you test 3 ways to embed Tableau dashboards in an embedded analytics application by setting up a simple web server using a Python 3 HTTP server and embedding a Tableau dashboard in a simple HTML web page. We won’t be covering Tableau Server / Tableau Online secu…
Trusted Ticket Authentication with Tableau Server
This article describes how Tableau trusted authentication provides Single Sign-On (SSO) for embedded analytics in third-party applications. With Tableau’s recent focus on Embedded Analytics, we at Zuar [https://zuar.com/] are getting a lot of questions about how to enable a seamless user experience…
Implementing Trusted Tickets for Tableau Server with NodeJS
This article implements trusted tickets as described in Trusted Ticket Authentication 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 uses the HTML5 &lt;template&gt; tag. The intende…