Verbinden von Anwendungen mit der Fabric-API für GraphQL

2025-06-10

Um eine Anwendung mit einer API für GraphQL zu verbinden, benötigen Sie drei wichtige Informationen: eine Client-ID, Ihre Mandanten-ID und Ihre GraphQL-Endpunktadresse in Fabric. In den folgenden Abschnitten wird gezeigt, wie Sie alle benötigten Details erstellen und abrufen und wie Sie mit einer Beispielanwendung auf Ihre API zugreifen.

Voraussetzungen

Bevor Sie eine Anwendung verbinden können, müssen Sie eine API für GraphQL in Fabric erstellen. Weitere Informationen finden Sie unter Erstellen einer API für GraphQL in Fabric und Hinzufügen von Daten.
Derzeit erfordert eine API für GraphQL, dass Anwendungen für die Authentifizierung Microsoft Entra verwenden. Ihre Anwendung muss registriert und entsprechend konfiguriert werden, um API-Aufrufe in Fabric auszuführen. Weitere Informationen finden Sie unter Erstellen einer Microsoft Entra-App in Azure.
Die authentifizierten Anmeldeinformationen (Benutzerprinzipal, Dienstprinzipal oder verwaltete Identität), die die API aufrufen, benötigen Execute-Berechtigungen für die GraphQL-API (Option "Abfragen und Mutationen ausführen" beim Hinzufügen direkter Zugriffsberechtigungen). Wenn als Konnektivitätsoption in der API das einmalige Anmelden (Single Sign-On, SSO) verwendet wird, sind entsprechend Lese- oder Schreibberechtigungen in der jeweils gewählten Datenquelle erforderlich. Weitere Informationen finden Sie unter Herstellen einer Verbindung mit einer Datenquelle und Erstellen Ihres Schemas.

Erstellen einer Microsoft Entra-App

In den folgenden Schritten wird gezeigt, wie die Unterstützung für eine ReactJS-Anwendung in Microsoft Entra konfiguriert wird.

Registrieren Sie eine Anwendung mithilfe der schritte, die unter Schnellstart beschrieben werden: Registrieren Sie eine Anwendung bei der Microsoft Identity Platform.
Die Werte App-ID (Client-ID) und Verzeichnis-ID (Mandanten-ID) Ihrer Microsoft Entra-App werden im Feld „Zusammenfassung“ angezeigt. Notieren Sie diese Werte, da sie später erforderlich sind.
Wählen Sie in der Liste Verwalten die Option API-Berechtigungen und dann Berechtigung hinzufügen aus.
Fügen Sie den PowerBI-Dienst hinzu, wählen Sie delegierte Berechtigungen und dann GraphQLApi.Execute.All-Berechtigungen aus. Stellen Sie sicher, dass keine Administratoreinwilligung erforderlich ist.
Wählen Sie in der Liste Verwalten die Option Authentifizierung>Plattform hinzufügen>Single-Page-Webanwendung aus.
Fügen Sie für lokale Entwicklungszwecke http://localhost:3000 unter Umleitungs-URIs hinzu, und bestätigen Sie, dass die Anwendung für den Autorisierungscodeflow mit PKCE (Proof Key for Code Exchange, Prüfschlüssel für den Codeaustausch) aktiviert ist. Wählen Sie die Schaltfläche Konfigurieren aus, um Ihre Änderungen zu speichern. Falls die Anwendung eine Fehlermeldung im Zusammenhang mit ursprungsübergreifenden Anforderungen (Cross-Origin Requests, CORS) erhält, fügen Sie die Plattform für mobile und Desktopanwendungen im vorherigen Schritt mit demselben Umleitungs-URI hinzu.
Scrollen Sie unter Authentifizierung nach unten zu Erweiterte Einstellungen, und wählen Sie unter Öffentliche Clientflows zulassen die Option Ja für Folgende Mobilgerät- und Desktopflows aktivieren aus.

Einrichten einer GraphQL-Beispiel-API für den Anwendungszugriff

In diesem Beispiel erstellen Sie eine GraphQL-API, um Beispiel-Lakehouse-Daten für Clients verfügbar zu machen.

Wählen Sie auf der Startseite des Fabric-Portals Datentechnik aus der Liste der Workloads aus.
Wählen Sie auf der Oberfläche „Datentechnik“ die Option Beispiel verwenden und unter Lakehouse die Option Feiertage aus, um automatisch ein neues Lakehouse mit Daten zu Feiertagen zu erstellen.
Erstellen Sie mit den Schritten unter Erstellen einer API für GraphQL eine neue GraphQL-API, und wählen Sie das von Ihnen erstellte Lakehouse aus. Fügen Sie die Tabelle „Feiertage“ hinzu, damit die Clients auf diese Daten zugreifen können.

