API repro
I created a simple azure function app in azure portal and function with http binding. Function just returns string "Hello from secured API".
Next in platform features I selected Authentication/Authorization. I turned on app service authentication. I selected action to take when request not authenticated: Log in with AAD. Selected AAD as my provider and configured in Express mode (Default Directory) and selected {name} for new Active Directory App.
I also added to CORS policy address: http://localhost:8080 where my Vue.js client app is running.
After those operations I had registered app in my AAD with user_impersonation scope already defined. AD App had already configured redirect URI: https://{name}.azurewebsites.net/.auth/login/aad/callback, checked Id token for implicit grant on Web platform. I wanted to change supported account types to multitenant, but I cannot due to some error.
In Expose Api section I changed App Id Uri from https://{name}.azurewebsites.net to api://{app id} in order to choose multitenant supported client types. There already has been user_impersonation scope defined.
client repro
I registered my app on Web platform with redirect uri http://localhost:8080/ and select both id and access token uder Implicit Grant section. I chose multitenant account type.
I added api permission to my API (azure function) api://{api app id }/user_impersonation
I am using MSAL.JS in my vue.app. I've done all my job there. Got popup, gave my login and password.
I received id token and access token in my vue.js client app from Identity provider (AAD).
I am sending request to my API (azure function) with Authorization header Bearer {access_token}.
Problem
My API request is unauthorized. I got status 401:
POST https://{azure func name}.azurewebsites.net/api/HttpTrigger1?code={code}== 401 (Unauthorized)
Http address was copied from azure portal.
When I click link, I am redirected to log in and next redirected to to azure function with my "Hello from secured API" text in brwoser tab.
I seems that Easy auth treat my azure function as Client App, whether I want it to be middleware APi for my vue.js app. My Azure function API should only recieve and validate access tokens.
Tried
I also tried to sent request from postman with the token, but also received unauthorized.
I explored the token and it seems to be correct:
"aud": "api://{Azure function App Id (id in AAD)}",
"iss": "https://sts.windows.net/{tenant id}/",
"appid": "{registered vue js client app id (id in AAD)}",
To resolve the problem I had to go to Authentication/Authorization section in my Azure Function App platform features. Under Authentication provider select AAD -> advanced and add allowed token audience: api://{Azure Function AD App Id }.
The problem was that my token was intended for other audience: https://{func name}.azurewebsites.net. It was due to changing my AF AD App Id:
"In Expose Api section I changed App Id Uri from https://{name}.azurewebsites.net to api://{app id} in order to choose multitenant supported client types. There already has been user_impersonation scope defined."
This operation also has changed scope names.