In this section, you will build on the API Gateway you created in the previous lab. In the previous lab, you fronted the application with an API Gateway to easily re-route client requests to newly built microservices. Now that you have built the BasketLambda function for the basket service, let’s re-direct basket related requests to it in API Gateway.
In the previous lab, you implemented user authentication and session management with Amazon Cognito. To further utilize its features, you can let Cognito handle request authentication by creating an authorizer in the API Gateway.
In the AWS Management Console, navigate to API Gateway. A list of existing APIs will be displayed in the API Gateway Console. Select the “Unishop” API you created in the previous lab.
In the vertical navigation bar on the left, go to “Authorizers.”
Click on “Create New Authorizer” and configure the below settings. Then click “Create.”
Name: Enter CognitoAuth
Type: Enter Cognito
Cognito User Pool: UnishopUserShop
Token Source: Authorization
In the vertical navigation bar on the left, go to “Resources.”
First, create a new child resource under the /api resource. Select the /api resource. Then Click on “Actions” and in the drop-down list select “Create Resource”.
Enter basket for resource name, the resource path will be automatically filled in. Then check “Enable API Gateway CORS.” Finally, click “Create Resource”.
Under the newly created resource “/basket”, create another resource. Similar to step 2, select the “/basket” resource, and inside the “Actions” drop-down list, click “Create Resource.” Enter {id} for resource name. Delete the auto-filled resource path and enter {id}. The brackets tell the API Gateway to treat whatever is inside the brackets as a variable so that the client can pass useful information with it. Check “Enable API Gateway CORS.” Finally, click “Create Resource.”
The first method you will add is a method that listens for POST requests under “/basket”. This request adds a unicorn item to the cart. Select the “/basket” resource in the “Actions” drop-down list select “Create Method”.
A drop-down list will appear right beneath “/basket” resource. Select “POST” and click on the check mark right next to it.
To route the request to a Lambda function, you can leave the integration type as default. Check “Lambda proxy integration” to pass all useful information to it. For “Lambda Function”, enter BasketLambda. Then, click “Save”. Select “OK” in the pop up window that asks to add permission to Lambda.
As previously mentioned, you will add request authentication to the methods. Select the “POST” method you just created. A networking chat will show up to the right. Click on “Method Request”.
Click on the pen icon next to “Authorization”. A drop-down list will appear. Select CognitoAuth, the authorizer you just created in the first step of this section. Finally, click on the check mark icon right next to the drop-down list.
Besides adding a unicorn item to the cart, requests for fetching the shopping cart of a specific user, and for removing specific items from a cart need to be handled as well. These two types of requests are a GET request and a DELETE request under the “/basket/{id}” resource. Since their configurations in the API Gateway are exactly the same, you can simply create an ANY method to handle both of them.
Select the “/basket/{id}” resource, and select “Create Method” as you did in step 1. Similar to step 2, select the type of method, which is “ANY” in this case. On the method setup page displayed on the right, do the same configuration as you did for the POST method in step 3.
As you did for the POST method, use Cognito to add request authentication to the newly-created method. (If you encounter trouble, please refer to step 4 & 5 for detailed instructions.)
Finally, enable CORS for both of the resources you have added. Select the “/basket” directory, and under the “Actions” drop-down list, select “Enable CORS”.
Similar to the Create Method section in part 1 of Facade Configuration, in the “Access-Control-Allow-Headers” field, delete and replace the default string with the following:
'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token,Access-Control-Allow-Origin'
Then click “Enable CORS” and “Yes, replace existing CORS headers”.
Repeat step 9 and 10 for the “/basket/{id}” resource.
To update the previously deployed API with our recent changes, you need to re-deploy the API. In the “Actions” drop-down list, select “Deploy API.”
In the subsequent pop-up window, select “prod” for deployment stage, and click the “Deploy” button.
Congratulations! You have completed every step necessary to strangle the basket service out of the monolithic application! Now let’s test whether it works as you expected! You can access the Unishop application by paste the value of “Unishop Frontend URL in S3” into your browser, log in with the account you registered previously when configuring Cognito (part 3 of Facade Configuration), and add a couple of unicorns into your shopping cart. (If you have already open that website, please refresh it.)
After successfully doing so, you will see the number beside “cart” on the top navigation bar incremented by 1. You can also check the developer tool to find a complete list of items currently in cart:
Meanwhile, the BasketLambda function you deployed will add the selected unicorns to your basket stored in DynamoDB. You can confirm this by accessing DynamoDB in your AWS Management Console and navigating to Tables in the vertical navigation bar to the left. From there, select the table you just created, and click on the Items tab.
After confirming that all the unicorns you added to your cart are stored in the DynamoDB table, let’s move on to strangle out the inventory service from the monolith application.