如何通过Azure Active Directory将Angular Web应用程序与Azure功能应用程序链接?

我目前正在一个项目中工作,在这个项目中,我必须通过Angular7客户机应用程序从一个Azure函数应用程序端点提取数据。此终结点受Azure Active Directory保护,并且已通过应用程序注册(预览)UI进行设置。

这很好地工作,因为我现在似乎无法访问这些端点。我尝试过通过邮递员和通过函数app部分下的get url生成的代码来传递令牌。它完全锁定了。我每次都是未经授权的。

我遵循的步骤

我已经按照描述设置了我的角度客户 here 在MSAL库的文档中。我已经用过了 v2 endpoint 设置我的客户端应用程序连接。然后,我通过应用程序注册(预览)连接了我的函数应用程序端点。我已经设置了权限,并使用其客户端ID对我的webapp进行了预授权-添加了重定向URL到 http://localhost:4200 -将MSAL模块添加到Angular,如下所示:

  MsalModule.forRoot({
      clientID: 'my-client-id',
      redirectUri: 'http://localhost:4200',
      consentScopes: [
        'user.read',
        'https://myapp.azurewebsites.net/user_impersonation'
      ]
    }),

我尝试过通过Azure用户界面进行各种可能的安全设置组合,虽然我对Azure还很陌生(已经使用了一周),但我几乎可以说我已经无处不在,不再靠近了。

每次查询端点时,我都会得到一个 401 Unauthorized 带着信息:

您没有查看此目录或页面的权限。

我应该补充一下,我在本地运行我的Angular网站。

我不会被重定向到授权页面,即使我已经将其设置为在Azure UI中的情况-在Azure Active Directory保护下。

我试过几个导游,包括 this 从步骤上很好地了解我所做的工作。

我没什么主意了,你们中有人对此有过麻烦吗?

编辑

与授权有关的服务器代码:

public static async Task<HttpResponseMessage> RunGraphQLService([HttpTrigger(AuthorizationLevel.Function, "get", "post", Route = null)]HttpRequestMessage req, ILogger log)

正如评论中所提到的,我将请求发送到服务部门,非常好, Authorization: Bearer ey......something 很好,但API调用仍然被拒绝。

邮差的屏幕截图,减去敏感信息:

这是我所能想到的。关于更多信息。

亲切问候 克里斯