In a recent Tableau blog post, we highlighted the “no code” option for leveraging the native Lightning web component for Tableau with seamless authentication, which allows users to bring Tableau Dashboards into Salesforce with clicks, not code.

But what if you want to enforce data security using Salesforce data authorizations? This is where you can combine the power of the Salesforce Platform with Tableau Connected Apps (CA) and User Attribute Functions (UAF) to enforce data security in a modern, scalable, and developer-friendly manner. Specifically, developers can dynamically query Salesforce Objects using Salesforce Object Query Language (SOQL), at runtime, to programmatically fetch data authorizations and pass those to Tableau using connected apps direct trust and JSON Web Tokens (JWT) to enforce data security for Tableau Dashboards.

In this blog post, we’ll highlight the solution architecture along with code examples, providing a comprehensive overview on delivering Tableau content directly to Salesforce using Salesforce Lightning web components (LWCs), Tableau Embedding v3 API, Apex, and Tableau connected apps with UAF. Please note that this example is leveraging Experience Cloud, but it can also be adopted in other Salesforce Clouds because it uses Apex and LWC.

Prerequisites

In order to follow along, you’ll need:

Solution overview and workflow

When the Salesforce Lightning Web Components (LWC) page loads in a browser, or when a user clicks on a Tableau content link in the sidebar menu, the InitViz() function is triggered. This function performs the following steps.

  1. It calls the Apex method generateJWT() to create a JSON Web Token (JWT).
  2. It constructs the URL for the Tableau content.
  3. It passes both the JWT and the URL to the Tableau Embedding v3 API.

The Tableau Embedding v3 API then initiates the AuthN/Z flow with Tableau, automatically passing the JWT to Tableau for secure user authentication using single sign-on (SSO). This authentication is facilitated by Tableau connected apps.

Once authenticated, the Tableau Viz or Pulse Metric is loaded directly within the component’s page. The authentication process leverages Tableau connected apps and JWT to enforce data security throughout the authenticated user’s session. The user’s account name (in this example, “Wheelworks”) is included in the JWT as the “Account” claim, which serves as a data authorization or entitlement to provide the user secure access to only records associated with the Wheelworks account.

For more information on JSON Web Tokens (JWT), visit JWT.io.

Solution architecture of Tableau and Salesforce Experience Cloud

This diagram illustrates the high-level architecture of the Tableau and Salesforce Experience Cloud solution outlined in this blog post. The vizEmbedSidebar is the Salesforce lightning web component (front end) and the CATokenGenerator is the Apex class (back end).

Solution architecture of Tableau and Salesforce Experience Cloud

The Tableau Embedding v3 API

The Tableau Embedding API v3 offers developers a modern and simplified approach to embedding and seamlessly integrating Tableau views and metrics into web applications. With the introduction of web components, the Embedding API v3 represents a significant advancement from its predecessor, the JavaScript API v2. Notably, it has been available since Tableau version 2021.4.

Please note that because the Tableau Embedding API v3 is implemented as an ECMAScript 6 (ES6) module, you can’t use the loadScript option available in Salesforce. Instead, it’s recommended that you load the script using a <script> tag in the <head> section of the Salesforce page. You can accomplish this through the Advanced Settings section of Experience Builder. Please refer to the example markup below for guidance.

Configure the Tableau connected apps JWT

Within the JWT, several claims serve specific purposes. The JWT scopes (“scp”) specify the authorizations defining which Tableau functionalities are accessible by the authenticated user for the duration of the user’s session.

In this example, for the duration of the SSO session, the subject scope designates the specific user (e.g., “embedded_user@gmail.com”), granting privileges to view and author Tableau visualizations while providing view-only access to Pulse Insights.

Additionally, user attribute function (UAF) claims are structured as key-value pairs. In this example, the claim “Account” is accompanied by a single-value array containing “Wheelworks.” Please note that multiple UAF claims and arrays with more than one value can be passed, providing developers unlimited flexibility in enforcing data security. For more detailed information on how to configure the Tableau CA JWT, please see the online help documentation for CA Direct Trust.

Tableau Connected Apps

Tableau connected apps are specifically designed for embedding Tableau Views and Pulse Metrics within external applications. They also serve as a gateway to authorize access to both the Tableau REST API and Tableau Metadata API.

Connected apps facilitate a modern and secure authentication and authorization experience, establishing a trust relationship between your Tableau Cloud site and external applications where Tableau content is embedded, including Salesforce Experience Cloud.

There are two primary configurations for connected apps: direct trust and OAuth 2.0 trust. In the previous blog post, the native LWC leverages connected apps OAuth 2.0 to establish trust between Tableau and Salesforce. In that solution, Salesforce is registered as the external authorization server (EAS). In most cases, the EAS is an IdP, but Salesforce also has these capabilities. In the connected apps direct trust, Tableau enables a seamless and secure authentication experience by facilitating an explicit trust relationship between your Tableau Cloud site and an external application where Tableau content is embedded. In this example, we will be harnessing the capabilities of direct trust.

Tableau User Attribute Functions (UAF)

