Freigeben über

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

Um eine Anwendung mit einer API für GraphQL zu verbinden, benötigen Sie drei wichtige Details: eine Client-ID, Ihre Mandanten-ID und Ihre GraphQL-Endpunktadresse in Fabric. In den folgenden Abschnitten wird erläutert, wie Sie die erforderlichen Details erstellen und abrufen und mithilfe einer React-Beispielanwendung auf Ihre API zugreifen.

Andere Sprachen

In diesem Lernprogramm wird erläutert, wie Sie eine React-Beispielanwendung mit der Fabric-API für GraphQL verbinden. Sie finden C#-, Python- und andere Sprachbeispiele im GitHub-Repository von Microsoft Fabric Samples.

Voraussetzungen

  • Stellen Sie vor dem Verbinden einer Anwendung sicher, dass Sie über eine API für GraphQL in Fabric verfügen. Weitere Informationen finden Sie unter Erstellen einer API für GraphQL in Fabric und Hinzufügen von Daten.

  • Die API für GraphQL erfordert, dass Anwendungen Microsoft Entra für die Authentifizierung verwenden. Registrieren und konfigurieren Sie Ihre Anwendung, um API-Aufrufe für 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 ausführen und Mutationen" beim Hinzufügen von direkten Zugriffsberechtigungen). Wenn Sie einmaliges Anmelden (Single Sign-On, SSO) als Verbindungsoption in der API verwenden, stellen Sie sicher, dass die Anmeldeinformationen über Lese- oder Schreibberechtigungen in der ausgewählten Datenquelle verfügen. 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 erläutert, wie Die Unterstützung für eine ReactJS-Anwendung in Microsoft Entra konfiguriert wird.

  1. Registrieren Sie eine Anwendung mithilfe der schritte, die unter Schnellstart beschrieben werden: Registrieren Sie eine Anwendung bei der Microsoft Identity Platform.

  2. Die Werte der Microsoft Entra Anwendungs-ID (Client) und der Verzeichnis-ID (Mandant) werden im Feld "Zusammenfassung" angezeigt. Notieren Sie diese Werte, da sie später erforderlich sind.

  3. Wählen Sie in der Liste Verwalten die Option API-Berechtigungen und dann Berechtigung hinzufügen aus.

  4. Fügen Sie den PowerBI-Dienst hinzu, wählen Sie delegierte Berechtigungen und dann GraphQLApi.Execute.All-Berechtigungen aus. Bestätigen Sie, dass die Administratorzustimmung nicht erforderlich ist.

  5. Wechseln Sie zurück zur Verwalten Liste, wählen Sie Authentifizierung>, Eine Plattform hinzufügen>, Einzelseitenanwendung aus.

  6. 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. Wenn bei der Anwendung ein Fehler im Zusammenhang mit ursprungsübergreifenden Anforderungen auftritt, fügen Sie die Plattform für Mobile- und Desktopanwendungen im vorherigen Schritt mit demselben Umleitungs-URI hinzu.

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

  1. Wählen Sie auf der Startseite des Fabric-Portals Datentechnik aus der Liste der Workloads aus.

  2. Wählen Sie in der Daten-Engineering-Umgebung die Option Beispiel verwenden aus und dann unter Lakehouse die Option öffentliche Feiertage, um automatisch ein neues Lakehouse mit Daten zu öffentlichen Feiertagen zu erstellen.

    Screenshot zum Auswählen der Beispieldaten-Lakehouse-Option.

  3. Führen Sie die Schritte aus der Erstellung einer API für GraphQL aus, um eine neue GraphQL-API zu erstellen und das von Ihnen erstellte Lakehouse auszuwählen. Fügen Sie die Tabelle "Feiertage" hinzu, damit Clients auf diese Daten zugreifen können.

    Screenshot vom Hinzufügen des Beispiel-Lakehouse als GraphQL-Datenquelle.

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

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

  5. Wählen Sie auf der Symbolleiste des API-Elements Endpunkt kopieren aus.

    Screenshot der Symbolleistenoptionen für ein API-Element.

  6. Wählen Sie auf dem Bildschirm Link kopieren die Option Kopieren aus.

    Screenshot des Dialogfelds

  7. Verwenden Sie die Client-ID und Mandanten-ID aus der zuvor aufgezeichneten Microsoft Entra-App, und kopieren Sie den Endpunkt-URI, da er später erforderlich ist.

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

