Azure API permissions for Graph API

0
votes

Context

For a case I am required to work with a private Azure API, lets call it MYTESTAPI. MYTESTAPI contains a few scopes so it is able to access our .net core API. This works great because I am making the token request with:

api://{clientid}/mytestapi.scope

I am getting a token back and with the token I can access our API. I have an Angular client with an external library called angular-oauth-oidc-client. This is working till an extend as I work with the (not recommmended) implicit flow and silent renew.

Now I have my Angular app set up so I am connecting through Azure AD to our Private API. BUT the issue is, I am required to get UserInfo too. This comes from 'https://graph.microsoft.com/oidc/userinfo'. So what I tried to do was add: openid, profile to the scopes so I am able to use the graph API to get basic profile info.

scopes: 'openid profile api://{clientid}/mytestapi.scope'

When I decode the generated token, I do not see openid or profile added to the "scp" part. And the userinfo request returns a 401: Unauthorized. It seems like I need to configure something in Azure Portal to make this work.

My probable solution is to configure the azure API in a way that 'mytestapi.scope' will grant permission to access parts of the graph API.

Feel free to ask any required context or questions.

Question:

  • Is it even possible to grant graph permissions to a private API and if so is it recommended or is there a better solution and how?
2
azure-active-directorymicrosoft-graph-apiopenid-connectazure-api-apps

2 Answers

1
votes

Yes its possible to grant graph api permissions to your api, you would use what's called the on-behalf of flow for authentication. Here is the documentation on the flow https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-oauth2-on-behalf-of-flow there is no direct sample from microsoft on doing it in angular however there is a sample of doing it in react which is similar in concept. https://github.com/Azure-Samples/ms-identity-javascript-react-spa-dotnetcore-webapi-obo

In essence, in your private api, you need to add the graph api permissions to it. expose the API, then from client side when requesting scopes, request the .default scope of your exposed api. It is definitely a supported scenario so safe to use. as for client side, You can get scopes for graph as well, I just believe when you reuqest the scopes when acquiring the access token that you can only request one API's scopes at a time. eg. you can get multiple graph scopes at a time but not a graph scope and a private api scope at the same request. https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/508#issuecomment-451527718

0
votes

Alphaz18's answer is correct so mark that as the accepted answer:

  • Call Graph API from your Custom API
  • Expose an API endpoint from your Custom API that your UI calls

If it helps, here are some visual resources of mine that do the same thing. Azure AD behaviour is not very intuitive though, and it took me a while to get this working.