Подключение приложений к API Fabric для GraphQL

Чтобы подключить приложение к API для GraphQL, вам потребуется три ключевых сведения: идентификатор клиента, идентификатор клиента и адрес конечной точки GraphQL в Fabric. В следующих разделах объясняется, как создать и получить необходимые сведения и получить доступ к API с помощью примера приложения React.

Остальные языки

В этом руководстве объясняется, как подключить пример приложения React к API Fabric для GraphQL. В репозитории GitHub для примеров Microsoft Fabric находятся C#, Python и другие языковые примеры.

Необходимые компоненты

Перед подключением приложения убедитесь, что у вас есть API для GraphQL в Fabric. Дополнительные сведения см. в статье "Создание API для GraphQL в Fabric" и добавление данных.
API для GraphQL требует, чтобы приложения использовали Microsoft Entra для проверки подлинности. Зарегистрируйте и настройте приложение для выполнения вызовов API в Fabric. Дополнительные сведения см. в статье "Создание приложения Microsoft Entra" в Azure.
Учетные данные, прошедшие проверку подлинности (субъект-пользователь, субъект-служба или управляемое удостоверение), вызывая API, требуют разрешения execute для API GraphQL (параметр "Выполнить запросы и мутации" при добавлении разрешений прямого доступа). При использовании единого входа (SSO) в качестве параметра подключения в API убедитесь, что учетные данные имеют разрешения на чтение или запись в выбранном источнике данных. Дополнительные сведения см. в разделе Подключение к источнику данных и сборка схемы.

Создание приложения Microsoft Entra

Ниже описано, как настроить поддержку приложения ReactJS в Microsoft Entra.

Зарегистрируйте приложение, используя шаги, описанные в разделе Быстрый старт: Регистрация приложения на платформе идентификации Microsoft.
Значения идентификатора приложения приложения Microsoft Entra (клиента) и идентификатора каталога (клиента) отображаются в поле сводки. Запишите эти значения, так как они требуются позже.
В списке Управление выберите Разрешения API, затем Добавить разрешение.
Добавьте службу PowerBI, выберите делегированные разрешения и выберите разрешения GraphQLApi.Execute.All . Убедитесь, что согласие администратора не требуется.
Вернитесь в список "Управление", выберите "Добавить>одностраничные приложения>".
Для локальных целей разработки добавьте http://localhost:3000 в URI перенаправления и убедитесь, что приложение включено для потока кода авторизации с ключом проверки подлинности для Exchange (PKCE). Нажмите кнопку "Настройка", чтобы сохранить изменения. Если приложение сталкивается с ошибкой, связанной с запросами между источниками, добавьте платформу мобильных и классических приложений на предыдущем шаге с тем же URI перенаправления.
Вернитесь к проверке подлинности, прокрутите вниз до расширенные настройки и, в разделе Разрешить потоки общедоступных клиентов, выберите Да для Включить следующие потоки для мобильных и настольных приложений.

Настройка примера API GraphQL для доступа к приложениям

В этом примере мы создадим API GraphQL для предоставления примеров данных Lakehouse клиентам.

На домашней странице портала Fabric выберите Инжиниринг данных из списка рабочих нагрузок.
В разделе "Проектирование данных" выберите "Использовать пример" и в разделе Lakehouse выберите общедоступные праздники, чтобы автоматически создать новый Lakehouse с данными о государственных праздниках.
Выполните действия из статьи "Создание API для GraphQL", чтобы создать новый API GraphQL и выбрать созданное приложение Lakehouse. Добавьте таблицу государственных праздников, чтобы клиенты могли получить доступ к этим данным.
Проверьте API GraphQL в редакторе API с помощью следующего примера запроса. Это тот же запрос, используемый в клиентском приложении React:
```
 query {
 publicholidays (filter: {countryRegionCode: {eq:"US"}, date: {gte: "2024-01-01T00:00:00.000Z", lte: "2024-12-31T00:00:00.000Z"}}) {
     items {
       countryOrRegion
       holidayName
       date
     }
   }
 }
```
Выберите конечную точку копирования на панели инструментов элемента API.
На экране ссылки "Копировать" нажмите кнопку "Копировать".
Используйте идентификатор клиента и идентификатор клиента из приложения Microsoft Entra, записанного ранее, и скопируйте URI конечной точки, так как это необходимо позже.

