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>