从 Angular 调用 Azure 函数 API Static Web 带有 Azure Active Directory 授权的页面前端

Question

我的前端和后端（Azure Functions）都受到 Azure Active Directory（AAD）的保护。

前端：我已经按照此处描述的方式在 Angular 中实施了 MSAL：( https://www.pshul.com/2020/02/07/azure-ad-authentication-from-angular-to-azure-functions/ )。 现在，当打开我的 Angular 网页时，我被重定向到 Microsoft 登录，它只接受正确的用户和帐户，这似乎有效。

后端：我的后端端点不允许来自已注册帐户的没有有效 id_token 的请求。 所有带有无效令牌的请求都将导致 401（未授权）错误，这似乎也有效。

问题在于从我的前端调用后端函数，或者更确切地说是获取一个 id_token：当我像上面描述的那样登录到前端时，我想存储 id_token 并让我的拦截器在每个请求中发送它，所以我不需要每次请求都额外登录。 在我提到的链接中，这似乎由 MSAL 和 MSALInterceptor 处理，这对我不起作用（它没有向后端发送任何不记名令牌），所以我让我自己的拦截器从 localStorage 获取令牌。 问题是，来自 localStorage 的令牌也会导致 401 错误，因此它似乎无效。 当我没有误解时，登录时，它调用登录并从 https://MyAzureWebPage/.auth/me 获取一个 id-token，它存储在本地存储中，但该令牌不起作用。 当手动调用 https://MyAzureWebPage/.auth/me 并将该 id_token 与 postman 一起使用时，它可以工作。 有谁知道我做错了什么或者我在哪里可以获得正确的 id_token？

这是我的 MSAL 配置，也许我在那里做错了什么：

MsalModule.forRoot({
      auth: {
        clientId: 'myCliendAdd',
        authority: "https://login.microsoftonline.com/myTenantID",
      },
      cache: {
        cacheLocation: 'localStorage',
        storeAuthStateInCookie: isIE, // Set to true for Internet Explorer 11
      },
    },
    {
      popUp: !isIE,
      consentScopes: [
        'user.read',
        'openid',
        'profile',
      ],
      unprotectedResources: [],
      protectedResourceMap: [
        ['https://MyAzureWebPage/.auth/me', ['user.read']]
      ],
      extraQueryParameters: {}
    }), 
 providers: [
    AuthGuard,
    RoleGuard,
    { provide: HTTP_INTERCEPTORS, useClass: MsalInterceptor, multi: true }

  ],
  bootstrap: [AppComponent],
})

出于某种原因，我从 msal 获得的令牌（例如：

    this.broadcastService.subscribe("msal:acquireTokenSuccess", payload => {
      console.log(payload)   
  });

并且 localStorage 不同于我调用 https://MyAzureWebPage/.auth/me 时获得的令牌，这是唯一一个似乎有效的令牌

如果您需要任何进一步的信息，我将在此处添加

Answer 1

如果想在angular应用中调用Azure AD投影的Azure function，请参考以下代码

• 创建Azure AD应用保护function

  1. 注册Azure AD申请。 完成后，请复制应用程序（客户端）ID和目录（租户）ID

  2. 配置重定向 URI 。 Select Web并输入<app-url>/.auth/login/aad/callback 。

  3. 启用隐式授权流程

  4. 定义 API scope 并复制

  5. 创建客户端密钥。

• 在应用服务应用中启用 Azure Active Directory

• 创建Client AD应用访问function

  1. 注册申请
  2. 启用隐式授权流程
  3. 配置 API 权限。 让你的客户端应用有权限访问function

• 代码

MsalModule.forRoot(
      {
        auth: {
          clientId: '232a1406-b27b-4667-b8c2-3a865c42b79c',
          authority:
            'https://login.microsoftonline.com/e4c9ab4e-bd27-40d5-8459-230ba2a757fb',
          redirectUri: 'http://localhost:4200/',
        },
        cache: {
          cacheLocation: 'localStorage',
          storeAuthStateInCookie: isIE, // set to true for IE 11
        },
      },
      {
        popUp: !isIE,
        consentScopes: [
          'user.read',
          'openid',
          'profile',
          '<your function app scope your define>',
        ],
        unprotectedResources: [],
        protectedResourceMap: [
          [
            '<your function app url>',
            [<your function app scope you define>],
          ]
        ],
        extraQueryParameters: {},
      }
    ),
  ],