Ключ здесь adalApiFetch, определенный в adalConfig.js.Как видите, это простая оболочка вокруг adalFetch.Этот метод (определенный в react-adal) получает экземпляр ADAL (authContext), идентификатор ресурса (resourceGuiId), метод (fetch), URL (url) иобъект (options).Метод выполняет следующие действия:
- Используйте экземпляр ADAL (
authContext) для получения токена доступа для ресурса, обозначенного resourceGuiId. - Добавьте этот токен доступа к
headers поле объекта options (или создайте его, если он не был предоставлен). - Вызовите указанный метод "fetch", передав в качестве параметров
url и объект options.
Метод adalApiFetch (который вы определили в adalConfig.js) просто вызывает adalFetch с ресурсом, указанным в adalConfig.endpoints.api.
Хорошо, так как вы используетевсе это, чтобы сделать запрос REST и использовать ответ в вашем приложении React?Давайте использовать пример.В следующем примере мы будем использовать Microsoft Graph API в качестве REST API, защищенного с помощью Azure AD.Мы будем идентифицировать его по его дружественному идентификатору URI ("https://graph.microsoft.com"),, но имейте в виду, что это может быть и идентификатор приложения Guid.
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. В этом случае оно называется apiResponse, так как мыпросто отображая необработанный ответ API, но, конечно, вы можете назвать это состояние как угодно (или иметь несколько значений состояния). - Во время
componentDidMount (которое запускается после того, как элемент доступен в DOM),мы вызываем adalApiFetch. Передаем fetch (из Fetch API как * 1Параметр 072 * и конечная точка для запроса REST, который мы хотим сделать (в данном случае конечная точка /me в Microsoft Graph): - В методе
render мы просто отображаем это значение состояния вэлемент <pre>.
<code>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 } );}} экспортировать приложение по умолчанию;