Access token doesn't contain all the requested scopes

问题

I have an angular application and an DotNet core web api application. The web api exposes 2 permissions. The angular has susbscribed to those permissions (see screenshot).

In the code, I tried this

export const loginRequest: { scopes: string[] } = {
  //scopes: ['user.read', 'openid', 'profile'], //--> I commented out this line. 
  scopes: []
};

export const tokenRequest: { scopes: string[] } = {
  scopes: ['api://da8b9450-d9b7-4b7f-9667-fdae9a7c8359/API.Access',
           'api://da8b9450-d9b7-4b7f-9667-fdae9a7c8359/API.Write']
};

consentScopes: [
  ...loginRequest.scopes,
  ...tokenRequest.scopes,
],

The access token contain the scopes I didn't ask for, but it is not returning what I asked.

How do I get the 2 scopes I've requested?

Thanks for helping

EDIT 1

Here's the configuration

auth: {
  clientId: '78803184-e866-4966-b372-d98b4feae898',
  authority: "https://login.microsoftonline.com/{tenantId}/",
  validateAuthority: true,
  redirectUri: "http://localhost:4200/",
  postLogoutRedirectUri: "http://localhost:4200/",
  navigateToLoginRequestUrl: true,
}

EDIT 2

This is are the requested scopes now. I've removed all the related graph, such as user.read, openid, and profile.

{
  popUp: !isIE,
  consentScopes: [
    "api://da8b9450-d9b7-4b7f-9667-fdae9a7c8359/API.Access",
    "api://da8b9450-d9b7-4b7f-9667-fdae9a7c8359/API.Write"
  ],
  unprotectedResources: ["https://localhost:5001"],
  protectedResourceMap,
  extraQueryParameters: {}
}

I'm still receive the same scopes, i.e. even after the client to the list of clients for the API.

However, I looked at the request being sent to AZURE AD. This is how it looks like. According to this request, I'm still requesting user.read, openid, and profile although I removed them from the list of requested scopes.

Request URL: https://login.microsoftonline.com/313200b5-a917-47d1-2233-149b07d5d7b5/oauth2/v2.0/authorize?
response_type=token&scope=user.read openid profile&client_id=78803184-e866-54e3-b200-d98b4feae898
&redirect_uri=http://localhost:4200/
&state=eyJpZCI6IjMwZDJkOGNkLTM2NWUtNGMwOS1iYWY1LTcyZWYyMTU0YWE5ZSIs
InRzIjoxNjExNTUwMDUxLCJtZXRob2QiOiJzaWxlbnRJbnRlcmFjdGlvbiJ9
&nonce=6f25b4e0-71f7-4cde-abf4-cb5545d2507e
&client_info=1&x-client-SKU=MSAL.JS&x-client-Ver=1.4.4
&login_hint=admin@myemail.com
&client-request-id=a68ef0b3-111b-4b1c-a3e7-cdcb075516ca
&prompt=none&response_mode=fragment

EDIT 3

I found this line of code

const GRAPH_ENDPOINT = 'https://graph.microsoft.com/v1.0/me';

getProfile() {
   this.http.get(GRAPH_ENDPOINT)
      .toPromise().then(profile => {
          this.profile = profile;
      });
 }

回答1:

Move comment to answer:

Like I said in the comments， what you get is the ms graph api token, which only contains the scope of ms graph api. A token cannot contain the scope of two apis. If you need to get the scope of a custom api, you should get another token.

The access token is issued according to the api audience you want to access, and it is unique! A token can only have one audience, and you cannot use multiple scopes to request access tokens.

One sentence summary: You cannot make an access token contain API.Access API.Write User.Read scp claims at the same time, because these are the scope of two completely different APIs.

来源：https://stackoverflow.com/questions/65839743/access-token-doesnt-contain-all-the-requested-scopes