Link Search Menu Expand Document

Calling API and testing Subscription Keys

Let’s add another API, the Color API.

APIM Color API

  • Create a new API with OpenAPI specification and import swagger from https://markcolorapi.azurewebsites.net/swagger/v1/swagger.json.
  • Use the API URL suffix color.

    APIM Add Color API

    APIM Add Color API

  • We can test the newly-added API from the Test tab. Note the successful 200 response.

    APIM Test Color API

  • Products can be configured after the API is initially created as well. On the Settings tab, set Products to include Starter and Unlimited, then press Save.

    APIM Color API Add Products

  • Switch to the Developer portal and look at the Color API.
  • Try the ApiRandomColorGet operation.
  • Notice the successful 200 response and the returned random color.

    APIM Developer Portal Color API Try It

    APIM Developer Portal Color API Try It

Rate limit

API Management uses rate limiting to protect APIs from being overwhelmed and helps prevent exposure to DDoS attacks. As APIM sits in between your API and their callers, it effectively governs access to your APIs.

We are going to use the Color website to demonstrate how rate limiting is applied. The website displays 500 lights. Each light will randomly make a call to the RandomColor API and then apply the returned color to the lights.

Color Website

First, we need to enable CORS for the domain name of the frontend. To achieve this we have to do the following in APIM:

  • On the sidemenu, click on APIs, then select the All APIs option.
  • Inside the Inbound processing area you will see the cors policy, which we added in part 2 by pressing the Enable Cors button.
  • Click on the pencil icon next to that policy to edit it.

    APIM Policy CORS All APIs

  • Here we will see this form where we can add the domain name of our frontend https://markcolorweb.azurewebsites.net or the * for all domains. Press Add allowed origin, enter the URL, then press Save.

    APIM Policy CORS All APIs

  • After enabling CORS in APIM lets go back to our frontend https://markcolorweb.azurewebsites.net and follow these steps:

  • Click on the hamburger menu next to Colors in the top left corner.
  • Click on Config.
  • Replace the API URL according to this format: https://YOURAPIM.azure-api.net/color/api/randomcolor
  • After setting the API URL correctly, press the hamburger menu again and go to Home.
  • Press Start to see how the frontend is calling the api. You should see a 401 response, indicating an auth error. This happens as our API requires a subscription, but we have not yet entered a subscription key.

    Color Website APIM 401

  • The subscription keys can be fetched from the Developer Portal. Open the main Developer Portal page, then click on Profile in the top menu.
  • Copy the following URL into Notepad, modify your APIM instance, then copy the URL, so that you have two of the same URLs. We will use them for the Starter and Unlimited pathways into APIM.
    • https://YOURAPIM.azure-api.net/color/api/RandomColor?key=
  • Append the primary keys for both subscriptions - one key per URL - to get unique URLs for Starter and Unlimited.

    Notepad Color API Subscription Keys

  • To see that Unlimited product has no rate limits:
    • Configure the Color website to use the Unlimited URL.
    • Select [Start].
    • Notice there is no rate limit - every light is randomly and continuously updated.

      Color Website APIM Unlimited Product

  • To see that Starter product is limited to 5 calls per minute:
    • Configure the Color website to use the Starter URL.
    • Select [Start].
    • Notice that only 5 lights get colored.

      Color Website APIM Starter Product

  • Try the same Starter URL directly in your web browser:
    • Notice the error status / message returned. For example: { "statusCode": 429, "message": "Rate limit is exceeded. Try again in 40 seconds." }

      APIM Color API URL in Browser for Starter Product 429