Embed Dashboard to External Application Using JWT

Install PHP dependency

composer require firebase/php-jwt

Controller (For Yii2 Framework)

use Firebase\JWT\JWT;

// Tableau Server configuration
$tableauServer = "https://YOUR_TABLEAU_SERVER";
$clientId = "YOUR_CLIENT_ID"; // From the Connected App
$secretId = "YOUR_SECRET_ID"; // From the Connected App
$secretValue = "YOUR_SECRET_VALUE"; // From the Connected App

// JWT payload
$issuedAt = time();
$expirationTime = $issuedAt + 300; // JWT valid for 5 minutes
$payload = [
    "iss" => $clientId, // Client ID from Connected App
    "exp" => $expirationTime,
    "jti" => Yii::$app->security->generateRandomString(),
    "aud" => "tableau",
    "sub" => "embed_dashboard", // Tableau username
    "scp" => ["tableau:views:embed", "tableau:metrics:embed"]
];
$header = [
    'kid' => $secretId,
    'iss' => $clientId
];

// Generate JWT using the client secret
$jwt = JWT::encode($payload, $secretValue, 'HS256', null, $header);

return $this->render('index', [
    'jwt' => $jwt
]);

Controller (For Laravel Framework)

use Illuminate\Support\Str;
use Firebase\JWT\JWT;

// Tableau Server configuration
$tableauServer = "https://YOUR_TABLEAU_SERVER";
$clientId = "YOUR_CLIENT_ID"; // From the Connected App
$secretId = "YOUR_SECRET_ID"; // From the Connected App
$secretValue = "YOUR_SECRET_VALUE"; // From the Connected App

// JWT payload
$issuedAt = time();
$expirationTime = $issuedAt + 300; // JWT valid for 5 minutes
$payload = [
    "iss" => $clientId, // Client ID from Connected App
    "exp" => $expirationTime,
    "jti" => Str::random(32),
    "aud" => "tableau",
    "sub" => "embed_dashboard", // Tableau username
    "scp" => ["tableau:views:embed", "tableau:metrics:embed"]
];
$header = [
    'kid' => $secretId,
    'iss' => $clientId
];

// Generate JWT using the client secret
$jwt = JWT::encode($payload, $secretValue, 'HS256', null, $header);

return view('index', compact('jwt'));

View

<script type='module' src='https://evetdashboard.dvs.gov.my/javascripts/api/tableau.embedding.3.latest.min.js'></script>
<tableau-viz 
    id='tab-viz'
    src='https://evetdashboard.dvs.gov.my/views/evetpermit-premisInfografik/MenuUtamaDashboard'
    toolbar='hidden'
    token="<?php echo $jwt; ?>"
    >
</tableau-viz>

Table of properties and values for embedded objects and components

The following table lists the properties you can add to the <tableau-viz> and <tableau-authoring-viz> web components, or as JavaScript (JS) properties on the corresponding TableauViz and TableauAuthoringViz JavaScript objects.

HTML Property	JS Property	Accepted Values	Description	Applies to
src	Viz.src	string	Specifies the URL of the view. For security, always use HTTPS when you specify the URL.	<tableau-viz>, <tableau-authoring-viz>
hide-tabs	Viz.hideTabs	boolean	Indicates whether the tabs are hidden or shown.	<tableau-viz>
toolbar	Viz.toolbar	“top”, “bottom”, “hidden”	Indicates the position of the toolbar or if it should be hidden	<tableau-viz>
height	Viz.height	(e.g. “800px”)	Can be any valid CSS size specifier. If not specified, defaults to the published height of the view. See Size of the embedded view.	<tableau-viz>, <tableau-authoring-viz>
width	Viz.width	(e.g. “800px”)	Can be any valid CSS size specifier. If not specified, defaults to the published width of the view. See Size of the embedded view.	<tableau-viz>, <tableau-authoring-viz>
device	Viz.device	“default”, “desktop”, “tablet”, or “phone”	Specifies a device layout for a dashboard, if it exists. If not specified, defaults to loading a layout based on the smallest dimension of the hosting iframeelement.	<tableau-viz>
instance-id-to-clone	Viz.instanceIdToClone		Specifies the ID of an existing instance to make a copy (clone) of. This is useful if the user wants to continue analysis of an existing visualization without losing the state of the original. If the ID doesn’t refer to an existing visualization, the cloned version is derived from the original visualization.	<tableau-viz>
disable-url-actions	Viz.disableUrlActions	boolean	Indicates whether to suppress the execution of URL actions. This option doesn’t prevent the URL action event from being raised.	<tableau-viz>
hide-close-button	Viz.hideCloseButton	boolean	Indicates whether the Close button is shown or hidden. If not specified, defaults to false (the button is shown). This property also includes the “File/Close” menu item.	<tableau-authoring-viz>
hide-edit-button	Viz.hideEditButton	boolean	Indicates whether the Editbutton is shown or hidden. If not specified, defaults to false (the button is shown).	<tableau-viz>
hide-edit-in-desktop-button	Viz.hideEditInDesktopButton	boolean	Indicates whether the Edit in Desktop button is shown or hidden. If not specified, defaults to false (the button is shown).	<tableau-viz>, <tableau-authoring-viz>
iframe attributes			See iframe attributes	<tableau-viz>, <tableau-authoring-viz>
suppress-default-edit-behavior	Viz.suppressDefaultEditBehavior	boolean	Indicates whether the default edit behavior should be suppressed. If not specified, defaults to false (the default edit behavior is preserved). When set to true, this property suppresses what is normally done when the Close button, Edit button, or Edit in Desktopbuttons are clicked.	<tableau-viz>, <tableau-authoring-viz>
token	Viz.token	JSON Web Token	Holds the credentials and permissions. Only used for connected apps or external authorization services (EAS). See Authentication and Embedded Views. Not used for passwords or personal access tokens.	<tableau-viz>, <tableau-authoring-viz>, <tableau-pulse>

For more information about embedding objects and components, click here

Known Issue

This method working fine with all browser except Safari. Safari need some configuration to work, following is the steps:

1. Open Safari settings
2. Go to Privacy tab
3. Uncheck 'Website tracking'