AWS Quicksight - Embedding Dashboard

Advertisements

Previous Page
Next Page  

You can also embed your Quicksight dashboards into external applications/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 policies to identity pool.

AWS Cognito is an IAM service which allows administrators to create and manage temporary users to provide access to applications. 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.

Amazon Cognito

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

Click on “Create New Identity Pool”.

Identity Pool

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

Create Pool

Step 3 - Creating Cognito roles

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

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

Step 4 - Assigning Custom Policy

Next step is to assign custom policy 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"
      }
   ]
}
Policies

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 application

Next step is to login to Cognito application with user credentials in user pool. When user logins into application, 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 application using the above generated URL.

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

  • Drill-down option
  • Custom actions (link 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
Advertisements