Authenticate Azure Functions with Swagger UI

 In this blog, we will see how we can secure our azure functions with API Keys and use swagger for API documentation. Swagger is an Interface Description Language for describing RESTful APIs expressed using JSON. If you want to learn more about azure function. Please look into my previous blog (link) about azure function to create rest serverless api .

There are multiple ways to secure your Azure Functions like API Keys, API Management, App Service Authentication (App registration in active directory), etc. If you want to make a start with minimal effort and less setup of Infrastructure, then API Keys is the ideal choice.

Azure Functions allows you to secure HTTP-triggered functions by API access key in the request. We can send HTTP request with help of Swagger, Postman, JavaScript etc.  As part of creating new Azure Functions, we can select the Authorization Level enum value.

Azure Functions with Swagger UI

I am creating new project in visual studio 2019 to demonstrate. How we can add swagger ui in azure function. We need follow below steps.

1.       Open visual studio 2019 and create new azure function project with name FunctionApp.Swagger

2.       Choose option as above screen. If you want to add swagger UI in API make sure you have selected Http Trigger with OpenAPI option.  

3.       In this project we are using Function level Authorization. When we set Authorization level then need to pass authentication token to access the resource. We will pass API key as authentication token with HTTP request       

4.       Once all information filled as above then we will click on create button. It will create Function1  as below

5.       If we run the azure function with help of Visual studio 2019. It will open console window with swagger ui url as above screen. In my case azure function swagger UI is http://localhost:7071/api/swagger/ui

6.       If we open the swagger ui url in browser it will display like this and we can make HTTP request

7.       When we run application in localhost, we don’t need to pass API key in Swagger UI. It will execute our HTTP request without it. Once we deploy the application in Azure then need to pass API key by clicking on Authorize

8.        You can see swagger UI added in our API and we can make HTTP request directly from browser with help of swagger

9.       Now we ready to deploy application Azure.

Consume Azure Function  

Once our application tested in local machine then we need to deploy it on Azure. I have created new azure function (djblogsfuncappwithswagger) in Azure with help of portal. Once azure function created in azure then we need to download the publish profile and publish our code directly from visual studio 2019.

Need to follow below steps to publish azure function in Azure

1.       Created new azure function (djblogsfuncappwithswagger) with consumption app service plan in portal

2.       Once azure function created then need to download publish profile to publish azure function code from visual studio 2019 as below

3.       Once azure function published in Azure then we can make HTTP request with help of swagger UI.

URL: https://djblogsfuncappwithswagger.azurewebsites.net/api/swagger/ui

4.       When we run API in browser without API Key it will give this Unauthorized error

401 Error: Unauthorized

 

5.       We can get API key from Azure function. Need to open azure portal and go to azure function there is default API key. This is created by default when azure function created.  If you want you can create multiple keys as per our requirement  

6.       We will copy the default key from functions keys and add that key in swagger authorize as below screen. 

7.       Once key added in Swagger UI Authorize and then we try to make HTTP request. It will be executed with HTTP code 200.  

8.       We can make the HTTP request from Postman as well by adding x-functions-key in HTTP request header like below screen shot.

9.       Same way we can make request from JavaScript and jQuery as well.

GitHub Link: https://github.com/deepakjoshiinfo/FunctionApp.Swagger/blob/master/WebApp/Pages/Index.cshtml

I have uploaded code in GitHub. You can download code from there

GitHub: https://github.com/deepakjoshiinfo/FunctionApp.Swagger

Hope it will help you give little idea about authorization and authentication of Azure functions

Keep sharing keep learning. Cheers