如何从 angular 调用 B2C Graph API？

Question

我正在尝试了解如何调用图表 API 以使用 msal-angular ("@azure/msal-angular": "^0.1.4 ”）。我没能为此找到工作示例/教程。

我已经设置了 Azure AD B2C。创建了一个以用户名作为登录密钥的本地帐户提供商。我创建了 signup/signin 流程并注册了一个 Web 应用程序“b2c-app01”。对于 API 权限，我授予应用程序“user.read”权限。

我已登录并使用以下 msal 配置

    MsalModule.forRoot({
      clientID: "00000000-0000-0000-0000-000000000000", // b2c-app01 in app registration
      authority: "https://b2c-app01.b2clogin.com/tfp/b2c-app01.onmicrosoft.com/B2C_1_SignInOrSignUp",
      validateAuthority: false,

接下来我将尝试访问此示例 API 之后的图表 https://docs.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-javascript-spa。

但是，我无法通过 acquireTokenSilent 调用。我通过 ['user.read'] 作为范围，并得到以下错误

        this._user = this.authService.getUser();
        let tokenResponse = await this.authService.acquireTokenSilent(
            ['user.read'],
        );
        console.log(tokenResponse);

The scope 'user.read' provided in the request is not supported.

我尝试使用用户返回的身份提供程序 url 作为权限属性，但随后出现 CORS 错误。我什至不知道这是否有效，所以我没有深入研究 CORS 错误

        this._user = this.authService.getUser();
        let tokenResponse = await this.authService.acquireTokenSilent(
            ['user.read'],
            this._user.identityProvider,
            this._user,
        );
        console.log(tokenResponse);

blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.。

关于我做错了什么或遗漏了什么有什么建议吗？

编辑：

下面是api权限

Answer 1

AAD B2C 应用程序注册无法获得 Graph API 的权限。根据您所说的，您已经在 B2C 目录中创建了一个 AAD 应用程序注册。

这是不可能的 “我创建了 signup/signin 流程并注册了一个网络应用程序‘b2c-app01’。对于 API 权限，我向应用授予了“user.read”权限。”

您提到了 AAD B2C，但您的 JS 示例适用于 AAD。对于 AAD B2C 用例，return 用户令牌中的所有必需数据。对于任何其他图 api 调用，例如查询用户组，请调用您自己的 API 来验证时间图 api 使用客户端凭据针对 B2C 租户中的 AAD App Reg。

Answer 2

您是否尝试过在 User.Read 范围前添加图形 URL，即 https://graph.microsoft.com/User.Read？只是在黑暗中刺伤...

使用B2C应用调用Microsoft Graph的场景是这篇文章描述的：

https://docs.microsoft.com/en-us/azure/active-directory-b2c/microsoft-graph-get-started?tabs=applications

那篇文章实现的OAUTH场景是client_credentials flow，也叫服务账号，或者守护进程。我认为他们涵盖的主要用例是使用 Azure DevOps 维护身份策略，并验证 DevOps 部署管道到 Graph 以自动上传策略。

理想情况下，可以支持其他用户交互的 oauth 流程，例如on-behalf-of, or implicit grant 流量。

如何从 angular 调用 B2C Graph API？

How can I call B2C Graph API from angular?

angular

azure-ad-b2c

msal.js