Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ Additionally, it will demonstrate how to set up a local web application so that

Sigma also provides an embed sandbox that is built into the product. 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)

The local web application (e.g., native application) refers to the customer-developed application that Sigma is embedded into.
The local web application (e.g., host application) refers to the customer-developed application that Sigma is embedded into.

We will use code from a public Git repository, VS Code, Node.js, Javascript and HTML in this QuickStart series.

Expand Down Expand Up @@ -72,7 +72,7 @@ There are two types of embedding in Sigma: **Secure with JWT** and **Public**. W
### Secure embedding with JSON Web Tokens (JWT)
JWT is the preferred method for secure embedding with Sigma. [JWT](https://en.wikipedia.org/wiki/JSON_Web_Token) which is an open, industry-standard [RFC 7519](https://www.rfc-editor.org/rfc/rfc7519) method for representing claims securely between two parties.

JWT is used when a company embeds Sigma content directly into a native application that they want to embed Sigma content directly into while retaining security, tenancy, and a tailored user experience.
JWT is used when a company embeds Sigma content directly into a host application that they want to embed Sigma content directly into while retaining security, tenancy, and a tailored user experience.

For example, a company may have an internal web site that employees have to log into using single sign-on where they want to provide a dashboard that only shows data filtered for each employee’s region.

Expand Down Expand Up @@ -151,7 +151,7 @@ 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):**<br>
The client (e.g., the end-user's browser in the native application) sends a request to the server to obtain a URL for accessing embedded Sigma content. This request may include user-related information, such as identity or a general request for access to Sigma content.
The client (e.g., the end-user's browser in the host application) sends a request to the server to obtain a URL for accessing embedded Sigma content. This request may include user-related information, such as identity or a general request for access to Sigma content.

**2. Server-Side JWT Generation (i.e., customer-created embed API):**
***Credential Handling:***<br>
Expand All @@ -178,7 +178,7 @@ https://app.sigmacomputing.com/<org-slug>?jwt=<jwt>
This URL includes the signed JWT that will be used to authenticate and authorize the user when they access the embedded Sigma content.

**4. Client Accesses the Signed URL:**<br>
When the client (e.g., the end-user's browser in the native application) loads the signed URL, Sigma verifies the JWT. Sigma ensures that:
When the client (e.g., the end-user's browser in the host application) loads the signed URL, Sigma verifies the JWT. Sigma ensures that:

- The JWT signature is valid, confirming that the token has not been tampered with.
- The claims (like sub, roles, exp) are still valid, checking whether the user is authorized and whether the token is within its allowed time frame.
Expand Down Expand Up @@ -337,7 +337,7 @@ The project has almost everything we need, but we will need set up some things i
![Footer](assets/sigma_footer.png)
<!-- END OF SECTION-->

## Sample Native App
## Sample Host App
Duration: 5

The sample app is built with Node.js, HTML, and JavaScript.
Expand All @@ -349,7 +349,7 @@ We took some liberties with styling and layout, but there are just a few core fi
<img src="assets/gs_19.png" width="800"/>

<aside class="positive">
<strong>IMPORTANT:</strong><br> The primary things required to embed Sigma into any native application are embed-api.js and an iframe. We've added extra functionality to the sample app to make the demonstration of various topics easier for the reader.
<strong>IMPORTANT:</strong><br> The primary things required to embed Sigma into any host application are embed-api.js and an iframe. We've added extra functionality to the sample app to make the demonstration of various topics easier for the reader.
</aside>

### Environment file (.env)
Expand Down Expand Up @@ -395,15 +395,15 @@ We need to provision `Account Types`, `Teams`, and `Workspaces` in Sigma. This w
Sigma has some features that will make this easier for us.

### Users
We already have an administrative user, and we will add additional users on-the-fly from our native application.
We already have an administrative user, and we will add additional users on-the-fly from our host application.

Recall that embed users are added at runtime—the first time they access any content embedded in the parent application.

Their permission level is also set automatically by the embed API, via a required parameter that specifies the Sigma account type they are assigned.

<aside class="positive">
<strong>Automatic embed user account creation:</strong><br>
Some customers prefer to only use their own authentication provider to manage users and have authenticated users be automatically created in Sigma upon successful logon to the native application.
Some customers prefer to only use their own authentication provider to manage users and have authenticated users be automatically created in Sigma upon successful logon to the host application.

When using JWT-signed URLs for your secure embeds, administrators have the option to disable automatic embed user account creation and update for non-Sigma users (e.g. embed users).

Expand Down Expand Up @@ -607,7 +607,7 @@ Sigma embedding uses the `Base URL` (the URL shown in the browser's address bar)

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.
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 host application.

<aside class="positive">
<strong>IMPORTANT:</strong><br> When using the "Base URL", the workbook must be switched to the published version.
Expand Down Expand Up @@ -696,7 +696,7 @@ Once the local Express server is running, logging output appears in the console
## Embed Sandbox
Duration: 5

Sigma also provides an "in-product" embed sandbox that 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.
Sigma also provides an "in-product" embed sandbox that allows you to test your embed before integrating it into the host 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...`:

Expand All @@ -722,12 +722,12 @@ For more information, see [Test an embed URL in the embed sandbox](https://help.
## 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`:
There are a few ways to see what embed users are doing in Sigma. After a user accesses a page in the host application that contains embedded content, they are automatically added to the `Members` list in `Administration` > `People`:

<img src="assets/gs_28.png" width="800"/>

<aside class="positive">
<strong>IMPORTANT:</strong><br> Any changes to an embed user’s account type or team assignment in Sigma will be overwritten the next time they access embedded content. This is because the native application is responsible for passing those parameters at runtime. Users marked as "embed" in Sigma cannot log in directly to Sigma.
<strong>IMPORTANT:</strong><br> Any changes to an embed user’s account type or team assignment in Sigma will be overwritten the next time they access embedded content. This is because the host application is responsible for passing those parameters at runtime. Users marked as "embed" in Sigma cannot log in directly to Sigma.
</aside>

Customers can enable audit logging and manually analyze raw event logs if preferred. Logs can be exported for integration with external systems.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,15 +24,15 @@ Sigma's embedded solution is highly flexible and can accommodate a myriad of use

Sigma employs federated user access to cater to all these needs and beyond. This is often realized through single sign-on (SSO) technologies and the establishment of trust relationships between the systems involved.

With Sigma embedding, users log in to your application (the "native application"), get authenticated (with an optional role assignment), and this information is conveyed to Sigma when a part of your app requires embedding.
With Sigma embedding, users log in to your application (the "host application"), get authenticated (with an optional role assignment), and this information is conveyed to Sigma when a part of your app requires embedding.

It's crucial to note that Sigma has its own proprietary role-based access control (RBAC) system. While some customers exclusively use this system, many others with an existing identity management provider (IDP) prefer to integrate that with Sigma.

For more information, see [using SSO with Sigma](https://help.sigmacomputing.com/docs/single-sign-on-with-saml)

Additional information is also available: [managing user and teams with SCIM](https://help.sigmacomputing.com/docs/manage-users-and-teams-with-scim)

In this QuickStart, we will use the local native application framework we created in [Embedding 01: Getting Started](https://quickstarts.sigmacomputing.com/guide/embedding_03_secure_access/index.html?index=..%2F..index#0)
In this QuickStart, we will use the local host application framework we created in [Embedding 01: Getting Started](https://quickstarts.sigmacomputing.com/guide/embedding_03_secure_access/index.html?index=..%2F..index#0)

<aside class="positive">
<strong>IMPORTANT:</strong><br> Some screens in Sigma may appear slightly different from those shown in QuickStarts. This is because Sigma continuously adds and enhances functionality. Rest assured, Sigma’s intuitive interface ensures that any differences will not prevent you from successfully completing any QuickStart.
Expand Down Expand Up @@ -268,7 +268,7 @@ The page will load the embedded content along with the `.env` parameters that ar
## Restrict the Client_A Team To One Element
Duration: 5

To make this use case work, we only need to pass different `.env` parameters. This simulates the native application passing parameters to Sigma at runtime.
To make this use case work, we only need to pass different `.env` parameters. This simulates the host application passing parameters to Sigma at runtime.

Put the workbook in `Edit` mode and add a new `Bar Chart` from the `Element Bar`.

Expand Down Expand Up @@ -310,7 +310,7 @@ Multiple teams must be passed as an array. In our sample application, this is ha
const teamsArray = rawTeams ? rawTeams.split(",").map((t) => t.trim()) : [];
```

Now, when we refresh the native application in the browser, we see the single-element embed:
Now, when we refresh the host application in the browser, we see the single-element embed:

<img src="assets/fa_17.png" width="800"/>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ For a full reference, see Sigma’s [Embed URL Parameters](https://help.sigmacom

This QuickStart provides examples and screenshots of required and optional parameters to help developers understand their use.

In this QuickStart, we will use the local native application we created in [Embedding 01: Getting Started](https://quickstarts.sigmacomputing.com/guide/embedding_03_secure_access/index.html?index=..%2F..index#0)
In this QuickStart, we will use the local host application we created in [Embedding 01: Getting Started](https://quickstarts.sigmacomputing.com/guide/embedding_03_secure_access/index.html?index=..%2F..index#0)

<aside class="positive">
<strong>IMPORTANT:</strong><br> Some screens in Sigma may appear slightly different from those shown in QuickStarts. This is because Sigma continuously adds and enhances functionality. Rest assured, Sigma’s intuitive interface ensures that any differences will not prevent you from successfully completing any QuickStart.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -68,19 +68,19 @@ Let's start with a review of how Sigma embedded authentication works using this

<img src="assets/eis_1.png" width="800"/>

**1:** In an embedded scenario, your application (the "native application") handles user authentication—Sigma doesn’t do the login for you.
**1:** In an embedded scenario, your application (the "host application") handles user authentication—Sigma doesn’t do the login for you.

**2:** Once authenticated, the native application calls the embed-API (server-side) to generate a JWT-signed URL.
**2:** Once authenticated, the host application calls the embed-API (server-side) to generate a JWT-signed URL.

**3:** The API generates a JWT-signed URL, signing it with a key obtained from your Sigma instance.

**4:** The signed URL is passed back to the native application.
**4:** The signed URL is passed back to the host application.

**5:** The native application sets this URL as the `src` property of an iframe.
**5:** The host application sets this URL as the `src` property of an iframe.

**6:** Sigma validates the JWT signature using the same key from step 3.

**7:** On verification, the embedded dashboard is rendered in the native application.
**7:** On verification, the embedded dashboard is rendered in the host application.

This ensures that only authorized, verified sessions load Sigma embeds in your app.

Expand Down
Loading