Toepassingen verbinden met Fabric-API voor GraphQL

2025-06-10

Als u een toepassing wilt verbinden met een API voor GraphQL, hebt u drie belangrijke informatie nodig: een client-id, uw tenant-id en het GraphQL-eindpuntadres in Fabric. In de volgende secties laten we zien hoe u alle details kunt maken en ophalen die u nodig hebt en hoe u toegang krijgt tot uw API met behulp van een voorbeeldtoepassing.

Vereisten

Voordat u een toepassing verbindt, moet u een API voor GraphQL in Fabric hebben. Zie Een API voor GraphQL maken in Fabric en gegevens toevoegen voor meer informatie.
Op dit moment is voor API voor GraphQL vereist dat toepassingen Microsoft Entra gebruiken voor verificatie. Uw toepassing moet voldoende zijn geregistreerd en geconfigureerd om API-aanroepen uit te voeren op Fabric. Zie Een Microsoft Entra-app maken in Azure voor meer informatie.
Voor de geverifieerde referenties (gebruikers-principal, service-principal of beheerde identiteit) die de API oproepen, zijn execute-machtigingen vereist voor de GraphQL-API (optie Query's en Mutaties uitvoeren bij het toevoegen van machtigingen voor directe toegang) en, als u eenmalige aanmelding (SSO) gebruikt als verbindingsoptie in de API, zijn lees- en/of schrijfmachtigingen in de gekozen gegevensbron vereist. Zie Verbinding maken met een gegevensbron en uw schemabouwen voor meer informatie.

Een Microsoft Entra-app maken

In de volgende stappen laten we zien hoe u ondersteuning configureert voor een ReactJS-toepassing in Microsoft Entra.

Registreer een toepassing met behulp van de stappen die worden beschreven in Quickstart: Een toepassing registreren bij het Microsoft Identity Platform.
De id-waarden van uw Microsoft Entra-apptoepassing (client) en directory-id (tenant) worden weergegeven in het vak Samenvatting. Noteer deze waarden zoals ze later nodig zijn.
Onder de lijst Beheren, selecteer API-machtigingenen vervolgens Machtiging toevoegen.
Voeg de PowerBI-service toe, selecteer Gedelegeerde machtigingen en selecteer GraphQLApi.Execute.All-machtigingen . Zorg ervoor dat beheerderstoestemming niet is vereist.
Ga terug naar de lijst Beheren, selecteer toevoegen, > één pagina.
Voeg voor lokale ontwikkelingsdoeleinden onder http://localhost:3000 toe en controleer of de toepassing is ingeschakeld voor de autorisatiecodestroom met Proof Key for Code Exchange (PKCE). Selecteer de knop Configureren om uw wijzigingen op te slaan. Als de toepassing een fout ontvangt met betrekking tot cross-origin-aanvragen, voegt u het platform voor mobiele toepassingen en desktoptoepassingen toe in de vorige stap met dezelfde omleidings-URI.
Ga terug naar verificatie, schuif omlaag naar geavanceerde instellingen en selecteer onder Toestaan van openbare clientstromen, Ja voor inschakelen van de volgende mobiele en desktopstromen.

Een GraphQL-voorbeeld-API instellen voor toegang tot toepassingen

In dit voorbeeld maken we een GraphQL-API om voorbeeldgegevens van Lakehouse beschikbaar te maken voor clients.

Selecteer op de startpagina van de Fabric-portal Data-engineer ing in de lijst met workloads.
Selecteer in de Data-engineer-ervaring Een voorbeeld gebruiken en selecteer onder Lakehouse openbare feestdagen om automatisch een nieuw Lakehouse te maken met gegevens over openbare feestdagen.
Volg de stappen van Een API voor GraphQL maken, maak een nieuwe GraphQL-API en selecteer het Lakehouse dat u hebt gemaakt. Voeg de tabel openbare feestdagen toe om de clients toegang te geven tot deze gegevens.

Test de GraphQL-API in de API-editor met behulp van de volgende voorbeeldquery. Dit is dezelfde query die we gebruiken in onze React-clienttoepassing:

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

Selecteer Eindpunt kopiëren op de werkbalk van het API-item.
Selecteer Kopiëren in hetscherm Koppeling kopiëren.
Als de client-id en tenant-id van de Microsoft Entra-app die eerder zijn vastgelegd, kopieert u de eindpunt-URI zoals deze later is vereist.

Een React-app configureren voor toegang tot de API voor openbare feestdagen

Opmerking

Als u liever de volgende handmatige stappen overslaat, kunt u de GitHub-opslagplaats klonen met de volledige toepassing, na stap 3 om specifieke details over uw GraphQL-eindpunt en Microsoft Entra-id's toe te voegen.

We gebruiken een bestaande React-app als uitgangspunt. Volg alle stappen in de zelfstudie Een React-toepassing met één pagina maken en bereid deze voor op verificatie om een React-project te maken met Microsoft Entra-verificatie die al is geconfigureerd, inclusief aanvullende bestanden en mappen die moeten worden toegevoegd aan de projectstructuur. We hoeven slechts drie bestanden te wijzigen om de app aan te passen voor onze GraphQL-use-case.

Open in de src-map het authConfig.js-bestand en vervang de inhoud van het bestand door het volgende codefragment:

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

Zoals u in de bovenstaande code kunt zien, is het belangrijk dat u het juiste bereik gebruikt om toegang te krijgen tot de toepassing. In ons geval https://analysis.windows.net/powerbi/api/GraphQLApi.Execute.All.

Vervang de volgende waarden door de waarden uit het Microsoft Entra-beheercentrum.
- clientId - De id van de toepassing, ook wel de client genoemd. Vervang Enter_the_Application_Id_Here door de waarde van de toepassings-id (client) die eerder is vastgelegd op de overzichtspagina van de geregistreerde Microsoft Entra-toepassing.
- authority - Dit bestaat uit twee delen:
  - Het exemplaar is het eindpunt van de cloudprovider. Neem contact op met de verschillende beschikbare eindpunten in nationale clouds.
  - De tenant-id is de id van de tenant waar de toepassing is geregistreerd. Vervang Enter_the_Tenant_Info_Here door de id-waarde van de map (tenant) die eerder is vastgelegd op de overzichtspagina van de geregistreerde toepassing.
- graphQLEndpoint - De Fabric-API voor GraphQL-eindpunt. Vervang door Enter_the_GraphQL_Endpoint_Here het GraphQL API-eindpunt dat eerder is vastgelegd.
Sla het bestand op.

Open in dezelfde src-map het App.js-bestand en vervang de inhoud van het bestand door het volgende codefragment:

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

Sla het bestand op.

Open ten slotte onder de map src/components het bestand ProfileData.jsx en vervang de inhoud van het bestand door het volgende codefragment:

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

Sla alle bestandswijzigingen op.
Ga in uw terminaltoepassing naar keuze naar de hoofdmap van het React-project en voer de opdracht npm start uit om de toepassing lokaal te testen.
Zodra de toepassing in uw browser is http://localhost:3000geladen, volgt u de stappen in het laatste deel van de zelfstudie De API aanroepen vanuit de toepassing om te verifiëren.
Nadat u zich hebt aangemeld, klikt u op de knop Query Fabric-API voor GraphQL-gegevens.
Een geslaagde geverifieerde aanvraag voor de GraphQL-API in Fabric retourneert de gegevens van GraphQL-query naar lakehouse in onze React-clienttoepassing:

Andere talen

Zoek C#, Python en andere taalvoorbeelden om verbinding te maken met uw GraphQL-API in de GitHub-opslagplaats microsoft Fabric Samples.

Delen via

Toepassingen verbinden met Fabric-API voor GraphQL

Vereisten

Een Microsoft Entra-app maken

Een GraphQL-voorbeeld-API instellen voor toegang tot toepassingen

Een React-app configureren voor toegang tot de API voor openbare feestdagen

Andere talen

Gerelateerde inhoud

Feedback

Aanvullende resources