我有一个 React 网络应用程序，我已经为该网络应用程序本身配置了 Azure AD 身份验证。它的 100% 客户端站点应用程序，没有服务器端组件。

我使用了这个组件: https://github.com/salvoravida/react-adal

我的代码如下: adalconfig.js

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

export const adalConfig = {
  tenant: 'mytenantguid',
  clientId: 'myappguid',
  endpoints: {
    api: '14d71d65-f596-4eae-be30-27f079bf8d4b',
  },
  cacheLocation: 'localStorage',
};

export const authContext = new AuthenticationContext(adalConfig);

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

export const withAdalLoginApi = withAdalLogin(authContext, adalConfig.endpoints.api);

索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import DashApp from './dashApp';
import registerServiceWorker from './registerServiceWorker';
import 'antd/dist/antd.css';

import { runWithAdal } from 'react-adal';
import { authContext } from './adalConfig';

const DO_NOT_LOGIN = false;

runWithAdal(authContext, () => {

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

  // Hot Module Replacement API
  if (module.hot) {
    module.hot.accept('./dashApp.js', () => {
      const NextApp = require('./dashApp').default;
      ReactDOM.render(<NextApp />, document.getElementById('root'));
    });
  }

},DO_NOT_LOGIN);


registerServiceWorker();

dashapp.js

import React from "react";
import { Provider } from "react-redux";
import { store, history } from "./redux/store";
import PublicRoutes from "./router";
import { ThemeProvider } from "styled-components";
import { LocaleProvider } from "antd";
import { IntlProvider } from "react-intl";
import themes from "./settings/themes";
import AppLocale from "./languageProvider";
import config, {
  getCurrentLanguage
} from "./containers/LanguageSwitcher/config";
import { themeConfig } from "./settings";
import DashAppHolder from "./dashAppStyle";
import Boot from "./redux/boot";

const currentAppLocale =
  AppLocale[getCurrentLanguage(config.defaultLanguage || "english").locale];


const DashApp = () => (
  <LocaleProvider locale={currentAppLocale.antd}>
    <IntlProvider
      locale={currentAppLocale.locale}
      messages={currentAppLocale.messages}
    >
      <ThemeProvider theme={themes[themeConfig.theme]}>
        <DashAppHolder>
          <Provider store={store}>
            <PublicRoutes history={history} />
          </Provider>
        </DashAppHolder>
      </ThemeProvider>
    </IntlProvider>
  </LocaleProvider>
);
Boot()
  .then(() => DashApp())
  .catch(error => console.error(error));

export default DashApp;
export { AppLocale };

到那时一切正常，当用户未通过身份验证时，它会重定向到 login.live.com 进行身份验证，然后再重定向回来。

不过，我还创建了另一个用于托管 REST API 的 azure webapp，该 REST API 已在 Azure AD 中配置，因此尝试使用其余 API 的用户将需要进行身份验证。

现在的问题是:如何设置我的客户端应用程序以使用受 Azure AD 保护的 REST API。？

我找到了这个并且看起来是我要找的东西，但我不确定如何将它集成到我上面的现有代码中

https://github.com/AzureAD/azure-activedirectory-library-for-js/issues/481

更新: 对于潜在读者

这个答案加上这个 url 上配置应用程序注册的说明帮助我解决了问题:https://blog.ithinksharepoint.com/2016/05/16/dev-diary-s01e06-azure-mvc-web-api-angular-and-adal-js-and-401s/

最佳答案

这里的关键是adalApiFetch , 在 adalConfig.js 中定义.如您所见，它是 adalFetch 的简单包装器.此方法(在 react-adal 中定义)接收一个 ADAL 实例 (authContext)、一个资源标识符 (resourceGuiId)、一个方法 (fetch)、一个 URL (url) 和一个对象 (options) ).该方法执行以下操作:

1. 使用 ADAL 实例 ( authContext ) 获取由 resourceGuiId 标识的资源的访问 token .
2. 将此访问 token 添加到 headers options 的领域对象(如果未提供，则创建一个)。
3. 调用传入 url 的给定“fetch”方法和 options对象作为参数。

adalApiFetch方法(您已在 adalConfig.js 中定义)仅调用 adalFetch使用 adalConfig.endpoints.api 中标识的资源.

好的，那么您如何使用所有这些来发出 REST 请求，并在您的 React 应用程序中使用响应？让我们举个例子。在以下示例中，我们将使用 Microsoft Graph API 作为受 Azure AD 保护的 REST API。我们将通过它的友好标识符 URI(“https://graph.microsoft.com”)来识别它，但请记住，它也可以是 Guid 应用程序 ID。

adalConfig.js 定义 ADAL 配置，并导出几个辅助方法:

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

export const adalConfig = {
tenant: '{tenant-id-or-domain-name}',
clientId: '{app-id-of-native-client-app}',
endpoints: {
    api: 'https://graph.microsoft.com' // <-- The Azure AD-protected API
},
cacheLocation: 'localStorage',
};

export const authContext = new AuthenticationContext(adalConfig);

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

export const withAdalLoginApi = withAdalLogin(authContext, adalConfig.endpoints.api);

index.js 包装 indexApp.js与 runWithAdal方法来自 react-adal ，这确保用户在加载之前已使用 Azure AD 签名 indexApp.js :

import { runWithAdal } from 'react-adal';
import { authContext } from './adalConfig';

const DO_NOT_LOGIN = false;

runWithAdal(authContext, () => {

// eslint-disable-next-line
require('./indexApp.js');

},DO_NOT_LOGIN);

indexApp.js 只是加载并呈现 App 的一个实例，这里没什么特别的:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

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

App.js 是一个神奇的简单组件:

• 我们定义一个state值(value)。在这种情况下，它称为 apiResponse因为我们只是显示原始 API 响应，但当然您可以根据需要命名此状态(或具有多个状态值)。
• 期间 componentDidMount (在元素在 DOM 中可用后运行)，我们调用 adalApiFetch .我们传入fetch (来自 Fetch API 作为 fetch 参数，以及我们要发出的 REST 请求的端点(在本例中为 Microsoft Graph 中的 /me 端点):
• 在render方法，我们简单地在 <pre> 中显示此状态值元素。

import React, { Component } from 'react';
import { adalApiFetch } from './adalConfig';

class App extends Component {

  state = {
    apiResponse: ''
  };

  componentDidMount() {

    // We're using Fetch as the method to be called, and the /me endpoint 
    // from Microsoft Graph as the REST API request to make.
    adalApiFetch(fetch, 'https://graph.microsoft.com/v1.0/me', {})
      .then((response) => {

        // This is where you deal with your API response. In this case, we            
        // interpret the response as JSON, and then call `setState` with the
        // pretty-printed JSON-stringified object.
        response.json()
          .then((responseJson) => {
            this.setState({ apiResponse: JSON.stringify(responseJson, null, 2) })
          });
      })
      .catch((error) => {

        // Don't forget to handle errors!
        console.error(error);
      })
  }

  render() {
    return (
      <div>
        <p>API response:</p>
        <pre>{ this.state.apiResponse }</pre>
      </div>
    );
  }
}

export default App;

关于javascript - 如何将 azure 广告集成到使用 azure 中的 REST API 的 React Web 应用程序中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50305568/