Secure Azure Function API with MSAL

Question

I have Azure Functions which i want to authenticate using access token.

I have following things set up

1. Azure App which is being used by Angular SPA to authenticate user
2. Access token which is used to invoke graph APIs, Permissions are set in Azure app (point 1)
3. Azure Function which is having http triggers (APIs) which are being used by SPA

Currently, APIs are anonymous and can be invoked from anywhere. i want to secure these apis using access token which is being used by graph api (point 2)

I think the best approach for me is AAD multi tenant authentication. However, When i click on "Authentication (classic)" it gives me This app is configured using the new authentication experience. Click here to access Authentication (preview).

Also, if i keep authenticated with following options, i get "You do not have permission to view this directory or page." error

Most of the articles which i find online are talking about AAD. for me that option is not enabled.

I have tried following articles to make it work but somehow its not happening. can anyone suggest. how can i achieve this.

https://medium.com/medialesson/protecting-azure-function-apps-with-azure-ad-authentication-authorization-fd167ce4fe33

https://medium.com/geekculture/easyauth-in-functions-app-with-azure-active-directory-29c01cad8477

is there something i need to do in my existing Azure app to make it work ?

Answer 1

May be this will help someone, I have tried using above suggestions but could not achieve 😭 instead i am using Key for each Azure function. and storing those keys in azure Key/Vault and retrieving those keys within App settings of the application using managed identity. This may be not be the ideal situation but i think it will do for me at the moment. I really hope MS will improve their documentation some day along with sample code/steps

Answer 2

Per my understanding, your Azure function is protected by AAD using Authentication(Easy auth). And now, your angular SPA would like to access this function. Pls follow the steps below:

1. Go to Azure AD => App registrations => The App you created to protect your Azure function=> Expose an API to add a scope, for instance, access_as_user so that your SPA could require an access token for this scope:

2. Got to Azure AD => App registrations => The App you created for your SPA app=> API permissions => Add a permission => My APIs to grant the scope we just created:

Click the grant admin consent button to finish the process.

3. In your SPA app, use MsalService to acquire an access token with scope: api://<your azure function app id>/access_as_user, by this token, you can access your Azure function. For a quick test, I just test it in post man and it works perfectly:

Not use this access token

Bring this access token

UPDATE

Basically, your app request diagram as below:

SPA (request with access token)==> Easy Auth of Azure function (valideate token,if pass,goes into Azure function code logic,if not, return 401)==> code logic of Azure function (obo flow to get access token for Graph API) ==> call Microsoft Graph API

By now, we have finished steps 1 and 2: get access token for easy auth and pass easy auth goes into Azure function code logic.

So in the Azure function code logic, we need to do 2 things:

1. Get the access token in the request header
2. Use the access token and OBO flow to exchange a new access token for Microsoft Graph API. Just refer to request below to use OBO flow to exchange an access token for Microsoft Graph API:

BTW, pls make sure that your Azure function app has been granted with permission user.read and Calendars.Read:

So that you can get a new access token to call Microsoft Graph API: