无法为 MSAL entra Angular 集成添加自定义范围，添加时仍使用图形 API

Question

我正在尝试将 MSAL 与 Angular 集成。我可以借助 Graph API 生成访问令牌。但是带有随机数的令牌声称无法在 Spring Boot API 中解析。因此，我决定通过在 Azure 门户中创建 api 来使用自定义范围，但 MSAL 仍然使用图形 API。添加了 MSAL 和 Azure 的建议实现。

任何人都可以建议如何在没有图形 API 或其他方法的情况下应用自定义范围吗？

Answer 1

要调用自定义 API，您需要在 Microsoft Entra ID 应用程序中公开 API：

授予 管理员同意 API 权限：

您需要在代码中传递此scope，如下所示：

export const environment = {
  production: false,
  scopeUri: ["api://API_CLIENTID/ScopeName"],
  tenantId: "TenantID",
  uiClienId: "ClientID",
  redirectUrl: "RedirectURL",
};

如果 MSAL 仍在使用 Graph API，则排除 Microsoft Graph 的范围并将范围传递为

api://xxx/scopeName

并修改代码。

• 确保访问令牌 aud 是

  api://xxx

  或

  ClientID

或者参考下面的代码片段：

const config: Configuration = {
    auth: {
      clientId: <client id - your app's client id>,
      authority: `https://login.microsoftonline.com/<tenantid>`,
      redirectUri: RedirectURL,
    },
  };

  const params: AuthenticationParameters = {
    authority: `https://login.microsoftonline.com/${Tenantid}`,
    scopes: [`${AppIDUri}/ScopeName`],  <-- the API that you're trying to call
  };

  const myMSAL = new UserAgentApplication(config);

否则，您需要更新

protectedResourceMap

文件中的

app.module.ts

配置选项以包含 Spring Boot API 的端点：

{ protectedResourceMap: [ ['TheAPIEndpointHere', ['api://xxx/ScopeName']], ], })

参考资料：

通过 MSAL 进行 Azure AD 身份验证，将 Angular 应用连接到 Asp.net Core Web API (prishusoft.com)

Angular 应用程序使用 MSAL Angular 通过 Azure AD for Customer 对用户进行身份验证并调用受保护的 Web API - 代码示例 |微软