Łączenie aplikacji z interfejsem API sieci szkieletowej dla języka GraphQL

Aby połączyć aplikację z interfejsem API dla GraphQL, potrzebne są trzy kluczowe szczegóły: identyfikator klienta, identyfikator dzierżawy i adres punktu końcowego GraphQL w Fabric. W poniższych sekcjach opisano sposób tworzenia i pobierania wymaganych szczegółów oraz uzyskiwania dostępu do interfejsu API przy użyciu przykładowej aplikacji React.

Inne języki

W tym samouczku wyjaśniono, jak połączyć przykładową aplikację React z Fabric API, korzystając z GraphQL. Przykłady języków C#, Python i innych można znaleźć w repozytorium GitHub Microsoft Fabric Samples.

Wymagania wstępne

Przed nawiązaniem połączenia z aplikacją upewnij się, że masz interfejs API dla GraphQL w Fabric. Aby uzyskać więcej informacji, zobacz Tworzenie interfejsu API dla języka GraphQL w sieci szkieletowej i dodawanie danych.
Interfejs API dla programu GraphQL wymaga, aby aplikacje używały usługi Microsoft Entra do uwierzytelniania. Zarejestruj i skonfiguruj aplikację do wykonywania wywołań interfejsu API względem usługi Fabric. Aby uzyskać więcej informacji, zobacz Tworzenie aplikacji Microsoft Entra na platformie Azure.
Uwierzytelnione poświadczenia (jednostka użytkownika, jednostka usługi lub tożsamość zarządzana) wywołujące interfejs API wymagają uprawnień do Wykonywania dla interfejsu API GraphQL (opcja Wykonywanie zapytań i mutacji podczas dodawania uprawnień dostępu bezpośredniego). Jeśli używasz logowania jednokrotnego (SSO) jako opcji łączności w interfejsie API, upewnij się, że poświadczenia mają uprawnienia do odczytu lub zapisu w wybranym źródle danych. Aby uzyskać więcej informacji, zobacz Connect to a data source (Nawiązywanie połączenia ze źródłem danych) i tworzenie schematu.

Tworzenie aplikacji Microsoft Entra

W poniższych krokach wyjaśniono, jak skonfigurować obsługę aplikacji ReactJS w usłudze Microsoft Entra.

Zarejestruj aplikację, wykonując kroki opisane w przewodniku Szybki start : rejestrowanie aplikacji za pomocą platformy tożsamości firmy Microsoft.
Wartości w aplikacji Microsoft Entra, identyfikator aplikacji (klienta) oraz identyfikator katalogu (dzierżawy), są wyświetlane w polu Podsumowanie. Zapisz te wartości, ponieważ są one wymagane później.
Na liście Zarządzaj wybierz pozycję Uprawnienia interfejsu API, a następnie Dodaj uprawnienia.
Dodaj usługę PowerBI, wybierz Delegowane uprawnienia, a następnie wybierz uprawnienia GraphQLApi.Execute.All. Upewnij się, że zgoda administratora nie jest wymagana.
Wróć do listy Zarządzanie, wybierz pozycję Uwierzytelnianie>Dodaj platformę>Aplikacja jednostronicowa.
W celach programowania lokalnego dodaj http://localhost:3000 w obszarze Identyfikatory URI przekierowania i upewnij się, że aplikacja jest włączona dla przepływu kodu autoryzacji z kluczem dowodowym dla wymiany kodu (PKCE). Wybierz przycisk Konfiguruj, aby zapisać zmiany. Jeśli aplikacja napotka błąd związany z żądaniami między źródłami, dodaj platformę aplikacji mobilnych i desktopowych w poprzednim kroku z tym samym identyfikatorem URI przekierowania.
Wróć do Authentication, przewiń w dół do Ustawienia zaawansowane i w obszarze Zezwalaj na przepływy klientów publicznychwybierz opcję Tak dla Włącz następujące przepływy mobilne i na komputery stacjonarne.

Konfigurowanie przykładowego interfejsu API graphQL na potrzeby dostępu do aplikacji

W tym przykładzie utworzymy interfejs API GraphQL, aby uwidocznić przykładowe dane usługi Lakehouse klientom.

Na stronie głównej portalu sieci szkieletowej wybierz pozycję inżynierowie danych z listy obciążeń.
W środowisku inżynierii danych wybierz pozycję Użyj przykładu i w obszarze Lakehouse wybierz pozycję Święta publiczne , aby automatycznie utworzyć nową usługę Lakehouse z danymi o świętach publicznych.
Wykonaj kroki z sekcji Tworzenie interfejsu API dla języka GraphQL , aby utworzyć nowy interfejs API GraphQL i wybrać utworzoną usługę Lakehouse. Dodaj tabelę dni wolnych, aby klienci mogli uzyskiwać dostęp do tych danych.

