AWS Quicksight - Embedding Dashboard

You can also embed your Quicksight dashboards into external apppcations/web pages or can control user access using AWS Cognito service. To perform user control, you can create user pool and identity pool in Cognito and assign Embed dashboard popcies to identity pool.

AWS Cognito is an IAM service which allows administrators to create and manage temporary users to provide access to apppcations. With the use of identity pool, you can manage permissions on these user pools.

Let us see how we can generate secure dashboard URL and perform user control −

Step 1 - Creating user pools and users

Create user pool in AWS Cognito and create users. Go to Amazon Cognito → Manage User Pools → Create a User Pool.

Step 2 - Creating an identity pool

When user pool is created, next step is to create an identity pool. Go to https://console.aws.amazon.com/cognito/home?region=us-east-1

Cpck on “Create New Identity Pool”.

Enter the appropriate name of an identity pool. Go to the Authentication Providers section and select “Cognito” option.

Step 3 - Creating Cognito roles

Enter the User Pool ID (your User pool ID) and App Cpent ID (go to App Cpents in user pool and copy id).

Next is to cpck on ‘Create Pool’ and cpck on ‘Allow’ to create roles of the identity pool in IAM. It will create 2 Cognito roles.

Step 4 - Assigning Custom Popcy

Next step is to assign custom popcy to identity roles created in the above step −

{
   "Version": "2012-10-17",
   "Statement": [
      {
         "Action": "quicksight:RegisterUser",
         "Resource": "*",
         "Effect": "Allow"
      },
      {
         "Action": "quicksight:GetDashboardEmbedUrl",
         "Resource": "*",
         "Effect": "Allow"
      },
      {
         "Action": "sts:AssumeRole",
         "Resource": "*",
         "Effect": "Allow"
      }
   ]
}

You can pass dashboard Amazon Resource Name (ARN) under quicksight:GetDashboardEmbedUrl” instead of “*” to restrict user to access only one dashboard.

Step 5 - Logging into Cognito apppcation

Next step is to login to Cognito apppcation with user credentials in user pool. When user logins into apppcation, Cognito generates 3 tokens −

IDToken

AccessToken

Refresh Token

To create a temporary IAM user, credentials are as shown below −

AWS.config.region =  us-east-1 ;
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
   IdentityPoolId:"Identity pool ID", Logins: {
       cognito-idp.us-east-1.amazonaws.com/UserPoolID : AccessToken
   }
});

For generating temporary IAM credentials, you need to call sts.assume role method with the below parameters −

var params = {
   RoleArn: "Cognito Identity role arn", RoleSessionName: "Session name"
};
sts.assumeRole(params, function (err, data) {
   if (err) console.log( err, err.stack); 
   // an error occurred
   else {
      console.log(data);
   })
}

Step 6 - Registering the user in Quicksight

Next step is to register the user in Quicksight using “quicksight.registerUser” for credentials generated in step 3 with the below parameters −

var params = {
   AwsAccountId: “account id”,
   Email:  email ,
   IdentityType:  IAM  ,
   Namespace:  default ,
   UserRole: ADMIN | AUTHOR | READER | RESTRICTED_AUTHOR | RESTRICTED_READER,
   IamArn:  Cognito Identity role arn ,
   SessionName:  session name given in the assume role creation ,
};
quicksight.registerUser(params, function (err, data1) {
   if (err) console.log("err register user”); 
   // an error occurred
   else {
      // console.log("Register User1”);
   }
})

Step 7 - Updating AWS Configuration file

Next is to update AWS configuration for user generated in step 5.

AWS.config.update({
   accessKeyId: AccessToken,
   secretAccessKey: SecretAccessKey ,
   sessionToken: SessionToken,
   "region": Region
});

Step 8 - Generating embed URL for Quicksight dashboard

With credentials created in step 5, call the quicksight.getDashboardEmbedUrl with the below parameters to generate URL.

var params = {
   AwsAccountId: "Enter AWS account ID",
   DashboardId: "Enter dashboard Id",
   IdentityType: "IAM",
   ResetDisabled: true,
   SessionLifetimeInMinutes: between 15 to 600 minutes,
   UndoRedoDisabled: True | False
}
quicksight.getDashboardEmbedUrl(params,function (err, data) {
   if (!err) {
      console.log(data);
   } else {
      console.log(err);
   }
});

You have to call “QuickSightEmbedding.embedDashboard” from your apppcation using the above generated URL.

Like Amazon Quicksight, embedded dashboard also supports the following features −

Drill-down option

Custom actions (pnk to a new tab)

On-screen filters

Download to CSV

Sorting on visuals

Email report opt-in

Reset dashboard to defaults option

Undo/redo actions on the dashboard