Azure client app accessing Azure api secured by AD

Question

I have an Angular 5 app and a web api app, both of which are hosted in Azure.

They have been secured with Azure AD at the website level e.g. no anonymous access is allowed.

When browsing the Angular site, it asks me to log in fine and I can access .auth/me which uses the local cookie to get token/claim information.

I now want to call the separate api but not sure how to go about it.

Both sites have an application in Azure AD, and I've set the client to have delegated permissions of 'Access to API'.

I've tried accessing the api using both the local cookie from the client (not sure if this would work) and the token returned .auth/me but neither work.

In my client manifest I have the following:

"resourceAppId": "3cddd33c-2624-4216-b686-7f8fa48f38cf", // api id
  "resourceAccess": [
    {
      "id": "c2712c68-ea93-46d2-9874-61b807b19241",
      "type": "Scope"
    }
  ]

but haven't seen any additional scopes added to the claims, should it?

Bruce Chen Bruce Chen · Accepted Answer · 2018-02-07T07:05:05

According to your description, you have both created the separate AAD application for your Angular app and your web api app, and configured the delegated permissions for your Angular AAD app to access the web api AAD app.

Based on my understanding, you are using the build-in App Service Authentication / Authorization for authentication, at this point you could do not need to change code on your app backend. You may have set Action to take when request is not authenticated to Log in with Azure Active Directory instead of allowing anonymous access, at this time your app service would directly redirect the user for authentication. After logged, your client could access https://{your-angular-app-name}.azurewebsites.net/.auth/me for retrieving the logged user info. For accessing your web api website, you could just send the request as follows in your angular client:

GET https://{your-webapi-app-name}.azurewebsites.net/api/values
Header Authorization:Bearer {id_token or access_token of AAD}

UPDATE:

That is exactly the route I'm trying to implement. One thing missing though, I had to add the client application id to the allowed token audience of the api app in Azure.

For retrieving the access_token, you need to set additional settings for the AAD provider in your Angular web app as follows:

"additionalLoginParams": [
  "response_type=code id_token",
  "resource=<AAD-app-id-for-your-webapi-webapp>"
]

Details you could follow this similar issue.

Use the EasyAuth server flow for logging, you would get the access_token, and you could leverage https://jwt.io/ to decode your token as follows:

Pass the access_token as the bearer token to your webapi web app, at this time you do not need to specific the ALLOWED TOKEN AUDIENCES.

At this time, you could invoke .auth/refresh against your Angular web app for refreshing the access_token, then you could use the new access_token to access your webapi web app.

I want roles included in the token so might have to stick with id?

If you want your Web API exposing access scopes to your Angular application which would be contained in the access_token as the scp property, you could follow the Configuring a resource application to expose web APIs section in this tutorial. Moreover, you could also follow Application roles.

UPDATE2:

You could follow Authorization in a web app using Azure AD application roles & role claims for detailed tutorial and code sample.

Azure client app accessing Azure api secured by AD

2 Answers