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.

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'