Protecting Azure Function apps with Azure AD Authentication & Authorization
How to enable Authentication/Authorization in Azure Function apps using configuration and get the signed in user in code.
In my previous blog post Authenticating Angular apps with Azure Active Directory using MSAL Angular 1.0 I explained how to secure an Angular app with Azure AD. In this story I wand to show how to extend this solution into the backend by securing an Azure Function app with a RESTful api using Azure AD.
Prerequisites
- Azure subscription, get your free Azure account here: https://azure.microsoft.com/en-us/free/
- Visual Studio Code (free download: https://code.visualstudio.com/) with Azure Function extension (https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurefunctions) or Visual Studio (free as Community Edition: https://visualstudio.microsoft.com/de/thank-you-downloading-visual-studio/?sku=Community&rel=16) with Azure workload installed.
Configure a new app registration in Azure AD
To use Azure AD as an authentication provider in Angular we need to register a new app in the Azure portal: https://portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps, click on new registration:
Enter as display name and save it.
On the overview page make sure to copy the Application (client) ID and your Directory (tenant) ID:
Create a new Function app
Create Function app in Azure Portal
Let’s start by creating a new Function app in den Azure Portal, https://portal.azure.com/#create/hub
Create a new resource group, pick a name, select .NET Core 3.1 as runtime stack and create the app.
Once the app is created got to Authentication/Authorization and set App Service Authentication to On. Also select Log in with Azure Active Directory as Action to take when request is not authenticated.
At this point a bit of context how this authentication actually works: The Authentication middleware in Azure Functions validates incoming access tokens and checks if they are meant for the provided audience. The audience is represented by the configured Azure AD app registration that we will provide in the next step. Also this middleware extracts all claims included in the access tokens and makes them accessible to the Function’s code via input binding/method parameters.
Click on Azure Active Directory to configure the authentication provider:
Next up paste the client id of the Azure AD app registration and also add the issuer url. The issuer url is in the form of https://sts.windows.net/YOUR_TENANT_ID/
Create Function app in Visual Studio
Now that we have the app setup in Azure we also need to create some code. Therefore we need create a new Function app using C# in Visual Studio:
Select Http trigger so we have a sample function to test authentication with.
Working with Claims
As mentioned before the authentication middleware will extract the claims from the incoming authentication token. This allows us e.g. to get the username and other relevant information about the user. To do this we need to add a ClaimsPrincipal method parameter to our function. Also let’s just return the username as http response, so we can test if authentication and claims work:
So with this simple test function, let’s deploy the app to Azure so we can test it. Right click the project and select publish and pick Select Existing:
Login to your Azure account and select the Azure Function app we created before:
Note: I have yet to find a way to test authentication locally. Happy for any ideas…
Test with Postman
With authentication setup we now want to test this. Let’s call the function’s url in the browser to test it:
So we are being redirected to the login, but after successfully signing in, we get this nice little error. Don’t worry, it actually makes sense.
In real world scenarios our API will be called by some client, e.g. a web app. So the token is generated by a different app (e.g. an Angular app) and also by a different app registration. Since we don’t have a web app yet to create a token we will need to modify our app registration in Azure AD to create at least an ID token to test the endpoint temporarily. Please don’t forget to undo the following changes, once you move to production.
In the app registration in Azure AD we need to configure Authentication and add a platform:
Select web since we want to login in the browser. The Redirect URI is important to match with what the Function app will use. The correct setup is https://YOUR_APP.azurewebsites.net/.auth/login/aad/callcack. Make sure to also select ID token:
Let’s try again with the function url. This time we should be able to login and get our function’s response with the username:
Summary
So the builtin authentication middleware takes off a lot of the heavy lifting and plumbing for integrating Azure AD authentication into Azure Function apps. The setup can also be entirly done by an assistant in the Azure Function app configuration but I wanted to show all parts and how they are connected. I’m planning on the follow up post on how to tie together the Angular authentication and the Function authentication into one working solution. Stay tuned!
