Ansluta program till Fabric API för GraphQL

2025-07-02

För att ansluta ett program till ett API för GraphQL behöver du tre viktiga uppgifter: ett klient-ID, ditt klient-ID och din GraphQL-slutpunktsadress i Fabric. I följande avsnitt visar vi hur du skapar och hämtar all information du behöver och hur du kommer åt ditt API med hjälp av ett React-exempelprogram.

Andra språk

Den här självstudien beskriver steg för steg hur du ansluter ett React-exempelprogram till Fabric API för GraphQL, men du hittar C#, Python och andra språkexempel i GitHub-lagringsplatsen Microsoft Fabric Samples.

Förutsättningar

Innan du ansluter ett program måste du ha ett API för GraphQL i Fabric. Mer information finns i Skapa ett API för GraphQL i Infrastrukturresurser och lägga till data.
För närvarande kräver API för GraphQL att program använder Microsoft Entra för autentisering. Ditt program måste vara registrerat och konfigurerat på ett lämpligt sätt för att utföra API-anrop mot Fabric. Mer information finns i Skapa en Microsoft Entra-app i Azure.
Autentiserade autentiseringsuppgifter (användarens huvudnamn, tjänstens huvudnamn eller hanterade identitet) som anropar API:et kräver Kör-behörigheter till GraphQL-API:et (alternativet Kör frågor och mutationer när du lägger till behörigheter för direkt åtkomst) och, om du använder enkel inloggning (SSO) som anslutningsalternativ i API:et, krävs läs- eller skrivbehörigheter i den datakälla som du väljer i enlighet med detta. Mer information finns i Anslut till en datakälla och skapa ditt schema.

Skapa en Microsoft Entra-app

I följande steg visar vi hur du konfigurerar stöd för ett ReactJS-program i Microsoft Entra.

Registrera ett program med hjälp av stegen som beskrivs i snabbstarten : Registrera ett program med Microsofts identitetsplattform.
Dina ID-värden för Microsoft Entra-appprogram (klient) och katalog-ID (klientorganisation) visas i rutan Sammanfattning. Registrera dessa värden när de krävs senare.
I listan Hantera väljer du API-behörigheteroch sedan Lägg till behörighet.
Lägg till PowerBI-tjänsten, välj Delegerade behörigheter och välj GraphQLApi.Execute.All-behörigheter . Kontrollera att administratörsmedgivande inte krävs.
Gå tillbaka till listan Hantera och välj Autentisering>Lägg till ett plattformsprogram> med en sida.
För lokal utveckling lägger du till http://localhost:3000 under Omdirigerings-URI:er och bekräftar att programmet är aktiverat för auktoriseringskodflödet med Proof Key for Code Exchange (PKCE). Välj knappen Konfigurera för att spara ändringarna. Om programmet får ett fel som rör begäranden mellan ursprung lägger du till plattformen för mobil- och skrivbordsprogram i föregående steg med samma omdirigerings-URI.
Tillbaka till Authenticationrullar du ned till Avancerade inställningar och under Tillåt offentliga klientflödenväljer du Ja för Aktivera följande mobil- och skrivbordsflöden.

Konfigurera ett GraphQL-exempel-API för programåtkomst

I det här exemplet skapar vi ett GraphQL-API för att exponera Lakehouse-exempeldata för klienter.

På startsidan för Infrastrukturportalen väljer du Dataingenjör ing i listan över arbetsbelastningar.
I Dataingenjör väljer du Använd ett exempel och under Lakehouse väljer du Helgdagar för att automatiskt skapa ett nytt Lakehouse med data om helgdagar.
Följ stegen från Skapa ett API för GraphQL, skapa ett nytt GraphQL-API och välj det Lakehouse som du skapade. Lägg till tabellen för helgdagar för att låta klienterna komma åt dessa data.

Testa GraphQL-API:et i API-redigeraren med hjälp av följande exempelfråga. Det är samma fråga som vi använder i vårt React-klientprogram:

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

Välj Kopiera slutpunkt i API-objektets verktygsfält.
På skärmen Kopiera länk väljer du Kopiera.
Som klient-IDoch klient-ID från Microsoft Entra-appen registrerades tidigare kopierar du slutpunkts-URI:n efter behov senare.

Konfigurera en React-app för åtkomst till API:et för helgdagar

Anmärkning

Om du föredrar att hoppa över följande manuella steg kan du klona GitHub-lagringsplatsen med hela programmet. Följ steg 3 för att lägga till specifik information om din GraphQL-slutpunkt och ID:t som hämtats från Microsoft Entra till filen authConfig.js, installera beroenden med npm install och gå vidare till steg 9 för att fortsätta med att testa programkörningen.

Vi använder en befintlig React-app som utgångspunkt. Följ alla steg i självstudien Skapa ett React-ensidesprogram och förbered det för autentisering för att skapa ett React-projekt med Microsoft Entra-autentisering som redan har konfigurerats, inklusive ytterligare filer och mappar som krävs för att läggas till i projektstrukturen. Vi behöver bara ändra tre filer för att anpassa appen för vårt GraphQL-användningsfall.

src Öppna filen i mappen authConfig.js och ersätt innehållet i filen med följande kodfragment:

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

Som du ser i koden ovan är det viktigt att använda rätt omfång för att få åtkomst till programmet. I vårt fall https://analysis.windows.net/powerbi/api/GraphQLApi.Execute.All.

Ersätt följande värden med värdena från administrationscentret för Microsoft Entra.
- clientId - Identifieraren för programmet, även kallad klienten. Ersätt Enter_the_Application_Id_Here med det program-ID-värde (klient) som registrerades tidigare från översiktssidan för det registrerade Microsoft Entra-programmet.
- authority - Detta består av två delar:
  - Instansen är slutpunkten för molnleverantören. Kontrollera med de olika tillgängliga slutpunkterna i nationella moln.
  - Klientorganisations-ID:t är identifieraren för den klientorganisation där programmet är registrerat. Ersätt Enter_the_Tenant_Info_Here med värdet Directory (tenant) ID som registrerades tidigare från översiktssidan för det registrerade programmet.
- graphQLEndpoint – Fabric-API:et för GraphQL-slutpunkten. Ersätt Enter_the_GraphQL_Endpoint_Here med GraphQL API-slutpunkten som registrerades tidigare.
Spara filen.

Öppna filen i samma src mapp App.js och ersätt innehållet i filen med följande kodfragment:

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

Spara filen.

src/components Under mappen öppnar ProfileData.jsx du slutligen filen och ersätter innehållet i filen med följande kodfragment:

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

Spara alla filändringar.
I valfritt terminalprogram går du till rotmappen för React-projektet och kör kommandot npm start för att testa programmet lokalt.
När programmet har lästs in i webbläsaren från http://localhost:3000följer du stegen i den sista delen av självstudien Anropa API:et från programmet för att autentisera.
När du har loggat in klickar du på knappen Query Fabric API for GraphQL Data (Fråga infrastrukturresurs-API för GraphQL-data).
En lyckad autentiserad begäran till GraphQL API i Fabric returnerar data från GraphQL-frågan till Lakehouse i vårt React-klientprogram:

Dela via

Ansluta program till Fabric API för GraphQL

Andra språk

Förutsättningar

Skapa en Microsoft Entra-app

Konfigurera ett GraphQL-exempel-API för programåtkomst

Konfigurera en React-app för åtkomst till API:et för helgdagar

Relaterat innehåll

Feedback

Ytterligare resurser