Does MSAL auth flow with Angular give access to Microsoft Graph API only?

Question

Hello,

I followed this tutorial to develop a webapp that can make API calls. My need is not for MS Graph but for Microsot Azure Devops Rest api.
https://learn.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-angular-auth-code

Login and logout to Azure AD in the webapp works as it should (as shown in the tutorial). Api calls to Microsoft Graph work like a charm. When I attempt to implement API call to Microsoft Azure Devops Rest Api, I get a response 203.
]2

I have granted permissions in Azure portal for the webapp to access Microsoft Azure Devops Rest Api with scope user_impersonation
and mapped the resource in app.module.ts

Authentication part I have configured as instructed in the tutorial:

When I make the API call to Azure Devops Rest Api using python script (using access token I created in Azure), it works. I am also able to navigate to the url where I want to make API call to, and access data. But in this webapp, using auth flow and MSAL as instructed in the tutorial, it returns response 203.

My primary question is: Following the instructions in this tutorial, is it only possible to access MS Graph API and not Azure Devops Rest Api?
My secondary question is: How can I then successfully send API calls to Azure Devops Rest Api in an Angular SPA?

Thanks a lot,
Anu

Answer 1

@Anu Virtanen
Thank you for your post and I apologize for the delayed response!

I'm not too familiar with DevOps but based off the tutorial you followed - Sign in users and call the Microsoft Graph API from an Angular single-page application (SPA) using auth code flow, it looks like it's used specifically for signing in users and calling the Microsoft Graph API using the authorization code flow with PKCE. The SPA within the tutorial uses the Microsoft Authentication Library (MSAL).

To successfully authenticate to and use the Azure DevOps Services REST API, it looks like you'll need to use the Active Directory authentication library (ADAL), OAuth, Device Profile, or VSS Web Extension SDK. For more info - Authenticate.

Since Azure DevOps is currently not supported here on Q&A, I'd recommend reaching out to our DevOps experts via the following forums.

Azure DevOps Developer Community
Azure DevOps Server (TFS) Community
Azure DevOps Tech Community

I hope this helps!

If you have any other questions, please let me know.
Thank you for your time and patience throughout this issue.

----------

Please remember to "Accept Answer" if any answer/reply helped, so that others in the community facing similar issues can easily find the solution.

Answer 2

Thanks @JamesTran-MSFT for the info. I finally got it to work! :D

I followed the instructions you linked here https://github.com/microsoft/azure-devops-auth-samples/tree/master/JavascriptWebAppSample
and even though that implementation was not suitable for my purpose at this time, in there I saw a value in config.json that I had not seen in any other instructions this far
]2

And when I put that in my app.module.ts as scope instead of the value that I had read I should put
it started working. So thanks to you linking the other sample, I found the valid scope value which seems to have been the problem. Thank you very much!