Przetestuj interfejs API GraphQL w edytorze interfejsu API przy użyciu następującego przykładowego zapytania. Jest to to samo zapytanie używane w aplikacji klienckiej 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
     }
   }
 }

Wybierz pozycję Kopiuj punkt końcowy na pasku narzędzi elementu interfejsu API.
Na ekranie Kopiuj link wybierz pozycję Kopiuj.
Użyj identyfikatora klienta i identyfikatora dzierżawy z zarejestrowanej wcześniej aplikacji Microsoft Entra i skopiuj identyfikator URI punktu końcowego, ponieważ jest on wymagany później.

Konfigurowanie aplikacji React w celu uzyskania dostępu do interfejsu API dni wolnych

Uwaga / Notatka

Jeśli wolisz pominąć poniższe kroki ręczne, możesz sklonować repozytorium GitHub z pełną aplikacją. Wykonaj krok 3, aby dodać szczegółowe informacje o punkcie końcowym GraphQL i identyfikatorach pobranych z Microsoft Entra do pliku authConfig.js, zainstaluj zależności za pomocą npm install i przejdź do kroku 9, aby kontynuować testowanie wykonywania aplikacji.

Użyj istniejącej aplikacji React jako punktu wyjścia. Wykonaj kroki opisane w samouczku Tworzenie aplikacji jednostronicowej React i przygotuj ją do uwierzytelniania w celu utworzenia projektu React ze skonfigurowanym uwierzytelnianiem firmy Microsoft Entra, w tym wymaganych plików i folderów dodanych do struktury projektu. Zmień trzy pliki, aby dostosować aplikację do przypadku użycia programu GraphQL.

W folderze src otwórz authConfig.js plik i zastąp zawartość pliku następującym fragmentem kodu:

/*
 * 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",
};

Jak widać w powyższym kodzie, ważne jest, aby uzyskać dostęp do aplikacji przy użyciu poprawnego zakresu. W naszym przypadku https://analysis.windows.net/powerbi/api/GraphQLApi.Execute.All.

Zastąp następujące wartości wartości wartościami z centrum administracyjnego firmy Microsoft Entra.
- clientId — identyfikator aplikacji, nazywany również klientem. Zastąp Enter_the_Application_Id_Here wartością ID aplikacji (klienta), która została zapisana wcześniej na stronie przeglądu dla zarejestrowanej aplikacji Microsoft Entra.
- authority — składa się z dwóch części:
  - Wystąpienie jest punktem końcowym dostawcy usług w chmurze. Sprawdź różne dostępne punkty końcowe w chmurach krajowych.
  - Identyfikator dzierżawy to identyfikator dzierżawy, w której zarejestrowano aplikację. Zastąp Enter_the_Tenant_Info_Here wartością Identyfikator katalogu (dzierżawy), która została zarejestrowana wcześniej na stronie przeglądu aplikacji.
- graphQLEndpoint — interfejs Fabric API dla punktu końcowego GraphQL. Zastąp element Enter_the_GraphQL_Endpoint_Here punktem końcowym interfejsu API GraphQL zarejestrowanym wcześniej.
Zapisz plik.

W tym samym src folderze otwórz App.js plik i zastąp zawartość pliku następującym fragmentem kodu:

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

Zapisz plik.

Na koniec w folderze src/components otwórz ProfileData.jsx plik i zastąp zawartość pliku następującym fragmentem kodu:

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

Zapisz wszystkie zmiany w pliku.
W aplikacji terminalu przejdź do folderu głównego projektu React i uruchom polecenie npm start , aby przetestować aplikację lokalnie.
Po załadowaniu aplikacji w przeglądarce z http://localhost:3000, wykonaj kroki opisane w ostatniej części samouczka Wywoływanie interfejsu API z aplikacji.
Po zalogowaniu wybierz przycisk Interfejs API usługi Query Fabric dla danych GraphQL.
Pomyślnie uwierzytelnione żądanie do interfejsu API GraphQL w usłudze Fabric zwraca dane z zapytania GraphQL do usługi Lakehouse w aplikacji klienckiej React:

Dowiedz się, jak utworzyć aplikację Microsoft Entra na platformie Azure.
Dowiedz się, jak utworzyć interfejs API dla języka GraphQL w sieci szkieletowej i dodać dane.
Dowiedz się, jak utworzyć aplikację jednostronicową react i przygotować ją do uwierzytelniania.
Dowiedz się, jak wykonywać zapytania do wielu źródeł danych w Fabric API dla GraphQL.
Zapoznaj się z repozytorium GitHub za pomocą przykładowej aplikacji React.

Sprzężenie zwrotne

Czy ta strona była pomocna?

Last updated on 2025-08-22