2

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)}",
0

1 Answer 1

3

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.

3
  • 2
    Thank you so much for posting your answer. I was preparing a similar question when I found your answer. "allowed token audience" was the one config I did not know. You saved me a couple of hours ;)
    – Ronald
    Feb 18, 2021 at 17:06
  • 1
    Nice to know that I help you 😊. I wasted a couple of hours then
    – zolty13
    Feb 18, 2021 at 22:57
  • Thank you very much @zolty13 It is working :) First I could not find this setting. Later I found it here: Function App -> Authentication -> Edit Identity provider Microsoft -> The last field in the opening form is "Allowed token audiences" Jul 20, 2023 at 11:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.