Building a Serverless Application with Web Identity Federation: A Step-by-Step Guide

Welcome to this advanced demo series where you’ll have the opportunity to construct a straightforward yet illuminating serverless application that leverages Web Identity Federation. This application will highlight the power of cloud services, demonstrating how even a simple example can be scaled up for larger, more intricate projects. In this hands-on guide, we’ll walk you through each stage of the process, ensuring that you understand the architecture and concepts every step of the way.

STAGE 1: Provision the Environment and Review Tasks

Let’s kick off this exciting journey by provisioning the environment and reviewing the tasks ahead. We’ll lay the foundation for our serverless application by deploying a CloudFormation template that sets up essential infrastructure. As this process takes some time, we’ll use this interval to delve into the architecture of the project.

1. AWS Console Setup

Log in to your AWS account with administrator permissions and ensure the Northern Virginia region is selected. To make things efficient, follow the provided link for a one-click deployment. This link will take you to the quick create stack screen.

2. Applying the CloudFormation Template

Click the link and follow the prompts on the quick create stack screen. Scroll down to the bottom, check the capabilities box, and click “Create Stack.” This will establish the base infrastructure, and while it’s being set up, we’ll familiarize ourselves with the project’s architecture.

3. Understanding the Architecture

Our ultimate goal is to enable a user named Jenny to access a private bucket containing images of Patches the WonderCat. Initially, this bucket is inaccessible because it’s private with no public access. However, we’ll develop a system that allows Jenny to access these images via a serverless application hosted in an S3 bucket called the app bucket, accessed through CloudFront.

The serverless app is built using HTML and JavaScript, providing a front-end interface. It will present a sign-in box, and when Jenny uses this box, she’s directed to Google (our identity provider) for authentication. Upon successful authentication, Google provides an authentication token, validating Jenny’s identity.

However, AWS resources can only be accessed using AWS credentials. Thus, we need to exchange this authentication token for AWS credentials. This is where Amazon Cognito comes into play. It’s configured to accept Google authentication tokens, and using an identity pool, Cognito exchanges the token for temporary AWS credentials via an IAM role.

Now that Jenny has these credentials, our serverless app can use them to access the private bucket, all without the need for traditional servers or manual identity management.

4. Checking Progress

Once the CloudFormation stack creation is complete, you can verify the resources in the AWS console. Look for buckets starting with “WebIDF” in S3, as well as the CloudFront distribution that will later be used to access the app. Examine the content of the application bucket and the private patches bucket, which contains pictures of Patches the WonderCat.

STAGE 2: Create Google API Project & Client ID

In this stage, we’ll configure the Google Identity Provider by creating a Google API project and obtaining client credentials for our serverless application.

1. Creating a Google API Project

Navigate to the Google API Console and create a new project named “Pet IDF.” Configure the consent screen and permissions, ensuring that the application can be accessed by external users.

2. Obtaining Client Credentials

Create OAuth client credentials for your application. Select the web application option and provide necessary details, including the authorized JavaScript origin (your CloudFront distribution domain name). Note down the client ID for later use.

STAGE 3: Create Cognito Identity Pool

In this stage, we’ll configure Amazon Cognito to integrate with Google’s authentication system, allowing the exchange of Google authentication tokens for temporary AWS credentials.

1. Configuring Amazon Cognito

Navigate to the Cognito console and create a new identity pool named “Pet IDF ID Pool.” Configure authentication providers, adding the Google client ID you obtained earlier.

2. Adjusting IAM Roles

Access the IAM console and locate the IAM roles associated with your identity pool. Edit the authenticated role’s permissions, attaching the “private patches permissions” managed policy to grant necessary access to your private S3 bucket.

Testing and Cleanup – Completing Your Web Identity Federation Journey

Welcome to the second part of stage four in our comprehensive demo series on Web Identity Federation with AWS. In this section, we will guide you through the process of testing your configured web application and preparing for cleanup once you’re finished. Let’s dive right in!

Testing Your Web Application

Now that you’ve successfully configured your HTML and JavaScript files to interact with AWS resources, it’s time to test your web application. Follow these steps to see the magic of web identity federation in action:

1. Access the Application via CloudFront: Open the CloudFront console, where you copied down the distribution domain name earlier. Paste the distribution domain name into a new browser tab and hit Enter. This will load your web application.
2. Open the Browser Console: To observe the real-time process of web identity federation and interaction with AWS resources, open your browser’s console. Depending on your browser, you might need to right-click and select “Inspect” or “Inspect Element,” then navigate to the “Console” tab.
3. Initiating Authentication: If you’re not currently logged in to your Google Identity, you’ll see a “Sign in with Google” button. Click this button to start the authentication process.
4. Google Identity Authentication: You’ll be redirected to the Google Identity Provider where you can authenticate using your Google credentials. If you’re already signed in with Google, you might be seamlessly authenticated.
5. Exchange for AWS Credentials: Once authenticated, the application will use the Google Authentication token to call Cognito. Cognito will exchange this token for temporary AWS credentials, which are stored in AWS.config.credentials.
6. Interacting with AWS: With valid credentials, the application will connect to your private S3 bucket and list the objects inside it. It will generate pre-signed URLs for each object using the temporary credentials.
7. Access Private Images: As a result, you’ll start seeing the images from your private S3 bucket appearing on the web application. When you click on an image, the pre-signed URL with encoded authentication information allows access to the private images.

Cleanup Your Resources

Congratulations on reaching this stage! You’ve successfully configured, tested, and experienced the power of web identity federation. However, before concluding, it’s essential to clean up the resources you’ve used to avoid any unnecessary charges or configurations in your AWS account. Here’s how you can do that:

1. Delete Google Project:
   • Open the Cloud Resource Manager URL mentioned in the instructions.
   • Select the PET-IDF project and click on “Delete.”
   • Follow the prompts, copy the project ID, and confirm the shutdown. The project will be deleted after a specified period.
2. Cleanup in AWS Console:
   • Return to the AWS console.
   • Navigate to Cognito and access “Federated Identities.”
   • Enter the “Pet IDF ID Pool,” click on “Edit Identity Pool,” and scroll down to expand “Delete Identity Pool.” Confirm and delete the identity pool.
   • Move to the IAM console, navigate to “Roles,” and locate the Cognito_PetIDFIDPool role. Delete both auth_role and unauth_role roles, confirming each deletion.
3. Delete CloudFormation Stack:
   • Access the CloudFormation console.
   • Select the “web idf stack” and click on “Delete Stack.” Confirm the deletion.

By completing these cleanup steps, you’ll ensure that your AWS account is free from the resources created during this demo series.

Conclusion and Final Thoughts

Congratulations! You’ve successfully completed stage four of our advanced demo series on Web Identity Federation with AWS. By configuring, testing, and cleaning up the resources, you’ve gained valuable hands-on experience in implementing secure web applications that interact with AWS services using web identity federation.

The techniques you’ve learned in this series are not only useful for this demonstration but are also applicable to real-world scenarios involving identity federation. Whether you’re preparing for AWS certification exams or looking to enhance your AWS skills, the knowledge gained from this series will undoubtedly prove invaluable.

Thank you for joining us on this journey through web identity federation on AWS. We hope you’ve enjoyed the experience and found it enriching. If you have any further questions or would like to explore more AWS topics, feel free to reach out or continue your learning journey with other resources available from AWS. Happy exploring!