使用 react-aad-msal 为两个不同的资源和范围获取访问令牌

Question

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

根据 Microsoft documentation 关于使用权限的说明：

An access token can be used only for a single resource, but encoded inside the access token is every permission that your app has been granted for that resource.

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

只有一个资源和范围的工作解决方案：

正在为 <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: Provided value for the input parameter scope is not valid because it contains more than one resource.

对以下内容感兴趣：

我应该如何正确获取另一个访问令牌以发送给另一个API？
用户不应该被重定向到登录页面两次吗？
能否以某种方式在一个请求中处理这种情况？

欢迎任何澄清或想法，谢谢！

Answer 1

How should I get the other access token properly to send to the other API?

遗憾的是，我不确定如何在该库的上下文中执行此操作。通常你在 UserAgentApplication 对象上调用 acquireTokenSilent 两次。

Shouldn't the user will be redirected two times to login page?

没有。您为登录重定向指定两个范围。然后，您可以使用 acquireTokenSilent 静默获取两个令牌，无需用户交互。

Can the situation be handled in one request somehow

见上，需要调用一次login和两次acquireTokenSilent。

Answer 2

顺便说一句，有 2 层 API 的架构通常是首选，当然这可能超出了您当前问题的范围：

入口点 API 专注于为您的 React 应用程序和类似消费者提供服务 - 这可能被标记为用户体验 API
入口点 APIs 调用核心服务来完成真正的工作——这些可能是产品、用户、股票 APIs

在此设置中，每个 UI 只需要调用一个 API 并且与从多个来源获取数据相关的 OAuth 工作更简单

使用 react-aad-msal 为两个不同的资源和范围获取访问令牌

Get access tokens with react-aad-msal for two different resources and scopes

oauth-2.0

reactjs

msal

microsoft-identity-platform