Настройка приложения React для доступа к API общедоступных праздников

Замечание

Если вы предпочитаете пропустить следующие действия вручную, вы можете клонировать репозиторий GitHub с полным приложением. Выполните шаг 3, чтобы добавить конкретные сведения о конечной точке GraphQL и идентификаторы, полученные из Microsoft Entra в файл authConfig.js, установите зависимости с npm install и перейдите к шагу 9, чтобы продолжить тестирование выполнения приложения.

Используйте существующее приложение React в качестве отправной точки. Выполните действия, описанные в руководстве по созданию одностраничного приложения React, и подготовьте его к проверке подлинности , чтобы создать проект React с настроенной проверкой подлинности Microsoft Entra, включая необходимые файлы и папки, добавленные в структуру проекта. Измените три файла, чтобы адаптировать приложение для варианта использования GraphQL.

В папке src откройте authConfig.js файл и замените содержимое файла следующим фрагментом кода:

/*
 * Copyright (c) Microsoft Corporation. All rights reserved.
 * Licensed under the MIT License.
 */

import { LogLevel } from "@azure/msal-browser";

/**
 * Configuration object to be passed to MSAL instance on creation. 
 * For a full list of MSAL.js configuration parameters, visit:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md 
 */

export const graphqlConfig = {
    graphqlEndpoint: "`Enter_the_GraphQL_Endpoint_Here"
};

export const msalConfig = {
    auth: {
        clientId: "Enter_the_Application_Id_Here",
        authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here",
        redirectUri: "http://localhost:3000",
    },
    cache: {
        cacheLocation: "sessionStorage", // This configures where your cache will be stored
        storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
    },
    system: {
        loggerOptions: {
            loggerCallback: (level, message, containsPii) => {
                if (containsPii) {
                    return;
                }
                switch (level) {
                    case LogLevel.Error:
                        console.error(message);
                        return;
                    case LogLevel.Info:
                        console.info(message);
                        return;
                    case LogLevel.Verbose:
                        console.debug(message);
                        return;
                    case LogLevel.Warning:
                        console.warn(message);
                        return;
                    default:
                        return;
                }
            }
        }
    }
};

/**
 * Scopes you add here will be prompted for user consent during sign-in. 
 * By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.
 * For more information about OIDC scopes, visit: 
 * [OpenID Connect scopes](/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes)
 */
export const loginRequest = {
    scopes: ["https://analysis.windows.net/powerbi/api/GraphQLApi.Execute.All"]
};

/**
 * Add here the scopes to request when obtaining an access token for MS Graph API. For more information, see:
 * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/resources-and-scopes.md
 */
export const graphConfig = {
    graphMeEndpoint: "https://graph.microsoft.com/v1.0/me",
};

Как видно из приведенного выше кода, важно использовать правильную область для доступа к приложению. В нашем случае https://analysis.windows.net/powerbi/api/GraphQLApi.Execute.All.

Замените следующие значения значениями из Центра администрирования Microsoft Entra.
- clientId — идентификатор приложения, который также называется клиентом. Замените Enter_the_Application_Id_Here значение идентификатора приложения (клиента), записанное ранее на странице обзора зарегистрированного приложения Microsoft Entra.
- центр — это состоит из двух частей:
  - Экземпляр — конечная точка поставщика облачных служб. Ознакомьтесь с различными доступными конечными точками в национальных облаках.
  - Идентификатор клиента — это идентификатор клиента, в котором зарегистрировано приложение. Замените Enter_the_Tenant_Info_Here на значение идентификатора каталога (домена), которое было записано ранее на странице обзора зарегистрированного приложения.
- graphQLEndpoint — API Fabric для конечной точки GraphQL. Замените Enter_the_GraphQL_Endpoint_Here конечную точку API GraphQL, записанную ранее.
Сохраните файл.

В той же src папке откройте App.js файл и замените содержимое файла следующим фрагментом кода:

import React, { useState } from 'react';
import { PageLayout } from './components/PageLayout';
import { loginRequest, graphqlConfig } from './authConfig';
import { ProfileData } from './components/ProfileData';
import { AuthenticatedTemplate, UnauthenticatedTemplate, useMsal } from '@azure/msal-react';
import './App.css';
import Button from 'react-bootstrap/Button';
import Spinner from 'react-bootstrap/Spinner';

