# Embed Dashboard to External Application Using JWT

Install PHP dependency

```bash
composer require firebase/php-jwt
```

Controller (For Yii2 Framework)

```php
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)

```php
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

```html
<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.

<table id="bkmrk-html-property-js-pro" style="width: 105.714%;"><thead><tr><th style="width: 13.4717%;">HTML Property</th><th style="width: 13.8227%;">JS Property</th><th style="width: 13.9452%;">Accepted Values</th><th style="width: 41.0012%;">Description</th><th style="width: 17.7592%;">Applies to</th></tr></thead><tbody><tr><td style="width: 13.4717%;">src</td><td style="width: 13.8227%;">Viz.src</td><td style="width: 13.9452%;">string</td><td style="width: 41.0012%;">Specifies the URL of the view. For security, always use HTTPS when you specify the URL.</td><td style="width: 17.7592%;">`<tableau-viz>`, `<tableau-authoring-viz>`</td></tr><tr><td style="width: 13.4717%;">hide-tabs</td><td style="width: 13.8227%;">Viz.hideTabs</td><td style="width: 13.9452%;">boolean</td><td style="width: 41.0012%;">Indicates whether the tabs are hidden or shown.</td><td style="width: 17.7592%;">`<tableau-viz>`</td></tr><tr><td style="width: 13.4717%;">toolbar</td><td style="width: 13.8227%;">Viz.toolbar</td><td style="width: 13.9452%;">“top”, “bottom”, “hidden”</td><td style="width: 41.0012%;">Indicates the position of the toolbar or if it should be hidden</td><td style="width: 17.7592%;">`<tableau-viz>`</td></tr><tr><td style="width: 13.4717%;">height</td><td style="width: 13.8227%;">Viz.height</td><td style="width: 13.9452%;">(e.g. “800px”)</td><td style="width: 41.0012%;">Can be any valid CSS size specifier. If not specified, defaults to the published height of the view. See [Size of the embedded view](https://help.tableau.com/current/api/embedding_api/en-us/docs/embedding_api_configure.html#size-of-the-embedded-view).</td><td style="width: 17.7592%;">`<tableau-viz>`, `<tableau-authoring-viz>`</td></tr><tr><td style="width: 13.4717%;">width</td><td style="width: 13.8227%;">Viz.width</td><td style="width: 13.9452%;">(e.g. “800px”)</td><td style="width: 41.0012%;">Can be any valid CSS size specifier. If not specified, defaults to the published width of the view. See [Size of the embedded view](https://help.tableau.com/current/api/embedding_api/en-us/docs/embedding_api_configure.html#size-of-the-embedded-view).</td><td style="width: 17.7592%;">`<tableau-viz>`, `<tableau-authoring-viz>`</td></tr><tr><td style="width: 13.4717%;">device</td><td style="width: 13.8227%;">Viz.device</td><td style="width: 13.9452%;">“default”, “desktop”, “tablet”, or “phone”</td><td style="width: 41.0012%;">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 `iframe`element.</td><td style="width: 17.7592%;">`<tableau-viz>`</td></tr><tr><td style="width: 13.4717%;">instance-id-to-clone</td><td style="width: 13.8227%;">Viz.instanceIdToClone</td><td style="width: 13.9452%;"> </td><td style="width: 41.0012%;">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.</td><td style="width: 17.7592%;">`<tableau-viz>`</td></tr><tr><td style="width: 13.4717%;">disable-url-actions</td><td style="width: 13.8227%;">Viz.disableUrlActions</td><td style="width: 13.9452%;">boolean</td><td style="width: 41.0012%;">Indicates whether to suppress the execution of URL actions. This option doesn’t prevent the URL action event from being raised.</td><td style="width: 17.7592%;">`<tableau-viz>`</td></tr><tr><td style="width: 13.4717%;">hide-close-button</td><td style="width: 13.8227%;">Viz.hideCloseButton</td><td style="width: 13.9452%;">boolean</td><td style="width: 41.0012%;">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.</td><td style="width: 17.7592%;">`<tableau-authoring-viz>`</td></tr><tr><td style="width: 13.4717%;">hide-edit-button</td><td style="width: 13.8227%;">Viz.hideEditButton</td><td style="width: 13.9452%;">boolean</td><td style="width: 41.0012%;">Indicates whether the **Edit**button is shown or hidden. If not specified, defaults to `false` (the button is shown).</td><td style="width: 17.7592%;">`<tableau-viz>`</td></tr><tr><td style="width: 13.4717%;">hide-edit-in-desktop-button</td><td style="width: 13.8227%;">Viz.hideEditInDesktopButton</td><td style="width: 13.9452%;">boolean</td><td style="width: 41.0012%;">Indicates whether the **Edit in Desktop** button is shown or hidden. If not specified, defaults to `false` (the button is shown).</td><td style="width: 17.7592%;">`<tableau-viz>`, `<tableau-authoring-viz>`</td></tr><tr><td style="width: 13.4717%;">iframe attributes</td><td style="width: 13.8227%;"> </td><td style="width: 13.9452%;"> </td><td style="width: 41.0012%;">See [iframe attributes](https://help.tableau.com/current/api/embedding_api/en-us/docs/embedding_api_configure.html#add-formatting-to-the-viz-using-iframe-attributes)</td><td style="width: 17.7592%;">`<tableau-viz>`, `<tableau-authoring-viz>`</td></tr><tr><td style="width: 13.4717%;">suppress-default-edit-behavior</td><td style="width: 13.8227%;">Viz.suppressDefaultEditBehavior</td><td style="width: 13.9452%;">boolean</td><td style="width: 41.0012%;">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 Desktop**buttons are clicked.</td><td style="width: 17.7592%;">`<tableau-viz>`, `<tableau-authoring-viz>`</td></tr><tr><td style="width: 13.4717%;">token</td><td style="width: 13.8227%;">Viz.token</td><td style="width: 13.9452%;">JSON Web Token</td><td style="width: 41.0012%;">Holds the credentials and permissions. Only used for connected apps or external authorization services (EAS). See [Authentication and Embedded Views](https://help.tableau.com/current/api/embedding_api/en-us/docs/embedding_api_auth.html). Not used for passwords or personal access tokens.</td><td style="width: 17.7592%;">`<tableau-viz>`, `<tableau-authoring-viz>`, `<tableau-pulse>`</td></tr></tbody></table>

For more information about embedding objects and components, [click here](https://help.tableau.com/current/api/embedding_api/en-us/docs/embedding_api_configure.html)

#### **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'