angular - 如何在 Angular 中配置 MSAL？

Question

我将使用 Azure AD library 向 Azure 进行身份验证对于 Angular 。

这是我的 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 时，我收到此错误

AADSTS50000: There was an error issuing a token.

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

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

然后，同意范围中使用的 ClientId 位于 Azure 门户 --> Azure Active Directory --> 应用注册中，然后是应用程序 ID。

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

Answer 1

MSAL“consentScopes”应设置为前端客户端所针对的后端 API 的所需范围；需要访问 token 的 API。

因此，在下面的图片中，我的 Angular Web 客户端称为“MyCompany-Web-dev”，我的 API 称为“MyCompany-API-Dev”。

要查找应输入的确切字符串:

1. 转到已注册应用程序的 Azure B2C 列表。通常至少有两个，前端 Angular Web 客户端和后端 API。

2. 点击您的 API 的应用程序名称(而不是您的网络客户端)。

3. 点击“已发布范围”。

4. “完整范围值”下的值也是 MSAL 的“consentScopes”的值。

5. 这就是配置 MSALModule.forRoot({...}) 的方法。
   同样，如果您使用 MSALService.loginPopup 方法，则其将如下所示:

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

希望有帮助。