Připojení aplikací k rozhraní FABRIC API pro GraphQL

2025-06-10

Pokud chcete připojit aplikaci k rozhraní API pro GraphQL, potřebujete tři důležité informace: ID klienta, ID tenanta a adresu koncového bodu GraphQL v prostředcích infrastruktury. V následujících částech si ukážeme, jak vytvořit a načíst všechny podrobnosti, které potřebujete, a jak získat přístup k rozhraní API pomocí ukázkové aplikace.

Požadavky

Než připojíte aplikaci, musíte mít rozhraní API pro GraphQL v prostředcích infrastruktury. Další informace najdete v tématu Vytvoření rozhraní API pro GraphQL v prostředcích infrastruktury a přidání dat.
V současné době rozhraní API pro GraphQL vyžaduje, aby aplikace k ověřování používaly Microsoft Entra. Aplikace musí být zaregistrovaná a nakonfigurovaná adekvátně, aby prováděla volání rozhraní API proti prostředkům infrastruktury. Další informace najdete v tématu Vytvoření aplikace Microsoft Entra v Azure.
Ověřené přihlašovací údaje (uživatelský objekt zásady, servisní objekt zásady nebo spravovaná identita) volající rozhraní API vyžadují oprávnění ke spuštění rozhraní GraphQL API (volba Spustit dotazy a mutace při přidávání oprávnění přímého přístupu). Pokud je v rozhraní API použita jednotná autentizace (SSO) jako možnost připojení, jsou v příslušném zvoleném zdroji dat vyžadována oprávnění ke čtení nebo zápisu. Další informace najdete v tématu Připojení ke zdroji dat a sestavení schématu.

Vytvoření aplikace Microsoft Entra

V následujících krocích si ukážeme, jak nakonfigurovat podporu pro aplikaci ReactJS v Microsoft Entra.

Registrace aplikace pomocí kroků popsaných v Rychlém startu: Registrace aplikace na platformě Microsoft Identity Platform.
Hodnoty ID aplikace Microsoft Entra (klient) a ID adresáře (tenanta) se zobrazí v poli Souhrn. Tyto hodnoty si poznamenejte později.
V seznamu Spravovat vyberte oprávnění rozhraní API, a pak Přidat oprávnění.
Přidejte službu PowerBI, vyberte Delegovaná oprávnění a vyberte Oprávnění GraphQLApi.Execute.All . Ujistěte se, že není vyžadován souhlas správce.
Zpět do seznamu Spravovat vyberte Možnost Přidat>platformu, >jednostrákovou aplikaci.
Pro účely místního vývoje přidejte http://localhost:3000 do identifikátorů URI přesměrování a ověřte, že je aplikace povolená pro tok autorizačního kódu s ověřovacím klíčem pro exchange kódu (PKCE). Výběrem tlačítka Konfigurovat uložte provedené změny. V případě, že aplikace obdrží chybu související s požadavky mezi zdroji, přidejte platformu mobilních a desktopových aplikací v předchozím kroku se stejným identifikátorem URI přesměrování.
Zpět na Ověřování, sjeďte dolů na Rozšířené nastavení a v části Povolení veřejných klientských tokůzaškrtněte Ano u Povolit následující mobilní a desktopové toky.

Nastavení ukázkového rozhraní GraphQL API pro přístup k aplikacím

V tomto příkladu vytvoříme rozhraní GraphQL API pro zveřejnění ukázkových dat Lakehouse klientům.

Na domovské stránce portálu Fabric vyberte Datoví technici ze seznamu úloh.
V prostředí Datoví technici vyberte Použít ukázku a v části Lakehouse vyberte Veřejné svátky, aby se automaticky vytvořil nový lakehouse s daty o státních svátcích.
Podle kroků v části Vytvoření rozhraní API pro GraphQL vytvořte nové rozhraní GraphQL API a vyberte Lakehouse, které jste vytvořili. Přidejte tabulku svátků, abyste klientům umožnili přístup k datům.

