diff --git a/site/sigmaguides/src/embedding_12_secure_embedding_into_streamlit/assets/ae4.png b/site/sigmaguides/src/embedding_12_secure_embedding_into_streamlit/assets/ae4.png index 9d7bc178..c56cf69c 100644 Binary files a/site/sigmaguides/src/embedding_12_secure_embedding_into_streamlit/assets/ae4.png and b/site/sigmaguides/src/embedding_12_secure_embedding_into_streamlit/assets/ae4.png differ diff --git a/site/sigmaguides/src/embedding_12_secure_embedding_into_streamlit/assets/ae4a.png b/site/sigmaguides/src/embedding_12_secure_embedding_into_streamlit/assets/ae4a.png index db86f2df..4371e686 100644 Binary files a/site/sigmaguides/src/embedding_12_secure_embedding_into_streamlit/assets/ae4a.png and b/site/sigmaguides/src/embedding_12_secure_embedding_into_streamlit/assets/ae4a.png differ diff --git a/site/sigmaguides/src/embedding_12_secure_embedding_into_streamlit/assets/sl19.png b/site/sigmaguides/src/embedding_12_secure_embedding_into_streamlit/assets/sl19.png index 2644575c..2ad22e3c 100644 Binary files a/site/sigmaguides/src/embedding_12_secure_embedding_into_streamlit/assets/sl19.png and b/site/sigmaguides/src/embedding_12_secure_embedding_into_streamlit/assets/sl19.png differ diff --git a/site/sigmaguides/src/embedding_12_secure_embedding_into_streamlit/assets/sp10a.png b/site/sigmaguides/src/embedding_12_secure_embedding_into_streamlit/assets/sp10a.png new file mode 100644 index 00000000..3d5e6640 Binary files /dev/null and b/site/sigmaguides/src/embedding_12_secure_embedding_into_streamlit/assets/sp10a.png differ diff --git a/site/sigmaguides/src/embedding_12_secure_embedding_into_streamlit/assets/sp11.png b/site/sigmaguides/src/embedding_12_secure_embedding_into_streamlit/assets/sp11.png index 9c7d9029..35563bf0 100644 Binary files a/site/sigmaguides/src/embedding_12_secure_embedding_into_streamlit/assets/sp11.png and b/site/sigmaguides/src/embedding_12_secure_embedding_into_streamlit/assets/sp11.png differ diff --git a/site/sigmaguides/src/embedding_12_secure_embedding_into_streamlit/embedding_9_secure_embedding_into_streamlit.md b/site/sigmaguides/src/embedding_12_secure_embedding_into_streamlit/embedding_9_secure_embedding_into_streamlit.md index 9aed16bd..3d009082 100644 --- a/site/sigmaguides/src/embedding_12_secure_embedding_into_streamlit/embedding_9_secure_embedding_into_streamlit.md +++ b/site/sigmaguides/src/embedding_12_secure_embedding_into_streamlit/embedding_9_secure_embedding_into_streamlit.md @@ -266,19 +266,19 @@ git config core.sparseCheckout true Specify the folder you want to clone by adding it to the sparse-checkout configuration: ```code -echo "embedding-streamlit/" >> .git/info/sparse-checkout +echo "embedding_signed_URL/streamlit/" >> .git/info/sparse-checkout ``` -At this point, we have run each command and not seen any errors. +At this point, we have run each command and not seen any errors: + + Finally, pull the specified folder from the repository: ```code git pull origin main ``` -After the command runs, click the button to `Open Folder`: - -We can now see the project called `embedding-streamlit`: +We can now see the project called `streamlit`: @@ -361,13 +361,15 @@ We can use these credentials for all embeds, but you may create as many credenti Open the `embedding-streamlit` folder in VSCode and open the `.env` file. -**Make sure to replace the placeholder values with your actual values for the four variables:** +Replace the placeholder values for `EMBED_PATH`, `CLIENT_ID`, `EMBED_SECRET`, `EMAIL` and `EXTERNAL_USER_TEAM` to match your values created earlier. + +For `ACCOUNT_TYPE` use `Pro` for now. After updating `.env` with your values, `save` the file. -Open a new terminal window in VSCode and run the command: +In VSCode terminal run the command: ```code conda activate streamlit ``` diff --git a/site/sigmaguides/src/embedding_15_embed_sdk/embedding_15_embed_sdk.md b/site/sigmaguides/src/embedding_15_embed_sdk/embedding_15_embed_sdk.md index 655d4a70..8c702a71 100644 --- a/site/sigmaguides/src/embedding_15_embed_sdk/embedding_15_embed_sdk.md +++ b/site/sigmaguides/src/embedding_15_embed_sdk/embedding_15_embed_sdk.md @@ -175,7 +175,7 @@ git config core.sparseCheckout true Specify the folder you want to clone by adding it to the sparse-checkout configuration: ```code -echo "embed-sdk-react" > .git/info/sparse-checkout +echo "embedding_sdk_react" > .git/info/sparse-checkout ``` At this point, we have run each command and not seen any errors: diff --git a/site/sigmaguides/src/embedding_16_JWT/assets/accounttypes17fixed.png b/site/sigmaguides/src/embedding_16_JWT/assets/accounttypes17fixed.png index 9137d4fe..b0f4b5bb 100644 Binary files a/site/sigmaguides/src/embedding_16_JWT/assets/accounttypes17fixed.png and b/site/sigmaguides/src/embedding_16_JWT/assets/accounttypes17fixed.png differ diff --git a/site/sigmaguides/src/embedding_16_JWT/assets/accounttypes18.png b/site/sigmaguides/src/embedding_16_JWT/assets/accounttypes18.png index c286d92f..b4055e29 100644 Binary files a/site/sigmaguides/src/embedding_16_JWT/assets/accounttypes18.png and b/site/sigmaguides/src/embedding_16_JWT/assets/accounttypes18.png differ diff --git a/site/sigmaguides/src/embedding_16_JWT/assets/accounttypes20.png b/site/sigmaguides/src/embedding_16_JWT/assets/accounttypes20.png index 6e76a65b..b67f457f 100644 Binary files a/site/sigmaguides/src/embedding_16_JWT/assets/accounttypes20.png and b/site/sigmaguides/src/embedding_16_JWT/assets/accounttypes20.png differ diff --git a/site/sigmaguides/src/embedding_16_JWT/assets/accounttypes22.png b/site/sigmaguides/src/embedding_16_JWT/assets/accounttypes22.png index ddb884c5..d71d1a64 100644 Binary files a/site/sigmaguides/src/embedding_16_JWT/assets/accounttypes22.png and b/site/sigmaguides/src/embedding_16_JWT/assets/accounttypes22.png differ diff --git a/site/sigmaguides/src/embedding_16_JWT/assets/jwt1.png b/site/sigmaguides/src/embedding_16_JWT/assets/jwt1.png index bd26761e..c910e5ec 100644 Binary files a/site/sigmaguides/src/embedding_16_JWT/assets/jwt1.png and b/site/sigmaguides/src/embedding_16_JWT/assets/jwt1.png differ diff --git a/site/sigmaguides/src/embedding_16_JWT/assets/jwt2.png b/site/sigmaguides/src/embedding_16_JWT/assets/jwt2.png index fd9e61ce..42da8fe3 100644 Binary files a/site/sigmaguides/src/embedding_16_JWT/assets/jwt2.png and b/site/sigmaguides/src/embedding_16_JWT/assets/jwt2.png differ diff --git a/site/sigmaguides/src/embedding_16_JWT/assets/jwt4.png b/site/sigmaguides/src/embedding_16_JWT/assets/jwt4.png index 16dee3c0..bdb66535 100644 Binary files a/site/sigmaguides/src/embedding_16_JWT/assets/jwt4.png and b/site/sigmaguides/src/embedding_16_JWT/assets/jwt4.png differ diff --git a/site/sigmaguides/src/embedding_16_JWT/embedding_16_JWT.md b/site/sigmaguides/src/embedding_16_JWT/embedding_16_JWT.md index 6421e30b..9e1b9c52 100644 --- a/site/sigmaguides/src/embedding_16_JWT/embedding_16_JWT.md +++ b/site/sigmaguides/src/embedding_16_JWT/embedding_16_JWT.md @@ -154,12 +154,12 @@ cd {/path/to/your/directory} Make a new directory: ```code -mkdir sigma_secure_embed_JWT +mkdir sigma_secure_embed_jwt ``` Change to the new directory: ```code -cd sigma_secure_embed_JWT +cd sigma_secure_embed_jwt ``` Execute the terminal command: @@ -179,7 +179,7 @@ git config core.sparseCheckout true Specify the folder you want to clone by adding it to the sparse-checkout configuration: ```code -echo "sigma_secure_embed_JWT/" >> .git/info/sparse-checkout +echo "embedding_jwt/jwt/" >> .git/info/sparse-checkout ``` At this point, we have run each command and not seen any errors: @@ -195,13 +195,9 @@ After the command runs, click the button to `Open Folder`: -Navigate to where your folder is and click `Open`: +Navigate to where your folder is and click `Open`. -For example, our folder is in the `GitHub` folder on the local machine: - - - -We can now see the project called `sigma_secure_embed_JWT`: +We can now see the project called `embedding_JWT` with the files stored in the `jwt` folder: @@ -216,7 +212,6 @@ Duration: 5 We will create the required information to pass to the developer of the Parent application (in this case the developer is us). ### Sigma Embed Client credentials - Embed `Client credentials` ("credentials") are a crucial component for creating a Sigma embed. These credentials are encoded within your embed URL, providing an additional layer of validation to ensure the embed's authenticity and security. The credentials are made up of the `Client ID` and `Client Secret`, and are generated using the Sigma UI. @@ -337,7 +332,7 @@ The first thing we want to do is click the `Save As` button, choose where to sto You may have noticed that Sigma provides `folders`, a `My Documents` folder and also [workspaces](https://help.sigmacomputing.com/docs/manage-workspaces). This enables a variety of use-cases to be possible with regards to how documents are stored, managed and shared with others. ### BASE_URL vs. Embed Path -For those users who have used Sigma embedding before, this step is a little different. We used to use Sigma's UI to create a "Workbook URL" > "Embed Path". **This is no longer required when using JWT.** +For those users who have used Sigma embedding before, this step is a little different. We used to use Sigma's UI to create a `Workbook URL` > `Embed Path`. **This is no longer required when using JWT.** With JWT embedding, we simply use the `Published` url, taken directly from the browser. @@ -373,7 +368,7 @@ Return to VSCode and open the file `.env`. It will have placeholders for the val -Replace the three placeholders with the values we saved from earlier steps: +Replace the six placeholders with the values we saved from earlier steps: For example: @@ -386,65 +381,46 @@ We have commented the code in the Embed-API script so that you can understand wh ```code -// embed-api.js - -const jwt = require('jsonwebtoken'); // Import jsonwebtoken library for handling JWTs -const { v4: uuid } = require('uuid'); // Import uuid for generating unique identifiers -const dotenv = require('dotenv'); // Import dotenv for loading environment variables - -dotenv.config(); // Load environment variables from .env file - -// Define constants for the embed URL and session length -const BASE_URL = process.env.BASE_URL; -const SESSION_LENGTH = Math.min(process.env.SESSION_LENGTH || 3600, 2592000); // Max 30 days in seconds +const jwt = require('jsonwebtoken'); +const { v4: uuid } = require('uuid'); +const dotenv = require('dotenv'); -// Log important configuration details to ensure they are correctly set -console.log('BASE_URL:', BASE_URL); -console.log('SESSION_LENGTH:', SESSION_LENGTH); -console.log('EMBED_CLIENT_ID:', process.env.EMBED_CLIENT_ID); // Verify the client ID +dotenv.config(); -// Function to generate a signed URL for embedding Sigma dashboards async function generateSignedUrl() { try { - // Retrieve the secret and email from environment variables - const secret = process.env.EMBED_SECRET; - const email = process.env.EMBED_EMAIL; - const time = Math.floor(Date.now() / 1000); // Generate the current time as a Unix timestamp + const time = Math.floor(Date.now() / 1000); // Current Unix timestamp + const expirationTime = time + Math.min(parseInt(process.env.SESSION_LENGTH) || 3600, 2592000); - // Generate JWT with claims - // See https://help.sigmacomputing.com/docs/create-an-embed-api-with-json-web-tokens for list of available claims const token = jwt.sign({ - sub: email, // Subject (the email of the user) - iss: process.env.EMBED_CLIENT_ID, // Issuer (client ID) - jti: uuid(), // JWT ID (unique identifier for the token) - iat: time, // Issued at time (current time) - exp: time + SESSION_LENGTH, // Expiration time (current time + session length) - account_type: "lite", // Optional claim for account type - teams: ["Sales_People"] // Optional claim for user teams - }, secret, { - algorithm: 'HS256', // Algorithm used for signing the JWT - keyid: process.env.EMBED_CLIENT_ID // Key ID for the JWT header, should match Sigma's expectations + sub: process.env.EMAIL, + iss: process.env.CLIENT_ID, + jti: uuid(), + iat: time, + exp: expirationTime, + account_type: process.env.ACCOUNT_TYPE, + team: process.env.TEAM, + }, process.env.SECRET, { + algorithm: 'HS256', + keyid: process.env.CLIENT_ID }); - // Decode the JWT to inspect its content and log it - const decodedToken = jwt.decode(token, { complete: true }); - console.log('Decoded JWT:', decodedToken); // Log the decoded JWT for debugging - - // Construct the signed embed URL by appending the JWT and embed parameters - const signedEmbedUrl = `${BASE_URL}?:jwt=${token}&:embed=true`; - - // Log the constructed signed URL + const signedEmbedUrl = `${process.env.BASE_URL}?:jwt=${token}&:embed=true`; + // Log important configuration details to ensure they are correctly set + console.log('BASE_URL:', process.env.BASE_URL); + console.log('CLIENT_ID:', process.env.CLIENT_ID); // Verify the client ID + console.log('SESSION_LENGTH:', process.env.SESSION_LENGTH); + console.log('TEAMS:', process.env.TEAM); + console.log('ACCOUNT_TYPE:', process.env.ACCOUNT_TYPE); console.log('Signed Embed URL:', signedEmbedUrl); - return signedEmbedUrl; // Return the signed embed URL + return signedEmbedUrl; } catch (error) { - // Log any errors that occur during JWT generation console.error("Failed to generate JWT:", error); - throw new Error("JWT generation failed"); // Throw an error if JWT generation fails + throw new Error("JWT generation failed"); } } -// Export the generateSignedUrl function so it can be used in other files module.exports = { generateSignedUrl }; ``` @@ -458,6 +434,11 @@ In VSCode, open a new terminal session, make sure to be in the correct folder (a Run the command: ```code +npm install nodemon +``` + +Next, run the command: +```code nodemon server.js ``` @@ -544,9 +525,7 @@ After adjusting the `.env` file for the page URL, the embed looks like this: Our .env looks like this (just for your information): ```code -# JWT .env file - -# Sigma embed configuration - REQUIRED parameters: +# .env configuration file for Sigma Embed JWT QuickStart # Workbook: #BASE_URL=https://app.sigmacomputing.com/XXXXXX/workbook/My-Plugs-Sales-Table-JWT-28xgywpg21TkRWtz3jVRCe diff --git a/site/sigmaguides/src/embedding_17_link_sharing/assets/ae16.png b/site/sigmaguides/src/embedding_17_link_sharing/assets/ae16.png index d7f3324d..c982029f 100644 Binary files a/site/sigmaguides/src/embedding_17_link_sharing/assets/ae16.png and b/site/sigmaguides/src/embedding_17_link_sharing/assets/ae16.png differ diff --git a/site/sigmaguides/src/embedding_17_link_sharing/assets/ae17.png b/site/sigmaguides/src/embedding_17_link_sharing/assets/ae17.png index ca1f5a7e..0c591f89 100644 Binary files a/site/sigmaguides/src/embedding_17_link_sharing/assets/ae17.png and b/site/sigmaguides/src/embedding_17_link_sharing/assets/ae17.png differ diff --git a/site/sigmaguides/src/embedding_17_link_sharing/assets/ls16.png b/site/sigmaguides/src/embedding_17_link_sharing/assets/ls16.png index 4d4e8452..33185c81 100644 Binary files a/site/sigmaguides/src/embedding_17_link_sharing/assets/ls16.png and b/site/sigmaguides/src/embedding_17_link_sharing/assets/ls16.png differ diff --git a/site/sigmaguides/src/embedding_17_link_sharing/assets/ls5.png b/site/sigmaguides/src/embedding_17_link_sharing/assets/ls5.png index 8965de22..5063832f 100644 Binary files a/site/sigmaguides/src/embedding_17_link_sharing/assets/ls5.png and b/site/sigmaguides/src/embedding_17_link_sharing/assets/ls5.png differ diff --git a/site/sigmaguides/src/embedding_17_link_sharing/embedding_17_link_sharing.md b/site/sigmaguides/src/embedding_17_link_sharing/embedding_17_link_sharing.md index 31dcc081..7ece5eb2 100644 --- a/site/sigmaguides/src/embedding_17_link_sharing/embedding_17_link_sharing.md +++ b/site/sigmaguides/src/embedding_17_link_sharing/embedding_17_link_sharing.md @@ -270,7 +270,7 @@ git config core.sparseCheckout true Specify the folder you want to clone by adding it to the sparse-checkout configuration: ```code -echo "embedding/sigma_embed_link_sharing/" > .git/info/sparse-checkout +echo "embedding_signed_url/link_sharing/" > .git/info/sparse-checkout ``` At this point, we have run each command and not seen any errors: @@ -294,7 +294,10 @@ Duration: 5 Open the cloned project folder in VSCode and click to open the `.env` file. This file contains variables that we will configure manually. In production environments, these values would be generated by the parent application at runtime. -Replace the placeholder values for `EMBED_PATH`, `CLIENT_ID`, `EMBED_SECRET`, `EMAIL` and `EXTERNAL_USER_TEAM` to match your values created earlier: +Replace the placeholder values for `EMBED_PATH`, `CLIENT_ID`, `EMBED_SECRET`, `EMAIL` and `EXTERNAL_USER_TEAM` to match your values created earlier. + +For `ACCOUNT_TYPE` use `Pro` for now. + @@ -304,12 +307,19 @@ In `VS-Code`, open a new terminal session and run the command: nodemon server.js ``` +If an error indicates nodemon is not installed, run the command: + +```code +npm install nodemon +``` + Make sure the command is run in the correct directory, using the terminal command `pwd` or "present working directory". + The response in terminal will look like this: