Microsoft-authentication-library-for-js: @azure/msal-angular getProfile() throws error in angular9-sample-app

[CAlex-Wilson]

Library

• [x] @azure/[email protected]

Description

The current angular9-sample-app throws this error when attempting to view profile information received from the login flow:

core.js:3828 ERROR Error: Uncaught (in promise): InteractionRequiredAuthError: AADSTS65001: The user or administrator has not consented to use the application with ID '6226576d-37e9-49eb-b201-ec1eeb0029b6' named 'msal-angular2'. Send an interactive authorization request for this user and resource.
Trace ID: 57f15927-decc-4ecb-a520-2302241b5900
Correlation ID: 167a98a2-9b60-44b1-801c-1ef993e701c7
Timestamp: 2020-03-20 16:19:52Z
InteractionRequiredAuthError: AADSTS65001: The user or administrator has not consented to use the application with ID '6226576d-37e9-49eb-b201-ec1eeb0029b6' named 'msal-angular2'. Send an interactive authorization request for this user and resource.
Trace ID: 57f15927-decc-4ecb-a520-2302241b5900
Correlation ID: 167a98a2-9b60-44b1-801c-1ef993e701c7
Timestamp: 2020-03-20 16:19:52Z
at InteractionRequiredAuthError.AuthError [as constructor] (AuthError.js:22)
at InteractionRequiredAuthError.ServerError [as constructor] (ServerError.js:22)
at new InteractionRequiredAuthError (InteractionRequiredAuthError.js:24)
at MsalService.push../node_modules/msal/lib-es6/UserAgentApplication.js.UserAgentApplication.saveTokenFromHash (UserAgentApplication.js:1259)
at MsalService.push../node_modules/msal/lib-es6/UserAgentApplication.js.UserAgentApplication.processCallBack (UserAgentApplication.js:814)
at MsalService.push../node_modules/msal/lib-es6/UserAgentApplication.js.UserAgentApplication.handleAuthenticationResponse (UserAgentApplication.js:904)
at MsalService. (UserAgentApplication.js:644)
at step (tslib.es6.js:99)
at Object.next (tslib.es6.js:80)
at fulfilled (tslib.es6.js:70)
at resolvePromise (zone.js:836)
at resolvePromise (zone.js:795)
at zone.js:897
at ZoneDelegate.invokeTask (zone.js:431)
at Object.onInvokeTask (core.js:27323)
at ZoneDelegate.invokeTask (zone.js:430)
at Zone.runTask (zone.js:198)
at drainMicroTaskQueue (zone.js:611)
at ZoneTask.invokeTask (zone.js:517)
at ZoneTask.invoke (zone.js:502)

This error is thrown at this method here:

const GRAPH_ENDPOINT = "https://graph.microsoft.com/v1.0/me";
...
getProfile() {
    this.http
      .get(GRAPH_ENDPOINT)
      .toPromise()
      .then(profile => {
        console.log(profile);
        this.profile = profile;
      });
}

Is there some additional configuration that has to happen in order to access the signed in profile information? Thanks!

[CAlex-Wilson]

What is the difference between the profile at the GRAPH_ENDPOINT, and getting account information via authService: MsalService?

For example:

console.log(this.authService.getAccount().name);
console.log(this.authService.getAccount().userName);
console.log(this.authService.getAccount().accountIdentifier);

[derisen]

What is the difference between the profile at the GRAPH_ENDPOINT, and getting account information via authService: MsalService?

For example:

console.log(this.authService.getAccount().name);
console.log(this.authService.getAccount().userName);
console.log(this.authService.getAccount().accountIdentifier);

The difference is where the information comes from, and what consent do you need to get that. User info from getAccount() comes from AAD itself, which you consent with the profile scope (@jasonnutter to confirm). This is due to AAD - OpenID compliance, and acts as the UserInfo endpoint. On the other hand, profile info from Graph API endpoint uses user.read scope. For that, you will need to present an access token with the said scope.

I'm looking into replicating your issue.

[derisen]

@CAlex-Wilson I had the same issue as well. It seems the consent scopes are not passed during the login request -likely an issue with Angular factory configuration. Quick dirty solution for now could be to ask for the token with the scope explicitly, like

ngOnInit() {
    this.getProfile();
    this.authService.acquireTokenPopup({scopes: ["user.read"]}); // here
  }

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

You can read a bit about AAD consents while this being solved : )

[CAlex-Wilson]

@derisen Okay that makes sense, thank you for the explanation! I added the acquireTokenPopup({scopes: ["user.read"]}) fix above and now it logs the error properly as shown below. I gave the sample app the permissions it requested and it still seems to fail. Is this expected behavior then?