Testen Sie die GraphQL-API im API-Editor mithilfe der folgenden Beispielabfrage. Es ist die gleiche Abfrage, die Sie in der React-Clientanwendung verwenden:

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

Wählen Sie auf der Symbolleiste des API-Elements Endpunkt kopieren aus.
Wählen Sie auf dem Bildschirm Link kopieren die Option Kopieren aus.
Kopieren Sie den Endpunkt-URI (wird später benötigt) für die zuvor aufgezeichnete Client-ID und Mandanten-ID aus der Microsoft Entra-App.

Konfigurieren einer React-App für den Zugriff auf die Feiertags-API

Hinweis

Wenn Sie die nächsten manuellen Schritte überspringen möchten, können Sie das GitHub-Repository mit der vollständigen Anwendung klonen, nachdem Sie schritt 3 ausgeführt haben, um bestimmte Details zu Ihrem GraphQL-Endpunkt und Microsoft Entra-IDs hinzuzufügen.

Sie verwenden als Ausgangspunkt eine vorhandene React-App. Führen Sie alle Schritte im Tutorial Erstellen einer React-SPA und Vorbereiten der Anwendung für die Authentifizierung aus, um ein React-Projekt mit bereits konfigurierter Microsoft Entra-Authentifizierung zu erstellen, einschließlich zusätzlicher Dateien und Ordner, die der Projektstruktur hinzugefügt werden müssen. Sie müssen nur drei Dateien ändern, um die App an Ihren GraphQL-Anwendungsfall anzupassen.

Öffnen Sie im Ordner src die Datei authConfig.js, und ersetzen Sie den Inhalt der Datei durch den folgenden Codeschnipsel:

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

Wie Sie im obigen Code sehen können, ist es wichtig, den richtigen Geltungsbereich für den Zugriff auf die Anwendung zu verwenden. In diesem Fall wird https://analysis.windows.net/powerbi/api/GraphQLApi.Execute.All verwendet.

Ersetzen Sie die folgenden Werte durch die Werte aus dem Microsoft Entra Admin Center.
- clientId: Bezeichner der Anwendung, auch als Client bezeichnet. Ersetzen Sie Enter_the_Application_Id_Here durch den Wert der Anwendungs-ID (Client-ID), den Sie zuvor von der Übersichtsseite der registrierten Microsoft Entra-Anwendung notiert haben.
- authority: besteht aus zwei Teilen:
  - Die Instanz ist der Endpunkt des Cloudanbieters. Überprüfen Sie die verschiedenen verfügbaren Endpunkte unter Nationale Clouds.
  - Die Mandanten-ID ist der Bezeichner des Mandanten, in dem die Anwendung registriert ist. Ersetzen Sie Enter_the_Tenant_Info_Here durch den Wert der Verzeichnis-ID (Mandanten-ID), den Sie sich zuvor auf der Übersichtsseite der registrierten Anwendung notiert haben.
- graphQLEndpoint: Fabric-API für den GraphQL-Endpunkt. Ersetzen Sie Enter_the_GraphQL_Endpoint_Here durch den zuvor notierten GraphQL-API-Endpunkt.
Speichern Sie die Datei.

Öffnen Sie im Ordner src die Datei App.js, und ersetzen Sie den Inhalt der Datei durch den folgenden Codeschnipsel.

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

Speichern Sie die Datei.

Öffnen Sie im Ordner src/components die Datei ProfileData.jsx, und ersetzen Sie den Inhalt der Datei durch den folgenden Codeschnipsel:

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

Speichern Sie alle Dateiänderungen.
Wechseln Sie in Ihrer bevorzugten Terminalanwendung zum Stammordner des React-Projekts, und führen Sie den Befehl npm start aus, um die Anwendung lokal zu testen.
Nachdem die Anwendung in Ihrem Browser von http://localhost:3000 geladen wurde, führen Sie die Schritte im letzten Teil des Tutorials Aufrufen der API aus der Anwendung aus, um sich zu authentifizieren.
Wählen Sie nach der Anmeldung die Schaltfläche Fabric-API nach GraphQL-Daten abfragen aus.
Eine erfolgreich authentifizierte Anforderung an die GraphQL-API in Fabric gibt die Daten aus der GraphQL-Abfrage an das Lakehouse in Ihrer React-Clientanwendung zurück:

Andere Sprachen

Beispiele für das Herstellen einer Verbindung mit einer GraphQL-API in C#, Python und anderen Programmiersprachen finden Sie im GitHub-Repository mit Microsoft Fabric-Beispielen.

Freigeben über

Verbinden von Anwendungen mit der Fabric-API für GraphQL

Voraussetzungen

Erstellen einer Microsoft Entra-App

Einrichten einer GraphQL-Beispiel-API für den Anwendungszugriff

Konfigurieren einer React-App für den Zugriff auf die Feiertags-API

Andere Sprachen

Verwandte Inhalte

Feedback

Zusätzliche Ressourcen