Visualize the Data

The visualization application is a static Angular.JS website that is delivered through S3. Since this site consists entirely of HTML, CSS, and Javascript, it is important to secure the credentials used by the Javascript code that makes calls to AWS services.

To provide secure access to the resources created in your environment, we will use the Cognito service. Cognito integrates with the IAM service, allowing you to create policies that define how resources in your environment can be accessed. For example, you probably don’t want the entire world to be able to read and write data to your tables in DynamoDB. But you may want to allow some users or applications access to the tables. Using Cognito and IAM, you can restrict access to your DynamoDB tables to only those users or applications that you trust, while shutting out access to everything else.

Create a Cognito Identity Pool.

Note

In this tutorial, we will be using the Cognito service, which is only available in the AWS N. Virginia region (us-east-1). Before continuing, ensure that the region dropdown in the top right of your screen says N. Virginia.

  1. Open the Cognito console page by clicking Services > Cognito

  2. Press the blue Get Started button.

    _images/Step_1-Cognito-Create_Identity_Pool.png
  3. Name your Cognito Identity Pool. You can use any name that you want.

  4. Under the Unauthenticated Identities section, check the box to enable access to unauthenticated identities.

  5. Click the Create Pool button. You will now see the following screen:

    _images/Step_1-Cognito-Disallow_Access.png
  6. Click on View Details and note the name of the unauthenticated IAM Role that is created during this process. Press Allow.

Congratulations! You have set up your Cognito Identity Pool.

Now that the Cognito identity pool has been created, we can link it to an IAM role that defines the permissions required by the visualization application. This role essentially allows for read-only access to the data in the DynamoDB table.

Attach the Visualization Policy in IAM

  1. Open the IAM console page by clicking Services > IAM

  2. On the left hand menu, click Roles.

  3. Find the unauthenticated role that was created when you setup your Cognito identity pool. Click on the name of the role to edit the role.

  4. Under Managed Policies, click Attach Policy.

    _images/attach-policy.png
  5. AWS has many ready-to-go managed policies that can be used to define access permissions to your IAM Users, Groups and Roles. When you launched your CloudFormation stack, a managed policy was created for visualization. Search “visualization” and the managed policy should show up.

    _images/search-visualization-role.png
  6. Click on the check box and press Attach Policy.

Congratulations! You have successfully attached your visualization policy to your Cognito unauthenticated IAM role! Now, you are all ready to configure and upload the web application.

Upload and configure your S3 visualization website.

To configure and install the visualization website, first download the application and follow these steps:

  1. Unpack the tarball into a local directory on your laptop.

  2. Open the file visualization/scripts/config.js in a text editor.

  3. Replace all the config values that have the form “[TOKEN]” with the required values. The values that you will use are all outputs from your CloudFormation stack you created in Part 2.

  4. Save the changes to the file.

  5. Open the S3 console page by clicking Services > S3

  6. Find the Visualization bucket that was created when you launched your CloudFormation Stack. On the right side of the page, click Properties.

  7. Under Permissions, click Add Bucket Policy. Copy and paste this text and create the bucket policy. Before saving, replace VISUALIZATION_BUCKET_NAME with the name of your visualization bucket:

    {
      "Version":"2012-10-17",
      "Statement":[{
            "Sid":"PublicReadGetObject",
            "Effect":"Allow",
              "Principal": "*",
          "Action":["s3:GetObject"],
          "Resource":["arn:aws:s3:::VISUALIZATION_BUCKET_NAME/*"
          ]
        }
      ]
    }
    
  8. Click on the bucket name to open the bucket.

  9. On the top left, click Upload.

    _images/s3-upload.png
  10. In some browsers, you can simply drag and drop the files into the box specified on the page. In others, you can use the Enhanced Uploader to copy over all of the files in the folder.

    _images/s3-drag-and-drop.png

Alternatively, if you have the AWS CLI tools setup, you could upload the visualization files to your S3 bucket from the command line. Below is the command to use to copy the files, where [YOUR S3 VISUALIZATION BUCKET] is the value of the output parameter called “VisualizationBucketName” from your CloudFormation stack.:

aws s3 cp --recusive visualization s3://[YOUR S3 VISUALIZATION BUCKET] --acl public-read

Now if you click on the link provided in your CloudFormation outputs, you will see the visualization website with your streaming device data.