Embed (JWT Web Tokens)

 > Embed > Embed (JWT Web Tokens)

 

This type of Embed allows you to show a dashboard in your site/portal using the HTML <iframe> Tag and JWT Web Tokens in a very secure fashion and have complete control over:

 

  • For how long the Dashboard can be accessed using the generated token
  • The default values for the Variables
  • What Variables the user can manipulate

Note
Currently Embed with JWT tokens is only available in Viur private instances

 

1º Grab the Embed Secret from the Company page

Note
You will need to have a role of admin on the company to access the Embed Secret.

embed secret

Waning
As an admin you can request the embed secret to be reset. This will immediately invalidate all generated tokens that were encoded with the previous secret.

 

2º Generate the iframe using code

 

PHP Example (using firebase/php-jwt Library)
<?php

require __DIR__ . '/vendor/autoload.php'; // If using composer

use Firebase\JWT\JWT;

$key = "YOUR EMBED SECRET";
$dashboard = "DASHBOARD ID HERE";

$payload = array(
    "iat" => time(), //
    "exp" => time() + (60 * 120), // Access will expire after 120 minutes (2 hours)
    "dashboard" => $dashboard,
    "variables" => array(
        "VARIABLE_NAME" => array(
            "enabled" => true, // Can the variable be controlled by the user? (false by default)
            "value" => "value", // Set the variable to a specific value or multiple values with array("value_1", "value_2")
        ),
        "date_range_variable" => array(
            "enabled" => true, // Can the variable be controlled by the user? (false by default)
            "value" => "today", // "today", "yesterday", "this_year", "last_week" ... or array("2020-01-01", "2020-01-31")
        ),
        "hidden_variable" => array(
            "value" => 5 // Will override the fixed value of this hidden/fixed variable
        )
    )
);

$jwt = JWT::encode($payload, $key);

echo '<iframe width="1275" height="600" src="https://app.viurdata.com/#/dashboards/' . $dashboard . '/embed/' . $jwt . '"></iframe>';

?>

Other Languages examples will be coming soon. Reach out if you require assistance setting up in other languages.

 

A list of Libraries to work with JWT Tokens can be found here.

 

Payload Requirements

 

A valid JWT payload to be accepted by Viur should include the following claims:

 

  • iat (Issued at): The time at which the JWT was issued (time in seconds since the Unix Epoch)
  • exp (Expiration time): The expiration time after which the JWT will be expired (time in seconds since the Unix Epoch)

    Note
    By default Viur will expire a JWT token 24 hours from the issued at claim so the maximum time for exp needs to be below 24 hours from iat.

  • dashboard (Dashboard ID): The ID of the dashboard to show
  • variables (Variables - Optional): To set the behaviour of all the available variables in the dashboard

    Note
    By default all available variables in the dashboard will hidden and disabled. This means a user will not be able to control it and set a new value.
    To make a specific variable user controllable you will need to set "enabled" to "true"

    The variable object is made of with a property key that is the name of the variable
    Set "enabled" to true so the variable is visible (controllable) so other values can be set by the users
    Set "value" to specific value(s) - NOTE: The value will always stay the same if the variable is of type hidden/fixed and/or if "enabled" is set to false or not set (false by default)

      "variables": {
          "variable_1": {
            "enabled": true,
            "value": "value"
          },
          "variable_2": {
            "enabled": true,
            "value": [
              "value_1",
              "value_2"
            ]
          },
          "date_range_variable": {
            "enabled": true,
            "value": "today"
          },
          "hidden_variable": {
            "value": 5
          }
        }
    
Still need help? Get in touch!
Last updated on 9th Dec 2023