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

问题描述

我将使用

那么在许可范围内使用的 ClientId 在 Azure 门户 --> Azure Active Directory --> 应用注册然后是应用程序 ID.

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

解决方案

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

所以在下面的图片中，我的 Angular Web 客户端称为MyCompany-Web-dev"，而我的 API 称为MyCompany-API-Dev".

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

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

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

3. 单击已发布的范围".

4. Full Scope Value"下的值也是 MSAL 的consentScopes"的值.

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

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

希望对您有所帮助.

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 ?

解决方案

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.

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