Javascript 如何将azure广告集成到使用azure中REST API的react web应用程序中

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

我使用了这个组件：

我的代码如下： 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);

index.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();

从“React”导入React；
从“react dom”导入react dom；
从“/DashApp”导入DashApp；
从“./registerServiceWorker”导入registerServiceWorker；
导入“antd/dist/antd.css”；
从“react adal”导入{runWithAdal}；
从“/adalConfig”导入{authContext}；
const DO_NOT_LOGIN=false；
runWithAdal（authContext，（）=>{
ReactDOM.render（，document.getElementById（'root'））；
//热模块替换API
如果（模块热）{
module.hot.accept（'./dashApp.js'，（）=>{
const nextap=require（'./dashApp'）。默认值；
ReactDOM.render（，document.getElementById（'root'））；
});
}
}，请勿登录）；
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 };

从“React”导入React；
从“react redux”导入{Provider}；
从“/redux/store”导入{store，history}；
从“/router”导入PublicRoutes；
从“样式化组件”导入{ThemeProvider}；
从“antd”导入{LocaleProvider}；
从“react intl”导入{IntlProvider}；
从“/settings/themes”导入主题；
从“/languageProvider”导入AppLocale；
导入配置{
getCurrentLanguage
}来自“/containers/LanguageSwitcher/config”；
从“/settings”导入{themeConfig}；
从“/dashAppStyle”导入DashAppHolder；
从“/redux/Boot”导入引导；
恒电流应用程序=
AppLocale[getCurrentLanguage（config.defaultLanguage | | |“english”）.locale]；
const DashApp=（）=>(
);
Boot（）
.然后（（）=>DashApp（））
.catch（error=>console.error（error））；
导出默认DashApp；
导出{AppLocale}；

在此之前，一切正常，当用户未通过身份验证时，其将重定向到login.live.com进行身份验证，然后重定向回

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

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

我找到了这个，并查看了我正在查找的内容，但我不确定如何将其集成到上面的现有代码中

更新： 面向潜在读者

---

这个答案加上这个url上配置应用程序注册的说明帮助我解决了这个问题：

这里的关键是

adalApiFetch

，在

adalConfig.js

中定义。如您所见，它是

adalFetch

的简单包装器。此方法（在中定义）接收ADAL实例（

authContext

）、资源标识符（

resourceGuiId

）、方法（

fetch

）、URL（

URL

）和对象（

options

）。该方法执行以下操作：

使用ADAL实例（

authContext

）获取由

resourceguid

标识的资源的访问令牌

将此访问令牌添加到

选项

对象的

标题

字段（如果未提供，则创建一个）

调用传入

url

的给定“fetch”方法和

选项

对象作为参数

adalApiFetch

方法（您在

adalConfig.js

中定义）只需使用

adalConfig.endpoints.api

中标识的资源调用

adalFetch

好的，那么您如何使用所有这些来发出REST请求，并在React应用程序中使用响应呢？让我们举个例子。在下面的示例中，我们将使用Microsoft Graph API作为受Azure AD保护的REST API。我们将通过它的友好标识符URI（“”）来识别它，但请记住，这也可能是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);

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();

    "oauth2AllowImplicitFlow": true,

); } } 导出默认应用程序；

---

我仍然存在上述配置的问题。我在上面添加了更多的配置，效果很好。希望能有帮助

---

菲利普的回答让我走上了正确的道路，但我仍然遇到了一个问题，我的代币没有被接受

aadsTS700051:未为应用程序启用响应类型“令牌”

要解决此问题，我需要进入我的应用程序的注册>清单并将oauth2AllowImplicitFlow设置为true：

    "oauth2AllowImplicitFlow": true,

---

注销你的Azure帐户，重新登录&你应该会收到你的用户详细信息。

检查这可能会帮助你我收到此错误未经处理的拒绝（SyntaxError）：JSON中的意外标记<位于位置0（匿名函数）src/containers/testREST.js:28我无法对我看不到的代码进行评论。你能和我分享错误代码吗？哦，事实上，我能看到足够多的错误来猜测问题是什么。您的API（

/values

）是否返回JSON

response.json（）

假设它是，并试图反序列化它，但找到一个

是的这也是我的想法，我只是将格式化程序改为json而不是xml，测试react应用程序这就是问题所在，非常感谢，经过一周的努力终于可以工作了。
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'
},
cacheLocation: 'localStorage',
extraQueryParameter: 'prompt=admin_consent'
};

export const authContext = new AuthenticationContext(adalConfig);

    "oauth2AllowImplicitFlow": true,