Part 3 - Configure Resource - API Gateway

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.

Add Authorizer

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.

  1. 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.

  2. In the vertical navigation bar on the left, go to “Authorizers.”

    Add Authorizer

  3. 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

    Authorizer Configuration

Add Resources

  1. In the vertical navigation bar on the left, go to “Resources.”

  2. 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”.

    Select /api actions

    Create api child resource

  3. Enter basket for resource name, the resource path will be automatically filled in. Then check “Enable API Gateway CORS.” Finally, click “Create Resource”.

    Basket resource configuration

  4. 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.”

    Create {id} resource

Add Methods

  1. 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”.

    Select Actions for basket

  2. A drop-down list will appear right beneath “/basket” resource. Select “POST” and click on the check mark right next to it.

    Create POST method

  3. 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.

    POST method configuration

    Lambda permisions

  4. 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”.

    POST Method Request

  5. 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.

    Add Authorization to POST

    CognitoAuth Basket POST

  6. 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.

  7. 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.

    Create ANY {id} method

    {id} ANY method configuration

  8. 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.)

  9. 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”.

    Enable CORS Action Basket

  10. 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”.

    Enable CORS

  11. Repeat step 9 and 10 for the “/basket/{id}” resource.

  12. 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.”

    Deploy API Action

  13. In the subsequent pop-up window, select “prod” for deployment stage, and click the “Deploy” button.

    Redeploy API Configurations

Test the Basket Microservice

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.)

Test Basket Service Unicorn Site

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:

Basket Service Developer Tool

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.

Select Basket DynamoDB

View Basket Table Items

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.