CODEWITHSUNDEEP
angularazure-devopsazure-active-directorymsal-angular
Kedar Udupa
Kedar Udupa

Reputation: 554

How to consume Azure devops REST API in angular

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!

Upvotes: 2

Views: 2500

Answers (1)

Levi Lu-MSFT
Levi Lu-MSFT

Reputation: 30343

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);
 })

Upvotes: 1

Related Questions