AWS Big Data Blog

Embed interactive dashboards in your application with Amazon QuickSight

Starting today, you can embed Amazon QuickSight dashboards in your applications. This means you can now quickly and efficiently enhance your applications with rich interactive data visualizations and analytics capabilities without any custom development. You won’t require specialized expertise on your team to develop, maintain, and evolving the analytics components for your applications, nor manage and scale your analytics servers and infrastructure with your applications’ popularity. This saves you time and money and lets you focus on your core application functionality!

Embedded Amazon QuickSight dashboards allow you to utilize Amazon QuickSight’s serverless architecture and easily scale your insights with your growing user base, while ensuring you only pay for usage with Amazon QuickSight’s unique pay-per-session pricing model. Viewers of embedded dashboards are authenticated via Federated Single Sign-On (SAML, OpenID Connect or AWS IAM Federation). This means that every user receives a secure, personalized dashboard while requiring no user-facing QuickSight-specific authentication. Dashboard embedding is available in Amazon QuickSight Enterprise Edition in all supported regions.

To facilitate an easy embedding experience, AWS is also launching the Amazon QuickSight JavaScript SDK, and the first set of Amazon QuickSight API operations. The Amazon QuickSight JavaScript SDK lets you efficiently integrate Amazon QuickSight dashboards in your application pages, set defaults, connect controls and handle errors. The new user and group API operations allow you to programmatically manage users and groups. This helps you rollout Amazon QuickSight to your users faster, and makes it easier to manage Amazon QuickSight resources using groups. User API operations are available for both Standard and Enterprise Editions, while group API operations are available in Enterprise Edition.

Let’s now take a quick look at how you can embed a dashboard in your application. The following four steps describe how to embed a dashboard.

Step 1: In Amazon QuickSight, create your dashboards and whitelist your domains

In this step, you create the dashboards in Amazon QuickSight and then share it with the readers who you would like to access this in the embedded form. Each unique viewer of the embedded dashboard must be a member of the Amazon QuickSight account and can be either provisioned in the account ahead of time or at the point of access using the user API operations. To provide each viewer with access to the dashboard, share the dashboard with a group. Then add users to the group once they are provisioned in the Amazon QuickSight account.

When you publish a dashboard, there is a new option which allows you to enable or disable the advanced filtering and download to CSV options on the dashboard, to provide a simplified dashboard experience if desired.

To avoid unauthorized embedding of dashboards from your account, an administrator in your account must explicitly enable domains where your Amazon QuickSight dashboards are embedded. This is done by using the Manage QuickSight option that is available to all administrators. All domains in use (dev/staging/production) must be whitelisted and must use https.

Step 2: In your AWS account, set up permissions for embedded viewers

To provision users of your application as members of your Amazon QuickSight account, create an AWS Identity and Access Management (IAM) role that a user can assume. This role should grant the visitor permissions to:

  • Become a reader in the Amazon QuickSight account (quicksight:RegisterUser).
  • Retrieve the specific embedded dashboards (quicksight:GetDashboardEmbedUrl).

The following is a sample policy with these permissions:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Action": "quicksight:RegisterUser",
            "Resource": "*",
            "Effect": "Allow"
        },
        {
            "Action": "quicksight:GetDashboardEmbedUrl",
            "Resource": "arn:aws:quicksight:us-west-2:293424211206:dashboard/26a7dcad-7831-4266-9f75-ffd9265aa335",
            "Effect": "Allow"
        }
    ]
}

Your application’s IAM identity must have a trust policy associated with it to allow access the role you just created. This means that as a user accesses your application, your application can assume the QuickSightEmbed role on the user’s behalf, and provision the user in the Amazon QuickSight account. The following example shows QuickSightEmbed as the role that has the previous policy associated with it. More details are available regarding trust policies for OpenID Connect or SAML authentication.

{
    "Version": "2012-10-17",
    "Statement": {
        "Effect": "Allow",
        "Action": "sts:AssumeRole",
        "Resource": "arn:aws:iam::293424211206:role/QuickSightEmbed"
    }
}

Step 3: On your application server, authenticate the user and get the embedded dashboard URL

When a user lands in your application, you can assume the IAM role created in Step 2 (for example, QuickSightEmbed) on the user’s behalf, and provision the user in the Amazon QuickSight account. To ensure that each user of the application is uniquely provisioned in Amazon QuickSight and has permissions (row level security) or defaults (dynamic defaults for parameters) enforced, you must pass an identifier, such as a user name or email address, as the role session name.

The following shows an AWS CLI command that achieves this:

aws sts assume-role --role-arn "arn:aws:iam::293424211206:role/QuickSightEmbed" --role-session-name tom.smith@abc.com

Running this command sets the role session ID of the user visiting your website to “QuickSightEmbed/tom.smith@abc.com.” This is also the user name in Amazon QuickSight.

You can use this pattern to provision your users in Amazon QuickSight ahead of time, or provision as they come in the first time. With Amazon QuickSight’s Pay-per-Session mode, you can provision thousands of users. You get charged only when they access Amazon QuickSight. The following is an AWS Command Line Interface (AWS CLI) command that can be used to provision a user.

aws quicksight register-user --aws-account-id 293424211206 --namespace default --identity-type IAM --iam-arn "arn:aws:iam::293424211206:role/QuickSightEmbed" --user-role READER --session-name tom.smith@abc.com --email tom.smith@abc.com

On the first access, you can also add this user to a group, with which the dashboard has been shared.

aws quicksight create-group-membership --aws-account-id=293424211206 --namespace=default --group-name=financeusers --member-name=”QuickSightEmbed/tom.smith@abc.com”

You now have a user of your application who is also a Amazon QuickSight user and has access to the dashboard. For the last part of Step 3, call the get-dashboard-embed-url to get a signed URL for the dashboard that can be embedded.

aws quicksight get-dashboard-embed-url --aws-account-id 293424211206 --dashboard-id 26a7dcad-7831-4266-9f75-ffd9265aa335 --identity-type IAM

Step 4: On your application page, use the Amazon QuickSight JavaScript SDK to embed the dashboard

You can download the Amazon QuickSight JavaScript SDK here. Use it to place the signed URL obtained in Step 3 in your application page. The SDK lets you place the dashboard on an HTML page, pass parameters into the dashboard and also handle error states with messages that are customized to your application.

function embedDashboard() {
                var containerDiv = document.getElementById("dashboardContainer");
                var options = {
                    url: "<signed URL from Step 3>",
                    container: containerDiv,
                    parameters: {
                        country: 'United States'
                    },
                    scrolling: "no",
                    height: "700px",
                    width: "1000px"
                };
                dashboard = QuickSightEmbedding.embedDashboard(options);
                dashboard.on('error', onError);
                dashboard.on('load', onDashboardLoad);
            }

The CLI commands referenced above are part of the AWS SDK. You can achieve the same result with all AWS SDK supported languages. For more information, see Tools for Amazon Web Services

To summarize, these four steps let you to create your dashboards in Amazon QuickSight, embed them in your application, and enable your users with rich, interactive analytics!

 


Additional Reading

If you found this post useful, be sure to check out Create Amazon QuickSight dashboards that have impact with parameters, on-screen controls, and URL actions, and Advanced analytics with table calculations in Amazon QuickSight.

 


About the Author

Jose Kunnackal is a principal product manager for Amazon QuickSight.