How do I configure MSAL in Angular?

问题

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 ?

回答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:

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.
Click on your API's application name (not your web client).
Click on "Published Scopes".
The value under "Full Scope Value" is also the value for MSAL's "consentScopes".
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.

回答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).

来源：https://stackoverflow.com/questions/52769462/how-do-i-configure-msal-in-angular

标签

angular

azure

azure-active-directory

msal