How to consume Azure devops REST API in angular

Question

I have created an Angular application where I have to use Azure DevOps REST API to retrieve ticket details. I'm authenticating user against clients Azure-AD using @azure/msal-angular", "@azure/msal-browser" packages.

I'm using this document which says this the syntax for the URL should be something like GET https://dev.azure.com/{organization}/{project}/_apis/wit/workitems/{id} which did not work for me

But when I paste GET https://[ClientURL.com]/[resource/location]/_apis/wit/workitems?ids=123 into browser address bar I get JSON response.

I'm using the token I get to consume REST services by calling my clients url something like this
GET https://[ClientURL.com]/[resource/location]/_apis/wit/workitems?ids=123

I'm intercepting the requests using MsalInterceptor which will add the Authentication header.

I get an error saying Interceptor - acquireTokenSilent rejected with error. Invoking interaction to resolve.

I couldn't find any good enough documents for angular and having trouble understanding whether I have to authenticate again for REST API's or the AD authentication should just be fine.

UPDATE

The application was already built using C#. My client wants it to be developed using Angular. This is my login configuration

export function MSALInstanceFactory(): IPublicClientApplication {
        return new PublicClientApplication({
            auth: {
                clientId: '' // my registered angular app clientId,
                authority: 'https://login.microsoftonline.com/my_tenentid',
                redirectUri: 'https://localhost:8080',
                
            },
            cache: {
              cacheLocation: 'localStorage'
            }
        })
        }

I'm using MSAL to authenticate my app

loginMsal() {
  this.msalService.loginPopup().subscribe(
    (response: AuthenticationResult) => {
      this.loginSuccessfull(response)

    })
 }

Need help!

Levi Lu-MSFT · Accepted Answer · 2021-03-29T09:53:50.883

1

You need to check if the application you registered in azure portal has been granted permissions for Azure DevOps. See below steps to grant permissions for Azure DevOps.

Navigate to the registered application portal-->API permissions under Manage-->Add a permission-->select Azure DevOps-->select Delegated Permissions-->check user_impersonation.

And you can add the access token you get in the Authentication header like below example from here.

var vstsApi = "https://dev.azure.com/{organization}/{project}/_apis/wit/workitems/{id}?api-version=6.1-preview.3"
var xhr = new XMLHttpRequest();
                
xhr.open('GET', vstsApi, true);
xhr.setRequestHeader('Authorization', 'Bearer ' + access_token);

See the Javascript Web App Sample for more information.

Update:

const tokenRequest = {
      scopes: [ "api://499b84ac-1321-427f-aa17-267ca6975798/.default" ]
 };

this.authService.instance.acquireTokenSilent(tokenRequest).then(tokenResponse => {
              
              var vstsApi = "https://dev.azure.com/myorg/myproje/_apis/wit/workitems/5?api-version=6.1-preview.3"
              var xhr = new XMLHttpRequest();
                
              xhr.open('GET', vstsApi, true);
              var res = xhr.setRequestHeader('Authorization', 'Bearer ' + tokenResponse.accessToken);
 })

edited Mar 29 '21 at 09:53

answered Mar 23 '21 at 07:41

Levi Lu-MSFT

27,483
2
31
43

I get the following error even though i have "user_impersonation" permission "TF400813: Resource not available for anonymous access. Client authentication required." – Kedar Udupa Mar 24 '21 at 11:14
@KedarUdupa Could you share the relevant part of your code to get the access token? The access token should be generated for `azure devops` resource(ie. `499b84ac-1321-427f-aa17-267ca6975798 or https://app.vssps.visualstudio.com`). – Levi Lu-MSFT Mar 25 '21 at 09:45
I have updated my question. Also is it necessary to authenticate to both the resources separately.!? I'm just learning Azure and would really appreciate your help – Kedar Udupa Mar 25 '21 at 14:04
@KedarUdupa You can check the document [here](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/resources-and-scopes.md) to acquire an access token for Azure devops api. See above update: – Levi Lu-MSFT Mar 29 '21 at 09:54

How to consume Azure devops REST API in angular

1 Answers1