MSAL Logging:  Sat, 21 Mar 2020 00:52:09 GMT:d52be319-fad4-4ac7-8a58-e7a5b9b8747a-1.2.2-Error 
Error when acquiring token for scopes: user.read InteractionRequiredAuthError:
The request was denied because one or more scopes requested are unauthorized or expired. 
The user must first sign in and grant the client application access to the requested scope.

InteractionRequiredAuthError: The request was denied because one or more scopes requested are unauthorized or expired. The user must first sign in and grant the client application access to the requested scope.
    at InteractionRequiredAuthError.AuthError [as constructor] (http://localhost:4200/vendor.js:77015:28)
    at InteractionRequiredAuthError.ServerError [as constructor] (http://localhost:4200/vendor.js:77505:28)
    at new InteractionRequiredAuthError (http://localhost:4200/vendor.js:77442:28)
    at MsalService.push../node_modules/msal/lib-es6/UserAgentApplication.js.UserAgentApplication.saveTokenFromHash (http://localhost:4200/vendor.js:75484:25)
    at MsalService.push../node_modules/msal/lib-es6/UserAgentApplication.js.UserAgentApplication.processCallBack (http://localhost:4200/vendor.js:75039:29)
    at MsalService.push../node_modules/msal/lib-es6/UserAgentApplication.js.UserAgentApplication.handleAuthenticationResponse (http://localhost:4200/vendor.js:75129:14)
    at MsalService.<anonymous> (http://localhost:4200/vendor.js:74869:34)
    at step (http://localhost:4200/vendor.js:98568:23)
    at Object.next (http://localhost:4200/vendor.js:98549:53)
    at fulfilled (http://localhost:4200/vendor.js:98539:58)

MSAL Logging:  Sat, 21 Mar 2020 00:52:09 GMT:d52be319-fad4-4ac7-8a58-e7a5b9b8747a-1.2.2-Error Error when acquiring token for scopes : user.read ClientAuthError: User cancelled the flow.

core.js:3828 ERROR Error: Uncaught (in promise): ClientAuthError: User cancelled the flow.
ClientAuthError: User cancelled the flow.
    at ClientAuthError.AuthError [as constructor] (AuthError.js:22)
    at new ClientAuthError (ClientAuthError.js:105)
    at Function.push../node_modules/msal/lib-es6/error/ClientAuthError.js.ClientAuthError.createUserCancelledError (ClientAuthError.js:152)
    at WindowUtils.js:35
    at ZoneDelegate.invokeTask (zone.js:431)
    at Object.onInvokeTask (core.js:27323)
    at ZoneDelegate.invokeTask (zone.js:430)
    at Zone.runTask (zone.js:198)
    at ZoneTask.invokeTask (zone.js:513)
    at ZoneTask.invoke (zone.js:502)
    at resolvePromise (zone.js:836)
    at zone.js:901
    at ZoneDelegate.invokeTask (zone.js:431)
    at Object.onInvokeTask (core.js:27323)
    at ZoneDelegate.invokeTask (zone.js:430)
    at Zone.runTask (zone.js:198)
    at drainMicroTaskQueue (zone.js:611)
    at ZoneTask.invokeTask (zone.js:517)
    at ZoneTask.invoke (zone.js:502)
    at timer (zone.js:3041)

[derisen]

sorry, just to confirm, did you restart the application and clean the browser cache?

[CAlex-Wilson]

@derisen

sorry, just to confirm, did you restart the application and clean the browser cache?

That was the issue! Thank you for your help! I can confirm that your temporary fix works as expected.

[derisen]

@CAlex-Wilson cheers! just reopening to track the sample fix

[jasonnutter]

@CAlex-Wilson Can you try replacing the clientId in teh sample with a clientId for an application that was created in your tenant?

[CAlex-Wilson]

@CAlex-Wilson Can you try replacing the clientId in teh sample with a clientId for an application that was created in your tenant?

I replaced with clientID with mine and it works as expected without the fix provided above.

[jasonnutter]

@CAlex-Wilson Great...the clientId that is provided by default is one we use for testing, and may not work outside the MSFT tenant (it should work with MSA accounts). I'll make sure that this is noted in the samples.

[github-actions[bot]]

This issue has not seen activity in 14 days. It may be closed if it remains stale.

[jimbarrett33]

Hi,

I see this was closed but I'm wondering if there was an actual fix to the code or was the profile ngOnInit workaround above the "solution".

The docs seem to indicate that you can prompt the user for MS Graph "User.Read" consent during login but this still does not work for me (following the docs config exactly as-is). The user is only prompted to consent to "View your basic profile" and "Maintain access to data..."

So the question is, can you prompt for MS Graph API permissions at the same time as login? This older post seems to indicate that you cannot but that is from about 1.5 years ago.

My versions:

"@azure/msal-angular": "^1.0.0",
"msal": "^1.3.2",

Thanks in advance.

[jasonnutter]

@jimbarrett33 Please open a new issue, thanks!