Protecting Azure API Management APIs using Asgardeo

Very often, we need to protect APIs and a very good way of doing it is to use Open ID Connect (OIDC) authentication. In this article, we are going to take a look at how we can use Asgardeo to provide OIDC authentication to Azure API Management.

Before we begin, let’s look at what we will be trying to do. The following diagram illustrates the high-level picture of the system we are trying to build.

We have an Azure Function App which is a serverless app that returns the current time of the location specified in the request. This app lies behind an API layer created using Azure API Management. A frontend web application requests the current time for a given location by querying the API endpoint, and displays the time on the UI. Our goal is to protect this API endpoint so that only authenticated users can access it.

Since our focus is to use Asgardeo to protect the API endpoint, the development of the serverless app and the web app are beyond the scope of this article. However, if you want to try out the whole system, you will be able to find the code for these two applications in the following repositories.

• Serverless App
• Web App

The web app is a React application that uses the Asgardeo Auth React SDK to authenticate a user with Asgardeo. Once we authenticate a user, then we can get the user’s access token. This access token should be attached to the “Authorization” header attribute of an API request as the bearer token. Azure API Management should then check if there is an access token in the API request received. If there is one, then it should validate it before querying the serverless app.

Configuring Asgardeo

First, let’s configure Asgardeo to allow the web app to authenticate a user with Asgardeo. Open Asgardeo Console by going tohttps://console.asgardeo.ioand sign in with your credentials. Then, let’s create a new application by clicking on “Applications” from the side panel and clicking on “New Application”. Next, select “Standard-Based Application” to create an OIDC application. Then, provide a name for the application, make sure the protocol is set to OAuth2 and OIDC, and click on “Register”.

Once the application is registered, we need to configure it. To that end, go to the edit view of the application and select the “Protocol” tab. Here, configure the following settings:

1. Check “Code” under “Allowed grant types”.
2. Check “Public client” since we will be using it with a web application.
3. Provide a redirect URL. This will be the URL to which the user should be redirected after signing in. In my case, it ishttp://localhost:3000
4. Add the origin of the redirect URL to allowed origins.
5. Select “JWT” as the “Token type” under “Access Token” since Azure API Management will be using a JWT token to validate requests.

Following this, make a note of the client ID of the application and pass it into the config of the Asgardeo Auth React SDK used in the web app. In addition to this, we also have to note down the discovery endpoint by going to the “Info” tab in the edit application view. We will be needing this endpoint when configuring Azure API Management.

So, the web app will first try to authenticate a user with Asgardeo, get the user’s access token, and then attach it to the header of the requests to the API endpoints managed by Azure API Management. Now, we need to configure Azure API Management to validate the requests.

Configuring Azure API Management

Since creating and configuring Azure API Management are beyond the scope of this article, I am going to use a preconfigured setup. I have created an instance of Azure API Management and I have created an API that points to the Azure Function App I have developed. So, let’s see how we can add token validation to this API.

First, select APIs from the side panel, select the API that we want to configure, and select the specific operation. Then, under “Inbound processing”, select “Add policy”. Next, select “Validate JWT” and add the following configurations:

1. Set the “Header name” to “Authorization”.
2. Provide a “Failed validation error message”.
3. Click on “Add audience”, and copy and paste the client ID of the Asgardeo application we created in the previous steps.
4. Click on “Add OpenID URL” and paste the Discovery endpoint we made a note of in the Asgardeo application’s “Info” tab.

Now, we are all set. Click on “Save” and then try sending a request to the API endpoint without an access token. You should get a 401 error. If you send a request with the access token attached to the header, then you should get the current time as the response. So, this is how we protect an API endpoint managed by Azure API Management using an Asgardeo application.