power bi access token api working fine in postman but not working in angular app

问题

I'm calling power bi API in postman which is working good and as an accepted result I'm getting. while that app I'm calling in the angular app it's not working. I'm getting response null.

I have attached my code below, Please help me out I have been trying to solve this issue last few days.

API: https://login.microsoftonline.com/common/oauth2/token

Below is my angular code

getAccessToken(param): Observable<any> {

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type': 'application/x-www-form-urlencoded',
  })
};

const body = new HttpParams()
  .set('resource', 'https://analysis.windows.net/powerbi/api')
  .set('client_id', 'xxxxxxxxx')
  .set('client_secret', 'xxxxxxxxx')
  .set('grant_type', 'password')
  .set('scope', 'openid')
  .set('username', 'xxxxxxxxx')
  .set('password', 'xxxxxxxxx');

return this.http.post("https://login.microsoftonline.com/common/oauth2/token", body.toString(), httpOptions)
  .pipe(
    map(response => response)
  );}

In the below reference image same API which is working good but not working in angular.

回答1:

You are posting body as http parameters. Change to:

const body = {
    resource: 'https://analysis.windows.net/powerbi/api',
    client_id: 'xxxxxxxxx',
    client_secret: 'xxxxxxxxx',
    grant_type: 'password',
    scope: 'openid',
    username: 'xxxxxxxxx',
    password: 'xxxxxxxxx'
}

return this.http.post("https://login.microsoftonline.com/common/oauth2/token", body, httpOptions)
  .pipe(
    map(response => response)
  );}

回答2:

You can set the header and body like this:

const httpOptions = {
    headers: new HttpHeaders().set('Content-Type', 'application/x-www-form- 
        urlencoded')
};

const params = {
    resource: 'https://analysis.windows.net/powerbi/api',
    client_id: 'xxxxxxxxx',
    client_secret: 'xxxxxxxxx',
    grant_type: 'password',
    scope: 'openid',
    username: 'xxxxxxxxx',
    password: 'xxxxxxxxx'
}

const body = `resource=${params.resource}&client_id=${params.client_id}&client_secret=${params.client_secret}&grant_type=${params.grant_type}& scope =${params.scope}&username =${params.username}&password =${params.password}`;

return this.http.post("https://login.microsoftonline.com/common/oauth2/token", 
    body, httpOptions)
.pipe(
    map(response => response)
);

回答3:

I got the issue and solution.

Issue:
why it's broken my API response 'null'. The issue is that due to CORS, I used the CORS extension for crome it was deprecated. so it was given the result 'null'

Solution:
I used the latest one CORS extension for chrome and that's resolved the issue temporarily. this is not a proper solution because we don't have the right to resolved cors issue in the backend. if we need to solve it form our hand then we have to create API in .net for getting AccessToken and then that API we can consume in Angular.

来源：https://stackoverflow.com/questions/58498887/power-bi-access-token-api-working-fine-in-postman-but-not-working-in-angular-app

标签

angular

http-post

powerbi

postman

powerbi-embedded