Pripojenie aplikácií k databáze API služby Fabric pre GraphQL

Ak chcete pripojiť aplikáciu k rozhraniu API pre GraphQL, potrebujete tri kľúčové podrobnosti: ID klienta, ID nájomníka a adresu koncového bodu GraphQL v službe Fabric. Nasledujúce časti vysvetľujú, ako vytvoriť a načítať požadované podrobnosti a získať prístup k rozhraniu API pomocou ukážkovej aplikácie React.

Iné jazyky

Tento kurz vysvetľuje, ako pripojiť ukážkovú aplikáciu React k rozhraniu Fabric API pre GraphQL. Ukážky jazykov C#, Python a ďalších jazykov nájdete v odkladacom priestore GitHub ukážok Microsoft Fabric.

Požiadavky

Pred pripojením aplikácie sa uistite, že máte rozhranie API pre GraphQL v štruktúre. Ďalšie informácie nájdete v téme Vytvorenie rozhrania API pre GraphQL v službe Fabric a pridanie údajov.
Rozhranie API pre GraphQL vyžaduje, aby aplikácie používali na overovanie Microsoft Entra. Zaregistrujte a nakonfigurujte svoju aplikáciu na vykonávanie volaní rozhrania API v službe Fabric. Ďalšie informácie nájdete v téme Vytvorenie aplikácie Microsoft Entra v službe Azure.
Overené poverenia (objekt používateľa, objekt služby alebo spravovaná identita), ktoré volajú rozhranie API, potrebujú povolenia na spustenie pre rozhranie API GraphQL (možnosť Spustiť dotazy a mutácie pri pridávaní povolení na priamy prístup). Ak používate jediné prihlásenie (SSO) ako možnosť pripojenia v rozhraní API, uistite sa, že poverenia majú povolenia na čítanie alebo zápis vo vybratom zdroji údajov. Ďalšie informácie nájdete Pripojenie k zdroju údajov a vytvorenie schémy.

Vytvorenie aplikácie Microsoft Entra

Nasledujúce kroky vysvetľujú, ako nakonfigurovať podporu pre aplikáciu ReactJS v Microsoft Entra.

Registrácia aplikácie pomocou krokov opísaných v téme Stručný návod: Registrácia aplikácie pomocou platformy identity spoločnosti Microsoft.
Hodnoty ID aplikácie (klienta) aplikácie Microsoft Entra a ID adresára (nájomníka) sa zobrazia v poli Súhrn. Tieto hodnoty si zaznamenajte, pretože sú potrebné neskôr.
V zozname Spravovať vyberte povolenia rozhrania APIa potom Pridať povolenie.
Pridajte službu PowerBI, vyberte položku Delegované povolenia a potom vyberte GraphQLApi.Execute.All permissions. Skontrolujte, či sa nevyžaduje súhlas správcu.
Vráťte sa do zoznamu Spravovať a vyberte položku Overenie>Pridajte platformu>Jednostránková aplikácia.
Na lokálne účely vývoja pridajte do http://localhost:3000 časti Identifikátory URI presmerovania a potvrďte, že je aplikácia povolená pre postup kódu oprávnenia s overeným kľúčom pre Exchange kódov (PKCE). Ak chcete zmeny uložiť, vyberte tlačidlo Konfigurovať. Ak aplikácia narazí na chybu súvisiacu s požiadavkami medzi zdrojmi, pridajte platformu mobilných a desktopových aplikácií v predchádzajúcom kroku s rovnakým identifikátorom URI presmerovania.
Späť na overovania , prejdite nadol na rozšírené nastavenia a v časti Povoliťverejné klientske postupy vyberte položku Áno pre Povoliť nasledujúce mobilné postupy a postupy pracovnej plochy.

Nastavenie vzorového rozhrania GraphQL API na prístup k aplikácii

V tomto príklade vytvoríme rozhranie API GraphQL, ktoré bude klientom sprístupniť vzorové údaje lakehouse.

Na domovskej stránke portálu služby Fabric vyberte v zozname vyťažení položku Dátový inžinier ing (vyťaženia).
V prostredí dátového inžinierstva vyberte položku Použiť ukážku a v časti Lakehouse vyberte položku Štátne sviatky , aby sa automaticky vytvoril nový Lakehouse s údajmi o štátnych sviatkoch.
Postupujte podľa krokov v časti Vytvorenie rozhrania API pre GraphQL , vytvorte nové rozhranie GraphQL API a vyberte Lakehouse, ktorý ste vytvorili. Pridajte tabuľku štátnych sviatkov, aby klienti mali prístup k týmto údajom.