Otestujte rozhraní GraphQL API v editoru rozhraní API pomocí následujícího ukázkového dotazu. Jedná se o stejný dotaz, který používáme v klientské aplikaci 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
     }
   }
 }

Na panelu nástrojů položky rozhraní API vyberte Kopírovat koncový bod .
Na obrazovce Kopírovat odkaz vyberte Kopírovat.
Jako ID klienta a ID tenanta z aplikace Microsoft Entra zaznamenané dříve zkopírujte identifikátor URI koncového bodu, protože se vyžaduje později.

Konfigurace aplikace React pro přístup k rozhraní API svátků

Poznámka:

Pokud chcete přeskočit další ruční kroky, můžete naklonovat úložiště GitHub s kompletní aplikací a po provedení kroku 3 přidat konkrétní podrobnosti o koncovém bodu GraphQL a ID Microsoft Entra.

Jako výchozí bod používáme existující aplikaci React. Postupujte podle všech kroků v kurzu Vytvoření jednostrákové aplikace React a připravte ji na ověření a vytvořte projekt React s již nakonfigurovaným ověřováním Microsoft Entra, včetně dalších souborů a složek potřebných k přidání do struktury projektu. Abychom aplikaci přizpůsobili našemu případu použití GraphQL, potřebujeme změnit jenom tři soubory.

Ve složce src otevřete soubor authConfig.js a nahraďte obsah souboru následujícím fragmentem kódu:

 /*
  * 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: 
  * https://docs.microsoft.com/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 vidíte v kódu výše, je důležité pro přístup k aplikaci použít správný obor. V našem případě https://analysis.windows.net/powerbi/api/GraphQLApi.Execute.All.

Nahraďte následující hodnoty hodnotami z Centra pro správu Microsoft Entra.
- clientId – Identifikátor aplikace, označovaný také jako klient. Nahraďte Enter_the_Application_Id_Here hodnotou ID aplikace (klienta), která byla zaznamenána dříve ze stránky přehledu registrované aplikace Microsoft Entra.
- authority - Skládá se ze dvou částí:
  - Instance je koncový bod poskytovatele cloudu. Zkontrolujte různé dostupné koncové body v národních cloudech.
  - ID tenanta je identifikátor tenanta, ve kterém je aplikace zaregistrovaná. Nahraďte Enter_the_Tenant_Info_Herehodnotou ID adresáře (tenanta), která byla zaznamenána dříve ze stránky přehledu registrované aplikace.
- graphQLEndpoint – Rozhraní API fabric pro koncový bod GraphQL. Nahraďte Enter_the_GraphQL_Endpoint_Here koncovým bodem rozhraní GraphQL API zaznamenaným dříve.
Uložte soubor.

Ve stejné složce src otevřete soubor App.js a nahraďte obsah souboru následujícím fragmentem kódu:

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

Uložte soubor.

Nakonec ve složce src/components otevřete soubor ProfileData.jsx a nahraďte jeho obsah následujícím fragmentem kódu:

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

Uložte všechny změny souboru.
Ve zvolené terminálové aplikaci přejděte do kořenové složky projektu React a spusťte příkaz npm start , který aplikaci otestuje místně.
Jakmile se aplikace načte v prohlížeči http://localhost:3000, postupujte podle kroků v poslední části kurzu Volání rozhraní API z aplikace k ověření.
Po přihlášení klikněte na tlačítko Query Fabric API for GraphQL Data.
Úspěšný ověřený požadavek na rozhraní GraphQL API v prostředcích infrastruktury vrátí data z dotazu GraphQL do Lakehouse v klientské aplikaci React:

Další jazyky

Najděte ukázky jazyka C#, Python a další jazyky pro připojení k rozhraní GraphQL API v úložišti Microsoft Fabric Samples Na GitHubu.

Sdílet prostřednictvím

Připojení aplikací k rozhraní FABRIC API pro GraphQL

Požadavky

Vytvoření aplikace Microsoft Entra

Nastavení ukázkového rozhraní GraphQL API pro přístup k aplikacím

Konfigurace aplikace React pro přístup k rozhraní API svátků

Další jazyky

Související obsah

Váš názor

Další materiály