如何在Angular中配置MSAL? [英] How do I configure MSAL in Angular?

问题描述

我将使用适用于Angular的Azure AD库.

这是我的msalModule

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
})

当我弹出登录窗口时，输入我的用户ID + PW，我会收到此错误

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.

我想知道客户ID和同意范围内使用的ID之间有什么区别.

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

在我的示例中，我在Azure门户-> Azure Active Directory->属性中找到了ClientTenantID

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

然后，在同意范围内使用的ClientId在Azure门户-> Azure Active Directory->应用程序注册，然后在应用程序ID中.

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

它们是在MSAL中使用的正确ID吗?

Are they the right IDs to use in MSAL ?

推荐答案

应将MSAL'consentScopes'设置为前端客户端所针对的后端API的所需范围；需要访问令牌的API.

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.

因此在下面的图片中，我的有角度的Web客户端称为"MyCompany-Web-dev"，而我的API则称为"MyCompany-API-Dev".

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. 转到已注册应用程序的Azure B2C列表.通常，至少有两个，一个前端有角度的Web客户端和一个后端API.

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.

单击您的API的应用程序名称(而不是Web客户端).

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

单击已发布范围".

Click on "Published Scopes".

完整范围值"下的值也是MSAL的"consentScopes"值.

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

这就是配置MSALModule.forRoot({...})的方法.
同样，如果您使用的是MSALService.loginPopup方法，则它看起来像:

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"])

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

希望有帮助.

这篇关于如何在Angular中配置MSAL?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！