Unable to embed tableau report using JWT token

1) Hi We are using below method to enable JWT (JSON Web Token) authentication in Tableau 2025

Create a Connected App:

Sign in to Tableau: Log in to Tableau Server or Tableau Cloud as an administrator.
Navigate to Connected Apps: Go to Settings > Connected Apps.
Create a New App: Click "Create a New Connected App".
Choose Trust Type: Select either "Direct Trust" or "OAuth 2.0 Trust" depending on your needs.
- Direct Trust: Requires you to generate a secret and configure the JWT on your external application.

Configure App Details: Provide a name, description, and other relevant information for the connected app.
Generate a Secret (for Direct Trust): If you chose Direct Trust, generate a secret key for the connected app.
Note Client ID and Secret: Make a note of the Client ID and the secret key (if applicable) as you'll need them to generate the JWT

2) We are using below python code to generate the JWT token

import jwt

import datetime

import uuid

username = "Username to login the tableau report sever"

client_id = "connected_app_client_id"

secret_id = "connected_app_secret_id"

secret_value = "connected_app_secret_value"

token = jwt.encode(

{

"iss": client_id,

"exp": datetime.datetime.utcnow() + datetime.timedelta(minutes=5),

"jti": str(uuid.uuid4()),

"aud": "tableau",

"sub": username,

"scp": ["tableau:views:embed", "tableau:metrics:embed"]

secret_value,

algorithm = "HS256",

headers = {

'kid': secret_id,

'iss': client_id

}

)

print(token)

3) We code embed the token in the URL and run thr HTML file.

<!DOCTYPE html>

<head>

<title>Embed Tableau Report</title>

<style>

⌗tableauViz {{

width: 100%;

height: 800px; /* Adjust height as needed */

}}

</style>

</head>

<body>

const tableauServerUrl = "https://ebixdt10";

const reportPath = "/views/HoldingsReport/ConsolidatedHoldingReport"

const jwtToken = "eyJhbGciOiJIUzI1NiIsImlzcyI6IjZkNjYyNTY1LWQ5N2EtNDQyYy1iNTllLWUzM2ZiYTViOTAwOSIsImtpZCI6ImUwMTYxM2M0LTlmZGEtNDJkYy04Y2ZlLWZhMDE3MzZlNGNkMCIsInR5cCI6IkpXVCJ9.eyJpc3MiOiI2ZDY2MjU2NS1kOTdhLTQ0MmMtYjU5ZS1lMzNmYmE1YjkwMDkiLCJleHAiOjE3NDM1OTY5MDYsImp0aSI6IjZmODc1ZGEzLTAzOWYtNGRlZi04NjMxLTEyM2FjMjc0NDlkZSIsImF1ZCI6InRhYmxlYXUiLCJzdWIiOiJzYW0iLCJzY3AiOlsidGFibGVhdTp2aWV3czplbWJlZCIsInRhYmxlYXU6bWV0cmljczplbWJlZCJdfQ.p76GM1a_sbYxoUbw_W6rGNJvGPgxqROeVQUjBlk9auE"; // JWT token generated from Python code

function initTableau() {{

const containerDiv = document.getElementById("tableauViz");

const url = tableauServerUrl + reportPath + "&jwt=" + encodeURIComponent(jwtToken);

const options = {{

hideTabs: false,

onFirstInteractive: function () {{

console.log("Tableau report is ready.");

}}

}};

const viz = new tableau.Viz(containerDiv, url, options);

}}

initTableau();

</script>

</body>

</html>

We are facing this issue while executing the html file we are still getting the tableau report server login page.

What could be the and what steps we are missing.

3 respostas

3 de abr. de 2025, 13:38

@Sameer Patil

Hi, again you are mixing api v2 with api v3 way to initialize the viz.

Please take a look of the code I have built and tested using api v3 and that I have posted in my previous answer:

