Msal Angular cannot pass multiple consent scopes from different apis

[chigivigi]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[x ] Documentation issue or request
[ ] Other... Please describe:

Browser:

• [x ] Chrome version XX
• Firefox version XX
• IE version XX
• Edge version XX
• Safari version XX

Library version

Library version: 0.1.2

## Current behavior

I am updating my web application to work with the new msal library. 
The application is a frontend application written in angular 5.
It sends requests to Microsoft Graph, Dynamics CRM and my backend net core web api application. 
The frontend app and backend app share the same azure ad registration app.
It is a version 1.0 app. I am currently using only the msal config, described in documentation, for login and getting access tokens and not the methods listed calling login or getting access token. 
I can't pass in consent scope scopes for Microsoft graph and dynamics crm at the same time or during the login I will the message that my scopes are incorrect. 
If I use only the scope for Microsoft Graph or Dynamics CRM the login is successful and there is no error about incorrect or invalid scopes. 
The access token for Dynamics CRM is not generated but for Microsoft Graph is generated. 
The other access token contains in his key the client id for my application so I suspect it is used for my backend api calls but its version is 2.0 and I can't use it to make calls. 
For my frontend request I use the @ngx-resource/core library and during my backend web api request I get the admin consent requeired error in the ResourceHandlerHttpClient.prototype.handleResponse method and even after I sent the admin consent it is still called. Also the request passed in the method has an empty header property so I get another error when the method tries to get the header key from the property.

## Expected behavior

To be able to pass multiple scopes in consent scopes for different api and be able to get the access token, version 1.0, for each of them to successfully make requests.  

## Minimal reproduction of the problem with instructions

Create a new app registration for azure ad version 1,0 app, web api/app type.
Create a new asp net core 2.0 web api.
Create a basic angular 5 application.
I use hash in routes in routing my pages.
RouterModule.forRoot(appRoutes, { useHash: true })
install @azure/msal-angular, @ngx-resource/core and @ngx-resource/handler-ngx-http.
Set up msal config, my msal config looks like this:
 MsalModule.forRoot({
            clientID: environment.AppId,
            authority: 'https://login.microsoftonline.com/' + environment.tenant,
            redirectUri: environment.frontendUrl,
            cacheLocation : 'localStorage',
            navigateToLoginRequestUrl : false,
            unprotectedResources: ['https://www.microsoft.com/en-us/'],
            popUp: false,
            protectedResourceMap: protectedResourceMap,
            consentScopes: [environment.endpoints.crmUri + '/.default', environment.endpoints.graphApiUri +  '/.default' ],
            level: LogLevel.Verbose,
            piiLoggingEnabled: true,
          })

export const protectedResourceMap: [string, string[]][] = [ 
    [environment.ServerBackEndUrl, [environment.endpoints.backendAudience + '/acess_as_user']],
    [environment.endpoints.crmUri, [environment.endpoints.crmUri + '/api/data/v8.2/contacts']],
     ['https://graph.microsoft.com/v1.0/me/Photos/48X48/$value', ['user.read']]
];
Create a basic page and make a request using the ngx-resource/core.
Example service:
@Injectable()
@ResourceParams({
    url:  environment.ServerBackEndUrl + '/api/version',
})
export class ExampleService extends Resource { 
    @ResourceAction({
        method: ResourceRequestMethod.Get
    })
    getVersion: IResourceMethod;

    constructor(restHandler: ResourceHandler) {
        super(restHandler);
    }
}

[hkusulja]

So is it , or is it not supported:

To be able to pass multiple scopes in consent scopes (for different endpoint api) and be able to get the access token, version 1.0, for each of them to successfully make requests.

[navyasric]

@chigivigi @hkusulja MSAL library should be used with the Azure AD v2.0 endpoint which supports scopes. Please see this explained here.

As for the consentScopes you can pass scopes for multiple APIs. However, the purpose of consentScopes is to request the user to consent to these scopes during login. Login in the MSAL library only returns an id token. To get access tokens you can use the acquireToken methods. Since you are using the Angular wrapper, the library will intercept your requests to the API and get this access token for you. This is explained here.
Please note that tokens are returned with the consented scope for one API at a time.

[chigivigi]

I used acquireTokenSilent to get CRM access token but when I make a request with it I got the response Error 401.
I changed my consent scopes by only passing the resource app id for Dynamics CRM permission from my portal azure registered app, Guid + user_impersonation, and removed CRM from protected resource map. Also I passed to acquireTokenSilent guid + user_impersonation, same as in consent scope, the same authority that i wrote in my question and passed the user using the method getUser from msal. Can you tell me what am I missing ?

[chriseenberg]

@chigivigi Did you remember to add the allowed token audiences for the client app registration?

[chigivigi]

I looked at at the allowed token audiences for the client app registration but I am testing my application locally. If it helps I gave all the necessary permissions in my app registration.

[navyasric]

@chigivigi If the API is returning 401, is there a more detailed error message? Please let us know if this is resolved for you.

[chigivigi]

There is no error message. I don't get any response back.

[bguidinger]

@chigivigi can you make sure your scope has a double forward slash in it? I'm not sure if your environment.endpoints.crmUri has a trailing slash or not. For example, your scope should be https://<organization>.crm.dynamics.com//.default or https://<organization>.crm.dynamics.com//user_impersonation.

[sameerag]

@chigivigi have you tried @bguidinger 's suggestion? Also we support 'scopes' per resource at a time for accessTokens but can pre consent at the time of signing in (idToken) only.

We have recently gone through a redesign of the library's API surface. Please download our latest preview package or pull the dev branch and try updating your code and see if the issue still persists.

Please re-open this issue if it persists. We are now throwing error stack traces so we can understand better why your code is failing.

If you would like guidance on how to use the new version of the library, please review our wiki page here.