+
+ {%- if codelabPin(view, codelab) -%}
+
+ {%- endif -%}
+
+ {%- endif %}
+ {%- endfor %}
+ {{codelab.title}}
+
+
+
+
+ {%- if codelab.updated -%}Updated {{codePrettyDate(codelab.updated)}}{%- endif -%}
+
+ Loading guides, please wait...
+
+ 
+
+Sigma supports embedding in other third-party applications like Salesforce or Streamlit:
+
+[QuickStart: Embedding 11: Embed into Salesforce.](https://quickstarts.sigmacomputing.com/guide/embedding_12_secure_embedding_into_streamlit/index.html?index=..%2F..index#0)
+
+[QuickStart: Embedding 12: Secure Embedding into Streamlit.](https://quickstarts.sigmacomputing.com/guide/embedding_12_secure_embedding_into_streamlit/index.html?index=..%2F..index#0)
+
+### Benefits of JWT
+Signing your secure embed URLs with JWTs has several advantages:
+
+- JWTs are compact, URL-safe tokens that can be digitally signed, ensuring that the data they contain is tamper-proof.
+
+- Embed developers no longer have to use the Sigma UI to generate embed paths; they may use the URL instead.
+
+- Embedding workbooks, pages and individual visualizations is supported.
+
+- JWT-signed embed URLs can authenticate internal Sigma users to access embedded content with the same email address they use for their Sigma account.
+
+- When using JWT-signed URLs with Sigma, you have the option to disable automatic embed user account provisioning for non-Sigma users, effectively restricting your embed content to the users you have explicitly provisioned in Sigma or your IdP.
+
+
+
+We will cover JWT more in the next section.
+
+### Public embedding
+The simplest use case we provide is called public embedding.
+
+Customers use this when security is not required, but there is a need to embed Sigma content.
+
+For example, embedding some KPIs or charts on a company’s public website that anyone can see.
+
+We demonstrate Public embedding in a separate [QuickStart: Embedding 02: Public Access.](https://quickstarts.sigmacomputing.com/guide/embedding_02_public_access/index.html?index=..%2F..index#0)
+
+
+
+
+## How JWT Works
+Duration: 5
+
+A JSON Web Token (JWT) is a compact, URL-safe means of representing claims to be transferred between two parties.
+
+The claims in a JWT are encoded as a JSON object that is used as the payload of a JSON Web Signature (JWS) structure or as the plaintext of a JSON Web Encryption (JWE) structure, enabling the claims to be digitally signed or integrity protected with a Message Authentication Code (MAC) and/or encrypted.
+
+The remaining discussion in this section is intended for those less familiar with JWT, how it is structured, its structure, transaction flow, and benefits. Feel free to jump to the next section if you just want a demonstration of JWT in Sigma.
+
+In the typical workflow, a client requests embedded content using a JSON Web Token (JWT), and the server processes, validates, and serves the embedded content based on user credentials and environment variables.
+
+Here is a simplified authentication flow:
+
+
+
+What follows is a more in-depth description of the JWT workflow in Sigma.
+
+### Step-by-Step JWT Flow:
+
+**1. Client Request (i.e., end user's web browser):**
+
+Enable sparse checkout:
+```code
+git config core.sparseCheckout true
+```
+
+Specify the folder you want to clone by adding it to the sparse-checkout configuration:
+```code
+echo "embedding_qs_series_2" >> .git/info/sparse-checkout
+```
+
+Finally, pull the specified folder from the repository:
+```code
+git pull origin main
+```
+
+After the command runs, click the button to `Open Folder`:
+
+
+
+Navigate to where your folder is and click `Open`.
+
+We can now see the project called `embedding_JWT` with the files stored in the `jwt` folder:
+
+
+
+### Additional node.js packages
+We need to install two Node.js packages that provide some additional "convenience functionality".
+
+**1: nodemon:**
+
+The project has almost everything we need, but we will need set up some things in Sigma that will be used throughout this QuickStart series.
+
+
+
+
+## Sample Native App
+Duration: 5
+
+The sample app is built with Node.js, HTML, and JavaScript.
+
+Each QuickStart includes its own index.html file inside the corresponding QuickStart folder.
+
+We took some liberties with styling and layout, but there are just a few core files you need to understand:
+
+
+
+
+
+### Environment file (.env)
+The `.env` file contains configuration settings for the embedding server and each QuickStart. It helps separate runtime parameters (variables) like client secrets and user identity from the source code.
+
+The file is organized into three key sections:
+
+**1:** Global Settings
+
+Name the team `Sales_People`, check the box to also create a workspace. Click `Create`.
+
+
+
+
+
+Create another team called `Sales_Managers`, set the team to `Private` and check the box to also create a workspace. Click `Create`:
+
+
+
+### Text file for temp storage of values
+It’s helpful to store a few values in a text file as we create them. Once comfortable, these can just be added directly to the .env file.
+
+Here are the values we will capture as we progress:
+```code
+Client ID:
+Secret:
+Team(s): Sales_People, Sales_Managers
+Base_URL:
+```
+
+Exit `Administration` by clicking the Sigma 
icon.
+
+
+
+
+## Workspaces
+Duration: 5 min
+
+Workspaces allow folders and documents to be compartmentalized, categorized, and easily shared with the correct people.
+
+They can be shared among users and teams via permission grants.
+
+Workspaces are managed by organization admins, but admins are not automatically granted permission to other team workspaces. However, admins can access to an additional `ALL WORKSPACES` tab.
+
+Native Sigma users (those who log in directly to Sigma) will have access to workspaces when they are shared with a team they belong to, or explicitly shared with them.
+
+For example, if we want to give all the users who are members of the `Sales_Managers` team access to the `Sales_People` workspace, we can click `Share...`:
+
+
+
+We can search for the team and give them a specific permission level. In this case, we will give the `Can contribute` permission to the `Sales_Managers` team:
+
+
+
+If we reopen the `Share...` model for `Sales_People`, we can also adjust the `Sales_People` to `View` only:
+
+
+
+If we open the `Share...` model for the `Sales_Manager` workspace we see that members of the `Sales_People` team will have no access to the workspace:
+
+
+
+Let's grant them `Can explore` permission. This implies that workbooks in this workspace are curated by someone else. Managers can explore the data to the lowest level of granularity, but cannot contribute new content.
+
+In both workspaces, the administrator has `Can manage` permissions.
+
+This functionality provides a lot of flexibility in how users access shared work.
+
+There are many ways to provide user separation. In a typical smaller organization, we’d likely have teams for business users like Finance, Operations, and others.
+
+For more information, see: [Manage workspaces](https://help.sigmacomputing.com/docs/manage-workspaces)
+
+
+
+
+## Client credentials
+Duration: 5
+
+Client credentials (a unique client ID and embed secret) are the foundation of secure embedding.
+
+Sigma uses the client ID to determine which embed secret is referenced in a request. Each time a request is made, the server-side embed API uses the embed secret to generate an encrypted signature.
+
+Together, the client ID and embed secret create a robust security framework for server-side interactions with Sigma.
+
+Navigate to `Administration` and scroll down to `Developer Access`.
+
+Click `Create New`:
+
+
+
+In the `Create client credentials` modal, select `Embedding`, give it a name, and assign an administrative user as the owner.
+
+
+
+
+
+Click `Create`.
+
+
+
+
+
+Copy and paste the `Client ID` and `Secret` into the text file.
+
+
+
+
+## Select Content to Embed
+Duration: 5
+
+Any Sigma URL can be embedded, assuming the proper permissions are passed along as parameters.
+
+Sigma is flexible and offers different workflows for creating content based on the source data.
+
+For example, we could first create a [data model](https://help.sigmacomputing.com/docs/intro-to-data-models), set permissions on it, and then save it off for later use in a workbook. We would then create a workbook with a table that shows data from the data model we saved earlier.
+
+If you are interested in data modeling in Sigma, see: [Fundamentals 10: Data Modeling](https://quickstarts.sigmacomputing.com/guide/fundamentals_10_data_modeling/index.html?index=..%2F..index#0)
+
+
+
+To minimize the steps, we will leverage a different workflow.
+
+
+
+### Create a Workbook with Sample Data
+In Sigma, return to the homepage and click the `+ Create new` button and click `Workbook`:
+
+
+
+Drag a new `Table` from the `Data` group on the `Element bar`:
+
+
+
+Click `Select source`
+
+Sigma allows users to search for tables by name; type `hands` in the search bar and select the `PLUGS_ELECTRONICS_HANDS_ON_LAB_DATA` table from the `RETAIL` schema:
+
+
+
+This opens the selected table in a new (unsaved) workbook that carries the temporary name `Exploration`:
+
+
+
+We can rename the table by double-clicking on the table name and changing it to `Plugs_Sales_Transactions`.
+
+Click the `Save As` button, navigate to the `Sales_People` workspace and save the workbook with the name `Getting_Started_QuickStart`.
+
+
+
+You may have noticed that Sigma provides `Folders`, a `My Documents` folder, as well as `Workspaces`. This enables a variety of use-cases to be possible with regards to how documents are stored, managed and shared with others.
+
+### Share the Workbook
+Check the sharing settings:
+
+
+
+Our two teams are already listed, as the permissions are inherited from the workspace, which is assigned to the `Sales People` team.
+
+
+
+
+
+
+
+
+## Base URL
+Sigma embedding uses the `Base URL` (the URL shown in the browser's address bar) to identify what is shown in any embed.
+
+This allows any Sigma workbook, page, or element(s) to be embedded.
+
+For example, we can grab the Base URL for the [Ask Sigma](https://help.sigmacomputing.com/docs/embed-ask-sigma) page from the browser and use it to embed Ask Sigma inside the native application.
+
+
+
+Switch the workbook to `Published version`:
+
+
+
+Select the `Plugs_Sales_Transactions` table, then copy the URL:
+
+
+
+Paste the `Base URL` into the text file.
+
+
+
+
+## Embed Sandbox
+Duration: 5
+
+Sigma’s embed sandbox allows you to test your embed before integrating it into the native application. This allows you to view the content from the embed user’s perspective to verify security settings and other configurations.
+
+Open the workbook’s menu and select `Share and export`, then `Embedding...`:
+
+
+
+Select `JWT`, choose `Page 1 - Plugs Sales Transactions` from the list control, and click `Test`:
+
+
+
+This opens the embedding sandbox with the selected element pre-configured.
+
+Select your `Client credentials` and click `Load embed` to see the result:
+
+
+
+You can adjust a variety of options to test different scenarios, which can help save time during initial testing.
+
+For more information, see [Test an embed URL in the embed sandbox](https://help.sigmacomputing.com/docs/test-an-embed-url-in-the-embed-sandbox)
+
+
+
+
+## Edit Environment File and Test
+Duration: 5
+
+Let’s make the embed work in the Git project set up earlier.
+
+Return to VS Code and open the `.env` file.
+
+It will have placeholders for the values we need to provide and also includes some important notes.
+
+
+
+Replace the placeholders with the values you saved earlier, using `View` for the `Account Type` and any email address (a made-up one is fine):
+
+For example:
+
+
+`Save` the changes.
+
+### Embed-API Script
+The `embed-api.js` script is fully commented to explain what each part does. The file is stored in the `helpers` folder.
+
+
+
+
+
+
+
+### Start Express
+Open Terminal inside VSCode:
+
+
+
+Change the directory using the following command:
+```code
+cd embedding_qs_series_2
+```
+
+Start the Express server:
+```code
+npm start
+```
+
+The server is started when it displays `Server listening at http://localhost:3000`.
+
+
+
+Now we can launch the `Getting Started` QuickStart from the landing page by browsing to `localhost:3000` and clicking `Go`:
+
+
+
+The `Getting Started` page comes with a side-panel that displays the base URL and the Workbook ID (on separate lines), confirmation that we are using HS256 encryption and the decoded JWT payload.
+
+The actual token appears lower on the side panel for anyone who wants to validate it using a third-party site like [JWT.io](https://jwt.io/):
+
+
+
+Once the local Express server is running, logging output appears in the console each time a page with an embed is reloaded:
+
+
+
+
+
+
+## Tracking User Activity
+Duration: 5
+
+There are a few ways to see what embed users are doing in Sigma. After a user accesses a page in the native application that contains embedded content, they are automatically added to the `Members` list in `Administration` > `People`:
+
+
+
+
+
+Sigma also provides extensive usage reporting in `Administration` > `Usage` > `Embedding`:
+
+
+
+Customers can also enable audit logging and manually analyze raw event logs if preferred. Logs can be exported for integration with external systems.
+
+To learn more, see [Access and explore audit logs](https://help.sigmacomputing.com/docs/access-and-explore-audit-logs)
+
+
+
+
+## What we've covered
+Duration: 5
+
+In this QuickStart, we explored the fundamentals of secure embedding in Sigma using JSON Web Tokens (JWT).
+
+We set up client credentials, created a basic embedded application using Node.js and VSCode, configured user access through Sigma’s team and workspace structure, and tested embed behavior using both Sigma’s sandbox and a local server.
+
+Along the way, we decoded JWTs, examined embed permissions, and demonstrated how to manage fallback logic in the .env file for flexible configuration across embedding scenarios.
+
+**Additional Resource Links**
+
+[Blog](https://www.sigmacomputing.com/blog/)
](https://twitter.com/sigmacomputing)
+[
](https://www.linkedin.com/company/sigmacomputing)
+[
](https://www.facebook.com/sigmacomputing)
+
+
+
+