Metabase is a powerful open-source analytics platform that allows you to explore and visualize data quickly. One of its most valuable features is the ability to embed dashboards in other applications securely. When working with embedded charts and reports in Metabase, securing the data using a JWT (JSON Web Token) is essential. This guide will walk through the steps to obtain a safe embed URL using JWT tokens for secure display of Metabase dashboards. We will cover everything from generating the token to embedding the dashboard in your frontend.
Why Use JWT for Embedding Metabase Dashboards?
When embedding dashboards, security is paramount. JWT provides a secure and efficient method for authenticating and authorizing users before granting them access to specific dashboards. By using JWT, you can ensure that only users with valid tokens can view your embedded content. Here's how to do it step by step.
Steps to Embed Metabase Dashboards Securely with JWT:
1. Obtain the Metabase Site URL
The first step is to locate the URL of your Metabase instance. This will typically be the base URL where Metabase is hosted.
example, if Metabase is running on a test server, your URL might look like this:
2. Get the Metabase Secret Key
Metabase uses a secret key to sign the JWT token. This key can be found in the Metabase instance settings.
An example of a Metabase secret key:
8411146f4d8d6350856d5897f2414f78873f08cff16d398530385d5fa0538a69
Keep this secret key safe, as it will be used to generate the token.
3. Generate a JWT Token
Once you have the Metabase site URL and secret key, you can proceed to generate the JWT token. The Atman server (or your backend system) will use these credentials to create the token, which is essential for embedding dashboards securely.
A sample JWT token may look like this:
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCIsImN0eSI6InRleHQvcGxhaW4ifQ.eyJwYXJhbXMiOnt9LCJyZXNvdXJjZSI6eyJkYXNoYm9hcmQiOjE5NH0sImV4cCI6MTcyNDMyNjM2MH0.xlIvL5ceqjp2p8xdpx79F2RLCEaM192sonlXx4dVBBY
This token contains a header, payload, and signature that Metabase uses to verify and authorize the embed request.
4. Passing the JWT Token in the Frontend
Once the JWT token is generated, it needs to be passed to the frontend as part of the request to embed the dashboard. In this scenario, the JWT token is sent to a specific endpoint.
In our frontend code, pass the generated JWT token as an endpoint along with the Dashboard ID as a parameter to display the charts.
Example: /b/getjwttoken, method: GET, with params: { "payload": {"resource": {"dashboard": 194}, "params": {}}}.
The frontend sends this request to your backend or Metabase server to retrieve the embed link.
5. Retrieve the Safe Embed URL
Once the request is sent, the backend responds with a safe embed URL. This URL includes the JWT token and is specifically generated for the requested dashboard.
You can inspect this URL in the browser's developer tools after making the request.
An example of a safe embed URL might look like this:
You can now use this embed URL in an <iframe> or directly within your frontend application to display the Metabase dashboard. You can also add query parameters like bordered and titled to customize the appearance:
Conclusion
JWT tokens are essential for securely embedding Metabase dashboards. By following the above steps, you can generate a token, send it through your frontend, and retrieve a secure URL for embedding dashboards. This ensures that your data remains protected and only authorized users can access the reports.
Reference