Using embed secrets (JWTs)

​

What are Embed Secrets?

Embed secrets are a key id, key value pair that allow you to generate JWTs to embed your dashboards. The JWT Explo uses is a JWT with a JWE body. You can find more information about JWTs at this link. You would use this token the same way you use your dashboard id, customer token pair, but the token has two extra functions:

• Hides this dashboard id and customer token from your customers
• Expires at a cadence you set (default is one day)

​

Generating a JWT

First, go to the Data Visibility Groups section in the settings page, create a new secret, and copy your secret’s value and id. Then, you have two options

​

Use Explo’s API to generate the JWT

For convenience, Explo exposes an endpoint you can use to generate a JWT for your customer/dashboard pair. You could hit this endpoint when your customer loads the page and provide the JWT immediately to your embedded component.

See here for docs on this endpoint

​

Manually generate the JWT

You can also generate the JWT yourself. The specs of the JWT are as follows

Claims:

• cst: your customer id, the one you provided to Explo
• dsh: your dashboard embed id, taken from the Explo app
• exp: the desired expiration timestamp
• kid: the key id you’re using to sign and encrypt the jwt
• alg: A256GCM

from jose import jwe

jwt = jwe.encrypt(
  json.dumps(
      {
          "exp": (datetime.utcnow() + timedelta(hours=2)).timestamp(),
          "cst": "customer_1",
          "dsh": "abcdef",
      }
  ),
  encryption="A256GCM",
  key=key_value,
  kid=key_id,
).decode("utf-8")

import * as jose from "jose";

const enc = new TextEncoder();
const secret = enc.encode(key_value);

const jwt = new jose.EncryptJWT({
  cst: "customer_1",
  dsh: "abcdef",
})
  .setProtectedHeader({ alg: "dir", enc: "A256GCM", kid: key_id })
  .setIssuedAt()
  .setExpirationTime("2h")
  .encrypt(secret);

​

Using the JWT

​

Web Component

See here for more details on using the web component.

<explo-dashboard
    dash-jwt="<your-jwt>"
    updateUrlParams={true}
    isProduction={true}
    environment="prod"
    refresh-minutes={10}
    variables={JSON.stringify({ element1: 'value', element2: 'value2' })}
    locale-code="fr-fr">
</explo-dashboard>

​

iFrame

See here for more details on using an iFrame.

<iframe
  src="https://app.explo.co/iframe/<jwt>
  style="width: 100%;border: none;height: 100vh;"
>
</iframe>