Testovanie rozhrania GraphQL API v editore rozhrania API pomocou nasledujúceho vzorového dotazu. Je to rovnaký dotaz, aký sa používa v klientskej aplikácii 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 paneli s nástrojmi položky rozhrania API vyberte položku Kopírovať koncový bod .
Na obrazovke Kopírovať prepojenie vyberte položku Kopírovať.
Použite ID klienta a ID nájomníka z aplikácie Microsoft Entra zaznamenanej predtým a skopírujte identifikátor URI koncového bodu, pretože sa vyžaduje neskôr.

Konfigurácia aplikácie React na prístup k API pre sviatky

Poznámka

Ak chcete vynechať nasledujúce manuálne kroky, odkladací priestor GitHub môžete naklonovať pomocou kompletnej aplikácie. Postupujte podľa kroku č. 3 a pridajte do súboru konkrétne podrobnosti o koncovom bode GraphQL a ID načítaných zo služby Microsoft Entra do súboru, nainštalujte si závislosti do authConfig.js súboru npm installa prejdite na krok 9 a pokračujte testovaním spúšťania aplikácie.

Ako východiskový bod použite existujúcu aplikáciu React. Postupujte podľa krokov v kurze Vytvorenie jednostránkovej aplikácie React a jej príprava na autentifikáciu , aby ste vytvorili projekt React s nakonfigurovanou autentifikáciou Microsoft Entra vrátane požadovaných súborov a priečinkov pridaných do štruktúry projektu. Zmeňte tri súbory a prispôsobte aplikáciu pre prípad použitia GraphQL.

V priečinku src otvorte authConfig.js súbor a nahraďte obsah súboru nasledujúcim úryvkom 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",
};

Ako môžete vidieť v kóde uvedenom vyššie, je dôležité použiť správny rozsah na prístup k aplikácii. V našom prípade https://analysis.windows.net/powerbi/api/GraphQLApi.Execute.All...

Nahraďte nasledujúce hodnoty hodnotami z Centra spravovania služby Microsoft Entra.
- clientId – identifikátor aplikácie, označovaný aj ako klient. Nahraďte Enter_the_Application_Id_Here hodnotou ID aplikácie (klienta), ktorá bola zaznamenaná predtým zo stránky prehľadu registrovanej aplikácie Microsoft Entra.
- autorita – pozostáva z dvoch častí:
  - Inštancia je koncový bod poskytovateľa cloudu. Informujte sa o rôznych dostupných koncových bodoch v národných cloudoch.
  - ID nájomníka je identifikátor nájomníka, v ktorom je aplikácia zaregistrovaná. Nahraďte Enter_the_Tenant_Info_Here hodnotou ID adresára (nájomníka), ktorá bola zaznamenaná skôr zo stránky prehľadu registrovanej aplikácie.
- graphQLEndpoint – rozhranie API prostriedkov pre koncový bod GraphQL. Nahraďte Enter_the_GraphQL_Endpoint_Here koncovým bodom rozhrania GraphQL API zaznamenaným skôr.
Uložte súbor.

V tom istom src priečinku App.js otvorte súbor a nahraďte obsah súboru nasledujúcim úryvkom 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 súbor.

Nakoniec pod priečinkom src/components otvorte ProfileData.jsx súbor a nahraďte obsah súboru nasledujúcim úryvkom 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šetky zmeny súboru.
V terminálovej aplikácii prejdite do koreňového priečinka projektu React a spustite príkaz npm start na lokálne otestovanie aplikácie.
Po načítaní aplikácie do prehliadača z http://localhost:3000, postupujte podľa krokov v poslednej časti kurzu Zavolajte rozhranie API z aplikácie.
Po prihlásení vyberte na tlačidle Query Fabric API pre údaje GraphQL.
Úspešná overená požiadavka na rozhranie GraphQL API v službe Fabric vráti údaje z dotazu GraphQL do Lakehouse v klientskej aplikácii React:

Zistite, ako vytvoriť aplikáciu Microsoft Entra v Azure.
Naučte sa, ako vytvoriť rozhranie API pre GraphQL v službe Fabric a pridať údaje.
Naučte sa, ako vytvoriť jednostránkovú aplikáciu React a pripraviť ju na autentifikáciu.
Naučte sa, ako dotazovať viaceré zdroje údajov v rozhraní Fabric API pre GraphQL.
Preskúmajte odkladací priestor GitHub pomocou ukážkovej aplikácie React.

Spätná väzba

Bola táto stránka užitočná?

Last updated on 2025-08-22