Question

我的前端和后端（Azure函数）均由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令牌，该令牌存储在本地存储中，但该令牌不起作用。当手动调用https：//MyAzureWebPage/.auth/me并将id_token与邮递员一起使用时，它可以工作。有人知道我在做什么错吗，或者我在哪里可以得到正确的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

如果要在角度应用程序中调用Azure AD投影的Azure函数，请参考以下代码

创建Azure AD应用程序以保护功能
1. 注册Azure AD应用程序。完成后，请复制应用程序（客户端）ID 和目录（租户）ID
2. 配置重定向URI 。选择网络，然后输入<app-url>/.auth/login/aad/callback。
3. 启用隐式授予流程
4. 定义API范围并复制它
5. 创建客户端机密。
在App Service应用中启用Azure Active Directory
创建客户端AD应用程序以访问功能
1. 注册申请
2. 启用隐式授予流程
3. 配置API权限。让您的客户端应用程序有权访问功能
代码

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: {},
      }
    ),
  ],

从具有Azure Active Directory授权的Angular静态网页前端调用Azure Functions API

1 个答案: