通过具有两个不同资源和范围的react-aad-msal获取访问令牌

Question

开发了一个React应用程序，该应用程序需要使用访问令牌调用两个不同的API。该应用程序的代码用于react-aad-msal库的身份验证。最初，该应用程序已构建为仅调用一个API，在该API中，我已请求了必需的访问令牌，该访问令牌的工作方式类似于charm。

按照Microsoft documentation关于使用权限的规定：

访问令牌只能用于单个资源，但是在访问令牌中编码的是您的应用已被授予该资源的每个许可。

基于此，我需要请求两个不同的访问令牌，因为资源不同

，这很清楚。

仅具有一种资源和范围的有效解决方案：

为<AzureAD>包装器创建必要的提供者：

const config = {
   auth: {
      authority: process.env.REACT_APP_AUTH_AUTHORITY,
      clientId: process.env.REACT_APP_AUTH_CLIENT_ID,
      redirectUri: process.env.REACT_APP_AUTH_REDIRECT_URI
   },
   cache: {
      cacheLocation: 'localStorage',
      storeAuthStateInCookie: true
   }
};

const authenticationParameters = {
   scopes: ['https://<our-api-name>.azurewebsites.net/user_impersonation'],
};

// saved to AuthenticationService.provider - logic removed
new MsalAuthProvider(config, authenticationParameters, LoginType.Redirect);
然后将其传递给<AzureAD>包装器：

<AzureAD provider={AuthenticationService.provider}
         forceLogin={true}>
这里没有问题。

问题：

因此，如果我需要来自不同资源和范围的两个访问令牌，那么我应该如何处理该方案有点困惑。

一旦我尝试将其他资源和范围添加到范围数组，如下所示：

const authenticationParameters = {
    scopes: [
       'https://<our-app-name>.azurewebsites.net/user_impersonation',
       'https://<tenant-name>.onmicrosoft.com/<api-guid>/access_as_user'
    ],
};
它显然给出了以下错误消息：

AADSTS28000：为输入参数范围提供的值无效，因为它包含多个资源。

感兴趣以下内容：

1. 我应该如何正确获取另一个访问令牌以发送到另一个API？
2. 是否将用户两次重定向到登录页面？
3. 可以以某种方式在一个请求中处理情况吗？

感谢任何澄清或想法，谢谢！

[开发了一个React应用程序，该应用程序需要使用访问令牌调用两个不同的API。该应用程序的代码用于对react-aad-msal库进行身份验证。最初，应用程序已构建为...

Answer 1

顺便说一句，具有2个级别的API的体系结构通常是首选选项，尽管对于您眼前的问题，这当然可能超出范围：

Answer 2

我应该如何正确获取另一个访问令牌以发送到另一个API？