<!DOCTYPE html>
 <html lang="en">
  <head>
	  <meta charset="UTF-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1.0">
	  <title>Embed Tableau Report</title>
	  <style>
	       ⌗tableauViz {{
	         width: 100%;
	         height: 800px; /* Adjust height as needed */
	       }}
	  </style>
  </head>
  <body>
	<div id="tableauViz"></div>
	<script type="module">
	  import {
		TableauViz
		} from 'https://ebixdt10/javascripts/api/tableau.embedding.3.latest.min.js';
	  const tableauServerUrl = "https://ebixdt10";
	  const reportPath = "/views/HoldingsReport/ConsolidatedHoldingReport" 
	  function initTableau(){
		const viz = new TableauViz();
		viz.src = tableauServerUrl + reportPath ;
		viz.token = "eyJhbGciOiJIUzI1NiIsImlzcyI6IjZkNjYyNTY1LWQ5N2EtNDQyYy1iNTllLWUzM2ZiYTViOTAwOSIsImtpZCI6ImUwMTYxM2M0LTlmZGEtNDJkYy04Y2ZlLWZhMDE3MzZlNGNkMCIsInR5cCI6IkpXVCJ9.eyJpc3MiOiI2ZDY2MjU2NS1kOTdhLTQ0MmMtYjU5ZS1lMzNmYmE1YjkwMDkiLCJleHAiOjE3NDM1OTY5MDYsImp0aSI6IjZmODc1ZGEzLTAzOWYtNGRlZi04NjMxLTEyM2FjMjc0NDlkZSIsImF1ZCI6InRhYmxlYXUiLCJzdWIiOiJzYW0iLCJzY3AiOlsidGFibGVhdTp2aWV3czplbWJlZCIsInRhYmxlYXU6bWV0cmljczplbWJlZCJdfQ.p76GM1a_sbYxoUbw_W6rGNJvGPgxqROeVQUjBlk9auE";
		viz.toolbar = 'hidden';
		document.getElementById('tableauViz').appendChild(viz);
	  }
	  initTableau();
	</script>
   </body>
</html>

So, a few markups for v3

a. There is no such function tableau.Viz(vizDiv, options.url, options). Instead there is a TableauViz object.

b. Thus, there is no need to create options (

const options = {

url: url + '?token=' + token,

width: '1484px',

height: '655px',

toolbar: 'bottom'

};

The options are managed through the properties of the TableauViz object:

https://help.tableau.com/current/api/embedding_api/en-us/docs/embedding_api_configure.html

		const viz = new TableauViz();
		viz.src = tableauServerUrl + reportPath ;
		viz.token = "eyJhbGciOiJIUzI1NiIsImlzcyI6IjZkNjYyNTY1LWQ5N2EtNDQyYy1iNTllLWUzM2ZiYTViOTAwOSIsImtpZCI6ImUwMTYxM2M0LTlmZGEtNDJkYy04Y2ZlLWZhMDE3MzZlNGNkMCIsInR5cCI6IkpXVCJ9.eyJpc3MiOiI2ZDY2MjU2NS1kOTdhLTQ0MmMtYjU5ZS1lMzNmYmE1YjkwMDkiLCJleHAiOjE3NDM1OTY5MDYsImp0aSI6IjZmODc1ZGEzLTAzOWYtNGRlZi04NjMxLTEyM2FjMjc0NDlkZSIsImF1ZCI6InRhYmxlYXUiLCJzdWIiOiJzYW0iLCJzY3AiOlsidGFibGVhdTp2aWV3czplbWJlZCIsInRhYmxlYXU6bWV0cmljczplbWJlZCJdfQ.p76GM1a_sbYxoUbw_W6rGNJvGPgxqROeVQUjBlk9auE";
		viz.toolbar = 'hidden';

c. The token is not used in the URL of the src of the Tableau Viz, instead it is one property of the TableauViz object.

So, take a look of the html page I attached in this answer, and in the previous one, please.

If this post resolves the question, would you be so kind to "Select as Best"?. This will help other users find the same answer/resolution and help community keep track of answered questions. Thank you.

Regards,

Diego Martinez

Tableau Visionary and Forums Ambassador

Adicionar um comentário

Escrever uma resposta...

0/9000

Unable to embed tableau report using JWT token

Ccc

Aprendizagem relacionada

Mais ajuda