How to access DevOps API with MSAL ?

[byunru]

Core Library

MSAL.js v2 (@azure/msal-browser)

Core Library Version

"@azure/msal-angular": "^2.0.2"

Wrapper Library

MSAL Angular (@azure/msal-angular)

Wrapper Library Version

"@azure/msal-angular": "^2.0.2"

Description

How to config MSAL to access Devops API

My angular library reference: "@azure/msal-angular": "^2.0.2", "@azure/msal-browser": "^2.16.1",

The app can call Azure rest API & Graph API with no problem, but can't call DevOps API

MSAL Configuration

No response

Relevant Code Snippets

1) App registration: in [API permissions], added Azure Devops user_impersonation as Delegated type

2) in https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/v2-docs/configuration.md
protectedResourceMap.set("https://app.vsaex.visualstudio.com", "https://app.vsaex.visualstudio.com/user_impersonation")

Identity Provider

Azure AD / MSA

Source

External (Customer)

[sameerag]

@byunru Have you reached out to the DevOps team for the list of relevant scopes to be enabled?

[byunru]

@sameerag Since "https://management.azure.com/user_impersonation" is the global scope for All azure resource API, so I assume that "https://app.vsaex.visualstudio.com/user_impersonation" is the global scope for DevOps API

I tried with this format endpoint: "https://dev.azure.com/msaltestingjs/_apis/projects?api-version=4.0", scopes: ["499b84ac-1321-427f-aa17-267ca6975798/.default"] from https://github.com/microsoft/azure-devops-auth-samples/blob/master/JavascriptWebAppSample/config.js give me different error: "CORS header “Access-Control-Allow-Origin” missing)" I think "config.js" file is outdated.

Tried different combination of above, no luck.

[byunru]

According to https://docs.microsoft.com/en-us/azure/devops/integrate/get-started/authentication/authentication-guidance?view=azure-devops "MSAL is the best authentication mechanism to use with our REST APIs."

I hope can get advise or tips from you soon @jasonnutter

[jasonnutter]

@byunru Apologies for the delayed response. @derisen Can you help with the devops sample linked above?

[derisen]

@jasonnutter checking. @byunru will get back to you soon.

[derisen]

@byunru you need to make sure to connect your AAD tenant to your Azure DevOps account, and then modify the config.js like:

const apiConfig = {
    // e.g. https://dev.azure.com/{organization}/_apis[/{area}]/{resource}?api-version={version}
    endpoint: "https://dev.azure.com/<YOUR_TENANT_NAME>/_apis/projects?api-version=4.0",
    scopes: ["499b84ac-1321-427f-aa17-267ca6975798/.default"] // this is the app Id of devOps service
};

See also. Can you give this a try and let me know? Steps should have been much clearer, apologies. Making a PR to fix that.

[byunru]

I got error as below when use the above config (my aad account is the admin of adoz portal)

===================== error msg on =================================

[Thu, 02 Sep 2021 22:58:37 GMT] : @azure/msal-browser@2.16.1 : Info - Emitting event: msal:acquireTokenSuccess 2 app.module.ts:27:10 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://dev.azure.com/byunru/_apis/projects?api-version=4.0. (Reason: CORS header “Access-Control-Allow-Origin” missing).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://dev.azure.com/byunru/_apis/projects?api-version=4.0. (Reason: CORS request did not succeed).

=================================================================

(Note: if I direct open in browser: https://dev.azure.com/byunru/_apis/projects?api-version=4.0, get the correct json result)

[derisen]

CORS issues are beyond the scope of MSAL. Basically the API you are calling needs to allow CORS for your client app.

Regardless, DevOps API supports CORS. Are you sure you're making a simple GET request? Can you share a code snippet or network trace?

[byunru]

@derisen can you provide email? I can zip the code to you.

My app is pure angular + MSAL, no server-side code., it based on https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-angular-v2-samples/angular12-sample-app I added very little code.

In app I call Graph api & Azure resource api with no issue. only have issue when I call DevOps api, so no idea where the CORS issue come from.

[derisen]

@byunru you can find my email on my GitHub profile, though I would recommend creating a GitHub repo instead

[byunru]

@derisen I've sent the code, hope I provided enough information so that easy for you to reproduce the issue on your side.

[derisen]

@byunru this went to the spam folder apparently, sorry. Checking and will get back to you.

[derisen]

@byunru I couldn't reproduce your issue. The request was successful for these coordinates:

this.resourceMap.set("https://dev.azure.com/MY_TENANT/_apis/projects?api-version=4.0", ["499b84ac-1321-427f-aa17-267ca6975798/.default"]);

I only tested this on localhost. Are you having this issue when your app is deployed? Are you getting different results on localhost vs hosted? Can you also tell us which browser you are using?

[byunru]

@derisen thanks trying out for me, It is very very odd, I tested localhost and deploy to also storage account (static site), both having the same error while retrieving azure resource with no issue, I tested with chrome, edge, Firefox. Do you mind arrange a remote screen-sharing troubleshooting this ? I can create a service ticket from my company portal if you need.

[derisen]

Interesting.. ok let's setup some for this. I've added you on Teams.

[derisen]

This was resolved offline. For reference, the issue was to connect the DevOps organization to Azure AD tenant. Closing.