使用 adalFetch 从 API 调用返回的“AADSTS500011”错误消息

Question

我有一个在 Azure Active Directory 中注册的 React 应用程序。在 API 权限部分，我添加了访问我尝试访问的 API 的权限。

当用户进入应用程序时，我正在使用 react-adal 包来处理登录和访问令牌的存储。我的理解是，此时创建了 API 的访问令牌，adalFetch 在调用 API 期间处理后勤工作。

来自 API 的响应是一个错误对象（我替换了实际的 id；是的，它们完全匹配并且在 AAD 中是正确的）：

{
message: "AADSTS500011: The resource principal named https://<domain>.onmicrosoft.com/APP_ID/access_as_user was not found in the tenant named TENANT. This can happen if the application has not been installed by the administrator of the tenant or consented to by any user in the tenant. You might have sent your authentication request to the wrong tenant."
msg: "invalid_resource"
}

我已经到处搜索以找到解决此问题的方法。 API 上有文档，但没有指定资源或各种端点之外的任何内容，即http://thing-api.azurewebsites.net/api/endpointGoesHere

API 页面声明：

要使用 API，应用需要使用 AzureAD (AAD) 实现现代身份验证 (OIDC)，然后从 AAD 请求 API 的令牌。

Azure 中的应用 ID 为 https://domain.onmicrosoft.com/APP_ID，需要“access_as_user”范围。

adalConfig.js

import { AuthenticationContext, adalFetch, withAdalLogin } from 'react-adal';

export const adalConfig = {
  clientId: CLIENT_ID,
  tenant: TENANT,
  endpoints: {
    thingApi: 'https://<domain>.onmicrosoft.com/APP_ID/access_as_user',
    graphApi: 'https://graph.microsoft.com',
  },
  cacheLocation: 'localStorage',
};

export const authContext = new AuthenticationContext(adalConfig);

export const adalApiFetch = (fetch, url, options) =>
  adalFetch(authContext, adalConfig.endpoints.thingApi, fetch, url, options);

export const adalGraphFetch = (fetch, url, options) =>
  adalFetch(authContext, adalConfig.endpoints.graphApi, fetch, url, options);

API 调用的函数。在 componentDidMount 中执行。

TrainLanding.jsx

//Returns error
fetchData = () => {
    adalApiFetch(fetch, 'http://thing-api.azurewebsites.net/api/EventGet', {})
      .then((response) => {
        response.json()
          .then((responseJson) => {
            this.setState({ apiResponse: JSON.stringify(responseJson, null, 2) }, () => {
              console.log(this.state.apiResponse)
            })
          });
      })
      .catch((error) => {
        console.error(error);
      })
  }

//works perfectly fine
fetchGraph = () => {
    adalGraphFetch(fetch, 'https://graph.microsoft.com/v1.0/me', {})
      .then((response) => {
        response.json()
          .then((responseJson) => {
            this.setState({ apiResponse: JSON.stringify(responseJson, null, 2) }, () => {
              console.log(this.state.apiResponse)
            })
          });
      })
      .catch((error) => {
        console.error(error);
      })
  }

我以完全相同的方式设置了一个图形 API 调用来测试该方法，它工作得非常好。所以我知道 adal 设置正确，我只是不明白错误和哪里出错了。我的谷歌搜索没有产生任何有用的结果。

Answer 1

好的，如果你在这里，有几点需要注意：

1. 不要使用 ADAL。使用 MSAL。 ADAL 是 v1 并且不起作用。在此处阅读示例：https://www.npmjs.com/package/react-aad-msal
2. 您应该将整个应用程序包装在从上面获得的组件中。我将在下面展示我是如何做到的。
3. 您必须已在 Azure Active Directory 中注册您的应用、配置重定向 URL 并包含 API 权限。

index.js

import { AzureAD, MsalAuthProviderFactory, LoginType } from 'react-aad-msal';
import { msalConfig, authParams } from './msalConfig';

class Index extends Component {
  state = {
    userInfo: null,
  }

  userJustLoggedIn = (accInfo) => {
    this.setState({
      userInfo: accInfo
    })
  }

  render() {
    return(
      <AzureAD
      provider={
        new MsalAuthProviderFactory(msalConfig, authParams, LoginType.Redirect)
      }
      forceLogin={true}
      accountInfoCallback={this.userJustLoggedIn}
        >
        <HashRouter>
          <App userInfo={this.state.userInfo}/>
        </HashRouter>
      </AzureAD>
    );
  }
}


  ReactDOM.render(
    <Index/>, document.getElementById('root')
  );

如果您使用的是最新版本的 Create React App，您的索引可能不是这样。出于几个原因，我将索引转换为组件。首先，我的身份验证循环在重定向时卡住了 1 次刷新。其次，我可以将登录用户的信息存储在状态中，使用 setState 进行更新（这会强制进行另一个渲染），然后将其作为道具传递给我的应用程序的其余部分。

msalConfig.js

export const msalConfig = {
  auth: {
    authority: process.env.REACT_APP_AUTHORITY, //this should be "https://login.microsoftonline.com/<your-tenant-id>"
    clientId: process.env.REACT_APP_CLIENT_ID, //just "<your-client-id>"
    redirectUri: process.env.REACT_APP_REDIRECT //"<url of your app or localhost port you dev on>"
  },
  cache: {
    cacheLocation: "localStorage",
    storeAuthStateInCookie: true
  }
};

export const authParams = {
//can be whatever api scopes you need here **as long as they are from the same API address**
  scopes: [
    'https://graph.microsoft.com/User.ReadBasic.All',
    'https://graph.microsoft.com/email',
    'https://graph.microsoft.com/profile',
    'https://graph.microsoft.com/User.Read'
  ],
  extraScopesToConsent: [
    //any non Microsoft Graph API scopes go here for this example
    'any extra strings of APIs to consent to'
  ]
}

在此处阅读以上 env 文件和变量：https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#what-other-env-files-can-be-used

我有一个 .env.development 和一个 .env.production，每个都有正确的重定向 URL。

---

验证用户身份后，您可以访问 API。

您需要在每次 API 调用之前静默获取令牌并在请求中使用该令牌。对我来说，它看起来像这样：

const authProvider = new MsalAuthProviderFactory(msalConfig, authParams);
    console.log(authProvider)
    authProvider.getAuthProvider().UserAgentApplication.acquireTokenSilent(authParams)
    .then((res) => {
      axios({
        headers: {
          'Authorization': 'Bearer ' + res.accessToken
        },
        method: 'GET',
        url: "api address"
      })
      .then((response) => {
        //do stuff with response
        console.log(response)
      })
      .catch((error) => {
        console.log('axios fail: ' + error)
      })
    })
    .catch((error) => {
      console.log('token fail: ' + error)
    })

我把它放到一个函数中，并在 componentDidMount 期间调用。

如果有任何变化，我会更新。我希望这对某人有所帮助。