두 개의 서로 다른 리소스 및 범위에 대해 react-aad-msal을 사용하여 액세스 토큰 가져 오기

액세스 토큰으로 두 개의 서로 다른 API를 호출해야하는 하나의 React 앱을 개발했습니다 . 애플리케이션의 코드는 react-aad-msal 라이브러리 를 인증하는 데 사용합니다 . 원래 응용 프로그램은 매력처럼 작동하는 필요한 액세스 토큰을 요청한 하나의 API 만 호출하도록 빌드되었습니다.

다음과 같은 권한 사용에 대한 Microsoft 설명서 에 따라 :

액세스 토큰은 단일 리소스에만 사용할 수 있지만 액세스 토큰 내에 인코딩 된 것은 해당 리소스에 대해 앱에 부여 된 모든 권한입니다.

리소스가 다르기 때문에 두 개의 다른 액세스 토큰을 요청해야합니다 .

리소스와 범위가 하나 뿐인 작업 솔루션 :

<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. 어떻게 든 하나의 요청으로 상황을 처리 할 수 ​​있습니까?

모든 설명이나 아이디어에 감사드립니다. 감사합니다!