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

Pokud chcete připojit aplikaci k rozhraní API pro GraphQL, potřebujete tři klíčové podrobnosti: ID klienta, ID tenanta a adresu koncového bodu GraphQL ve Fabric. Následující části vysvětlují, jak vytvořit a načíst požadované podrobnosti a získat přístup k rozhraní API pomocí ukázkové aplikace React.

Další jazyky

Tento kurz vysvětluje, jak připojit ukázkovou aplikaci React k rozhraní API Fabric pro GraphQL. Ukázky jazyka C#, Python a dalšího jazyka najdete v úložišti Microsoft Fabric Samples Na GitHubu.

Požadavky

Před připojením aplikace se ujistěte, že máte API pro GraphQL ve Fabric. Další informace najdete v tématu Vytvoření rozhraní API pro GraphQL v prostředcích infrastruktury a přidání dat.
Rozhraní API pro GraphQL vyžaduje, aby aplikace k ověřování používaly Microsoft Entra. Zaregistrujte a nakonfigurujte aplikaci tak, aby prováděla volání rozhraní API pro Fabric. Další informace najdete v tématu Vytvoření aplikace Microsoft Entra v Azure.
Ověřené přihlašovací údaje (uživatelský účelový objekt, účelový objekt služby nebo spravovaná identita) volající rozhraní API potřebují oprávnění Execute pro rozhraní GraphQL API (volba Spustit dotazy a změny při přidávání přímých přístupových oprávnění). Pokud jako možnost připojení v rozhraní API používáte jednotné přihlašování, ujistěte se, že přihlašovací údaje mají ve zvoleném zdroji dat 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

Následující kroky vysvětlují, 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. Poznamenejte si tyto hodnoty, protože je budete potřebovat 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 . Ověřte, že souhlas správce není povinný.
Vraťte se do seznamu Spravovat a vyberte Ověřování>Přidat platformu>jednostránkovou 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. Pokud aplikace narazí na chybu související s požadavky mezi různými zdroji, přidejte platformu mobilních a desktopových aplikací v předchozím kroku se stejnou URI adresou 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í pro přípravu dat vyberte Použít ukázku a v části Lakehouse vyberte Státní svátky, aby se automaticky vytvořil nový Lakehouse s daty svátků.
Podle pokynů v tématu Vytvoření rozhraní API pro GraphQL vytvořte nové GraphQL rozhraní API a vyberte Lakehouse, který jste vytvořili. Přidejte tabulku svátků, aby klienti mohli k datům přistupovat.

Otestujte rozhraní GraphQL API v editoru rozhraní API pomocí následujícího ukázkového dotazu. Jedná se o stejný dotaz použitý 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.
Použijte ID klienta a ID tenanta z aplikace Microsoft Entra zaznamenané dříve a 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 následující ruční kroky, můžete naklonovat úložiště GitHub s kompletní aplikací. Podle kroku 3 přidejte konkrétní podrobnosti o koncovém bodu GraphQL a ID načtených z Microsoft Entra do souboru authConfig.js, nainstalujte závislosti pomocí npm install a přeskočte ke kroku 9, abyste pokračovali testováním provádění aplikace.

Jako výchozí bod použijte existující aplikaci React. Postupujte podle kroků v kurzu Vytvoření jednostrákové aplikace React a připravte ji na ověření a vytvořte projekt React s nakonfigurovaným ověřováním Microsoft Entra, včetně požadovaných souborů a složek přidaných do struktury projektu. Změňte tři soubory, aby se aplikace přizpůsobila případu použití GraphQL.

src Ve složce otevřete authConfig.js soubor a nahraďte jeho obsah 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: 
 * [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 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.
- autorita - 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_Here hodnotou 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é src složce otevřete App.js soubor a nahraďte jeho obsah 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 src/components složce otevřete ProfileData.jsx soubor 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>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>
)};

Uložte všechny změny souboru.
V terminálové aplikaci přejděte do kořenové složky projektu React a spusťte příkaz npm start pro místní otestování aplikace.
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.
Po přihlášení vyberte na tlačítku Query Fabric API for GraphQL Data.
Úspěšný ověřený požadavek na rozhraní GraphQL API ve Fabric vrátí data z dotazu GraphQL pro Lakehouse v klientské aplikaci React.

Zjistěte, jak vytvořit aplikaci Microsoft Entra v Azure.
Zjistěte, jak vytvořit rozhraní API pro GraphQL v prostředí Fabric a přidat data.
Zjistěte, jak vytvořit jednostrákovou aplikaci React a připravit ji na ověřování.
Zjistěte, jak dotazovat více zdrojů dat v rozhraní Fabric API pro GraphQL.
Prozkoumejte úložiště GitHub pomocí ukázkové aplikace React.

Váš názor

Byla tato stránka užitečná?

Last updated on 2025-08-22