How do I configure MSAL in Angular?

Question

I would authenticate to Azure using Azure AD library for Angular.

Here's my msalModule

MsalModule.forRoot({
  clientID: "ClientTenantID",
  authority: "https://login.microsoftonline.com/common",
  redirectUri: "http://localhost:4200/",
  consentScopes: [ "user.read", "ClientID/access_as_user"],
  popUp: true,
  unprotectedResources: ["https://www.microsoft.com/en-us/"],
  protectedResourceMap: protectedResourceMap,
  logger: loggerCallback,
  correlationId: '1234',
  level: LogLevel.Info,
  piiLoggingEnabled: true
})

When I get the sign In pop up then enter my user ID + PW I get this error

AADSTS50000: There was an error issuing a token.

I would like to know what is the difference between the client ID and the ID used on consent scope ?.

In my exemple I found the ClientTenantID in Azure portal --> Azure Active Directory --> propreties

Then the ClientId used in the consent scope is in Azure portal --> Azure Active Directory --> app registration then Application ID.

Are they the right IDs to use in MSAL ?

Solution 1

The MSAL'consentScopes' should be set to the desired scope for the back end API that your front-end client is targeting; the API for which it needs an access token.

So in the pics below my angular web client is called 'MyCompany-Web-dev' and my API is called 'MyCompany-API-Dev'.

To find the exact string that should be entered:

1. Go to Azure B2C list of registered applications. Normally there are at least two, a front-end angular web client and a back-end API.

2. Click on your API's application name (not your web client).

3. Click on "Published Scopes".

4. The value under "Full Scope Value" is also the value for MSAL's "consentScopes".

5. So that's how to configure the MSALModule.forRoot({...}).
   Similarly, if you're using the the MSALService.loginPopup method it would look like:

   MyMsalService.loginPopup(["openid", "offline_access", "https://mycompany.onmicrosoft.com/api-dev/user_impersonation"])

Hope that helps.

Solution 2

Are they the right IDs to use in MSAL ?

In short, No, the clientID should be the Application ID of your AD APP, which you used in consent scope.

In the consentScopes, it should be the desired scopes that need to be consented by user. MSAL enables Angular(4.3 to 5) applications to authenticate enterprise users get access to Microsoft Cloud OR Microsoft Graph. For example, in the link you mentioned, consentScopes: ["user.read", "api://a88bb933-319c-41b5-9f04-eff36d985612/access_as_user"], it means the user authorize the ad app to access the api, also, it can be https://graph.microsoft.com, etc.

In your article, it has been explained clearly,

consentScopes : Allows the client to express the desired scopes that should be consented. Scopes can be from multiple resources/endpoints. Passing scope here will only consent it and no access token will be acquired till the time client actually calls the API. This is optional if you are using MSAL for only login(Authentication).

Comments

[infodev]

I have changed my consentScopes to consentScopes: [ "User.Read", "https://graph.microsoft.com/"] as you mentioned but I'm not sure that it's the right way. Here's the error message that I get now. The provided value for the input parameter 'scope' is not valid. The scope User.Read https://graph.microsoft.com/ openid profile is not valid. The scope format is invalid. Scope must be in a valid URI form <https://example/scope> or a valid Guid <guid/scope>.

[infodev]

Now I get this message : > The application named https://graph.microsoft.com/v1.0 was not found in the tenant named Tenant ID (not Client ID). This can happen if the application has not been installed by the administrator of the tenant or consented to by any user in the tenant. You might have sent your authentication request to the wrong tenant.

[infodev]

When I delete the consent scopes line I get authentified but I don't obtain an access_Id , il get instead a tokenID that does not work with Graph API, Here's more informations : stackoverflow.com/questions/52730511/…