Hinweis

Wenn Sie die folgenden manuellen Schritte überspringen möchten, können Sie das GitHub-Repository mit der vollständigen Anwendung klonen. Befolgen Sie Schritt 3, um spezifische Details zu Ihrem GraphQL-Endpunkt und IDs hinzuzufügen, die von Microsoft Entra zur Datei authConfig.jsabgerufen wurden, installieren Sie Abhängigkeiten mit npm install und fahren Sie mit Schritt 9 fort, um mit dem Testen der Anwendungsausführung fortzufahren.

  1. Verwenden Sie eine vorhandene React-App als Ausgangspunkt. Führen Sie die Schritte im Lernprogramm Erstellen einer einzelseitigen React-Anwendung aus, und bereiten Sie sie auf die Authentifizierung vor, um ein React-Projekt mit konfigurierter Microsoft Entra-Authentifizierung zu erstellen, einschließlich der erforderlichen Dateien und Ordner, die der Projektstruktur hinzugefügt wurden. Ändern Sie drei Dateien, um die App für den GraphQL-Anwendungsfall anzupassen.

  2. Öffnen Sie die srcauthConfig.js Datei im Ordner, und ersetzen Sie den Inhalt der Datei durch den folgenden Codeausschnitt:

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

    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.

  3. Ersetzen Sie die folgenden Werte durch die Werte aus dem Microsoft Entra Admin Center.

    • clientId – Der Bezeichner der Anwendung, auch als Client bezeichnet. Ersetzen Sie Enter_the_Application_Id_Here durch den Wert der Application(client)-ID, die zuvor auf der Übersichtsseite der registrierten Microsoft Entra-Anwendung aufgezeichnet wurde.

    • Autorität - Dies 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 für die Verzeichnis-ID (Mandant), der zuvor auf der Übersichtsseite der registrierten Anwendung aufgezeichnet wurde.

    • graphQLEndpoint – Die Fabric-API für den GraphQL-Endpunkt. Ersetzen Sie Enter_the_GraphQL_Endpoint_Here durch den zuvor notierten GraphQL-API-Endpunkt.

  4. Speichern Sie die Datei.

  5. Öffnen Sie die src Datei im selben App.js Ordner, und ersetzen Sie den Inhalt der Datei durch den folgenden Codeausschnitt:

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

  6. Speichern Sie die Datei.

  7. Öffnen Sie schließlich unter dem src/components Ordner die ProfileData.jsx Datei, und ersetzen Sie den Inhalt der Datei durch den folgenden Codeausschnitt:

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

  8. Speichern Sie alle Dateiänderungen.

  9. Wechseln Sie in Ihrer Terminalanwendung zum Stammordner des React-Projekts, und führen Sie den Befehl npm start aus, um die Anwendung lokal zu testen.

  10. Nachdem die Anwendung in Ihrem Browser http://localhost:3000geladen wurde, führen Sie die Schritte im letzten Teil des Lernprogramms aus, um die API aus der Anwendung aufzurufen.

  11. Wählen Sie nach der Anmeldung die Schaltfläche Query Fabric-API für GraphQL-Daten aus.

    Screenshot der React-Beispiel-App nach der Anmeldung.

  12. Eine erfolgreiche authentifizierte Anforderung an die GraphQL-API in Fabric gibt Daten aus der GraphQL-Abfrage an den Lakehouse in der React-Clientanwendung zurück:

    Screenshot der React-Beispiel-App nach Erhalt der GraphQL-Anforderung.

Verwandte Inhalte

  • Last updated on