User attribute functions (UAF) represent a technological leap that empowers developers to establish row-level or data security, at runtime, ensuring that the authenticated user only views data they are authorized to see within Tableau visualizations.

One significant advantage for developers is the elimination of the need to create and manage entitlement tables or manage proprietary security within the database tier. Those approaches are complex and difficult to manage at scale. Instead, at runtime, developers can pass data authorizations to Tableau via the JWT used for authentication and authorization (AuthN/Z), streamlining data security management in an efficient and scalable manner.

For instance, consider delivering content to external partners on a large scale, ranging from thousands to tens of thousands of partners. By implementing data security measures, developers can manage a single visualization and utilize UAF to enforce data security, ensuring that each partner user only accesses authorized data.

Given that Salesforce Partner users are managed within Salesforce and are directly linked to an account through their Contact record, Account metadata (such as ID and Name) can serve as a basis for enforcing data security. In this example, we’ll utilize the account name to enforce data security. Note that you can query any Salesforce objects using SOQL to define data security, however, in this example, we are using the Account object.

To achieve this, we’ll construct the JWT within the Salesforce Apex tier of the solution. Additionally, we’ll implement a call to invoke the Apex method from the frontend Lightning web component (LWC), where the Tableau content will be rendered on the Lightning web component’s page. Furthermore, we will securely store the Tableau connected app secrets and other Tableau Cloud configuration data using Salesforce custom metadata types, which is a best practice for managing application settings, configurations, or other secure data that needs to be accessible by Apex. Note that generating JWTs in the back end (Apex) ensures security, control, and compliance. Generating JWTs in the front end is considered an anti-pattern primarily because it exposes secrets to potential malicious users.

Salesforce Lightning web component (LWC) code

The Lightning Web Component framework is built on standard web technologies such as HTML, JavaScript, and CSS, and runs client-side, directly within web browsers. As highlighted in the example code below, this architecture enables dynamic interaction with Salesforce Apex methods.

In the initViz() method, we create the viz object from the HTML element (container), and then use the viz object to programmatically configure the embedded viz. This approach requires the <tableau-viz> web component to be included in the HTML.

Salesforce Apex code

Salesforce Apex allows developers to add business logic, manipulate data, work with APIs, and integrate with external systems.

In the generateJWT(String tokenType) method, we leverage Salesforce Apex to construct the JWT leveraged by Tableau connected apps in support of the Tableau AuthN/Z SSO flow.

Additional configurations that are required

Content Security Policy (CSP)
The Salesforce Lightning component framework uses Content Security Policy (CSP) to impose restrictions on content. To use third-party APIs, including Tableau, you are required to add the Tableau Cloud or Server’s fully qualified hostname as a trusted URL. See Manage Trusted URLs for more information.

Grant permissions for Salesforce users
Granting permission to Tableau Apex classes for community user profiles or permission sets involves configuring the necessary permissions in Salesforce. You will need to ensure that the users accessing the Tableau and Salesforce Experience Cloud solution have the appropriate permissions to access Apex classes.

Define required targets in Salesforce Lightning web component (LWC)
It’s required that you define targets in Lightning web component (LWC) metadata, so that the component is accessible to specific Salesforce pages. For Salesforce Experience Cloud, the specific target is the Lightning community page and default (see below). These are specified in the component’s metadata configuration file (.js-meta.xml). This file defines where the component can be used within Salesforce.

Conclusion

After reading this post, you should now have a thorough understanding of the Tableau and Salesforce Experience Cloud solution, and how to deliver Tableau content directly to Salesforce users leveraging Lightning Web Components, Apex, Embedding v3 API, while harnessing the power of Apex, SOQL, Tableau Connected Apps and Tableau User Attribute Functions (UAF) to enforce dynamic data security.

Additional Resources

Salesforce Development Fundamentals for Tableau Developers

If you are a Tableau developer and want to learn more about Salesforce development, we recommend reading more on Salesforce Lightning Web Components (LWC), Salesforce Apex, and Salesforce custom metadata types.

Salesforce Lightning Web Components (LWC)

Salesforce Lightning Web Components (LWC) offer a modern, component-based UI development experience within Salesforce. This framework allows developers to build fast, efficient, and reusable user interfaces for Salesforce applications.

Salesforce Apex

Salesforce Apex is a strongly typed, object-oriented programming language that allows developers to add business logic, manipulate data, work with APIs, and integrate with external systems. In this example, we leverage Salesforce Apex to construct the JWT leveraged in the Tableau AuthN/Z flow.

Salesforce custom metadata types

Salesforce custom metadata types are specialized entities within the Salesforce Platform designed to store custom configurations that can be utilized by applications. In this example, we leverage custom metadata types to securely store Tableau connected apps secrets and other Tableau Cloud configuration data.

About the author

Justin Craycraft is a Distinguished Solution Engineer at Tableau/Salesforce. He’s been with Tableau/Salesforce for almost 11 years, and brings over 22 years of combined technology experience. He’s a Texas Longhorn, having earned his Electrical Engineering degree from the University of Texas at Austin.

Get the latest Salesforce Developer blog posts and podcast episodes via Slack or RSS.

Add to Slack Subscribe to RSS