/**
* Renders information about the signed-in user or a button to retrieve data about the user
*/
const ProfileContent = () => {
  const { instance, accounts } = useMsal();
  const [graphqlData, setGraphqlData] = useState(null);
  const [display, setDisplay] = useState(false);

  function RequestGraphQL() {
      // Silently acquires an access token which is then attached to a request for GraphQL data
      instance
          .acquireTokenSilent({
              ...loginRequest,
              account: accounts[0],
          })
          .then((response) => {
              callGraphQL(response.accessToken).then((response) => setGraphqlData(response));
          });
  }

async function callGraphQL(accessToken) {
  setDisplay(true);
  const query = `query {
    publicholidays (filter: {countryRegionCode: {eq:"US"}, date: {gte: "2024-01-01T00:00:00.000Z", lte: "2024-12-31T00:00:00.000Z"}}) {
      items {
        countryOrRegion
        holidayName
        date
      }
    }
  }`;
  fetch(graphqlConfig.graphqlEndpoint, {
          method: 'POST',
          headers: {
              'Content-Type': 'application/json',
              'Authorization': `Bearer ${accessToken}`,
          },
          body: JSON.stringify({ 
              query: query
          })
      })
      .then((res) => res.json())
      .then((result) => setGraphqlData(result));
}

  return (
      <>
          <h5 className="card-title">Welcome {accounts[0].name}</h5>
          <br/>
          {graphqlData ? (
              <ProfileData graphqlData={graphqlData} />
          ) : (
              <Button variant="primary" onClick={RequestGraphQL}>
                  Query Fabric API for GraphQL Data 
                  {display ? (
                        <Spinner
                            as="span"
                            animation="border"
                            size="sm"
                            role="status"
                            aria-hidden="true"
                        />
                    ) : null}
              </Button>
          )}
      </>
  );
};

/**
* If a user is authenticated the ProfileContent component above is rendered. Otherwise a message indicating a user is not authenticated is rendered.
*/
const MainContent = () => {
  return (
      <div className="App">
          <AuthenticatedTemplate>
              <ProfileContent />
          </AuthenticatedTemplate>

          <UnauthenticatedTemplate>
              <h5>
                  <center>
                      Please sign-in to see your profile information.
                  </center>
              </h5>
          </UnauthenticatedTemplate>
      </div>
  );
};

export default function App() {
  return (
      <PageLayout>
          <center>
              <MainContent />
          </center>
      </PageLayout>
  );
}

Сохраните файл.

Наконец, в папке src/components откройте ProfileData.jsx файл и замените содержимое файла следующим фрагментом кода:

import React from "react";
import ListGroup from 'react-bootstrap/ListGroup'; 
import Table from 'react-bootstrap/Table';
/**
 * Renders information about the user obtained from MS Graph 
 * @param props
 */
export const ProfileData = (props) => {
  const holidays = props.graphqlData.data.publicholidays.items;
  return (
    <Table striped bordered hover responsive>
    <thead>
      <tr>
        <th>CountryOrRegion</th>
        <th>Holiday</th>
        <th>Date</th>
      </tr>
    </thead>
    <tbody>
      {holidays.map((item,i) => (
      <tr key={i}>
        <td>{item.countryOrRegion}</td>
        <td>{item.holidayName}</td>
        <td>{item.date}</td>
      </tr>
      ))}
      </tbody>
    </Table>
)};

Сохраните все изменения файла.
В приложении терминала перейдите в корневую папку проекта React и выполните команду npm start для локального тестирования приложения.
После загрузки приложения в браузере http://localhost:3000выполните действия, описанные в последней части руководства по вызову API из приложения.
После входа нажмите кнопку API Query Fabric для данных GraphQL.
Успешно прошедший проверку подлинности запрос к API GraphQL в Fabric возвращает данные из запроса GraphQL в Lakehouse в клиентском приложении React:

Узнайте, как создать приложение Microsoft Entra в Azure.
Узнайте, как создать API для GraphQL в Fabric и добавить данные.
Узнайте, как создать одностраничное приложение React и подготовить его к проверке подлинности.
Узнайте, как запрашивать несколько источников данных в API Fabric для GraphQL.
Изучите репозиторий GitHub с примером приложения React.

Обратная связь

Была ли эта страница полезна?

Last updated on 2025-08-20