Configure Azure Resource Manager API for an Angular Web App

Question

I have been trying to call the azure resource manager api to get a list of the resources in a subscription but as soon as I call the method , it gives me an error and the user isn't able to authenticate and gives out a scope not found error " The application 'Partner Center Web App 3' asked for scope 'user_impersonation' that doesn't exist on the resource"

and " invalid_client: AADSTS650053: The application 'Partner Center Web App 3' asked for scope 'user_impersonation' that doesn't exist on the resource"

I have shared the method I am trying to call ()

fetchAzureResources() {
  this.msalservice.acquireTokenSilent({ scopes: ['https://management.azure.com/user_impersonation'] }).subscribe((response) => {
    const accessToken = response.accessToken;

    this.httpClient.get(`https://management.azure.com/subscriptions?api-version=2014-04-01`, {
      headers: {
        Authorization: `Bearer ${accessToken}`
      }
    }).subscribe((data: any) => {
      this.resources = data.value;
      // this.dataSource.data = this.resources; // Update table data
    });
  });
}
}

Though the tokens are being generated

token

I tried adding the scope "https://management.azure.com/user_impersonation" it does generate the token but I am not able to call the "https://management.azure.com/subscriptions/xxxxxxxxxxxxxxxxxxxxxxxx/resources?api-version=2021-04-01"

Answer 1

The application 'Partner Center Web App 3' asked for scope 'user_impersonation' that doesn't exist on the resource" and " invalid_client: AADSTS650053: The application 'Partner Center Web App 3' asked for scope 'user_impersonation' that doesn't exist on the resource

The error you face is authentication and authorization issues while accessing Azure Resource Manager API from your Angular web app. The error message suggests that the scope 'user_impersonation' is not recognized by the Azure resource you are trying to access.

You should assign the reader role to the app as below,

Add the below permissions to the app.

Code :

fetchAzureResources() {
  this.msalservice.acquireTokenSilent({ scopes: ['https://management.azure.com/user_impersonation'] }).subscribe((response) => {
    const accessToken = response.accessToken;
    this.httpClient.get(`https://management.azure.com/subscriptions?api-version=2014-04-01`, {
      headers: {
        Authorization: `Bearer ${accessToken}`
      }
    }).subscribe((data: any) => {
      this.resources = data.value;
      // this.dataSource.data = this.resources;
    });
  });
}
}