Koble programmer til Fabric API for GraphQL

Hvis du vil koble et program til en API for GraphQL, trenger du tre viktige detaljer: en klient-ID, leier-ID-en og GraphQL-endepunktadressen i Fabric. De følgende avsnittene forklarer hvordan du oppretter og henter de nødvendige detaljene og får tilgang til API-en din ved hjelp av en React-eksempelapplikasjon.

Andre språk

Denne opplæringen forklarer hvordan du kobler et React-eksempelprogram til Fabric API for GraphQL. Du finner C#, Python og andre språkeksempler i GitHub-repositoriet for Microsoft Fabric Samples.

Forutsetning

Før du kobler til et program, sørg for at du har et API for GraphQL i Fabric. Hvis du vil ha mer informasjon, kan du se Opprette en API for GraphQL i Fabric og legge til data.
API-en for GraphQL krever at programmer bruker Microsoft Entra for godkjenning. Registrer og konfigurer programmet til å utføre API-kall mot Fabric. Hvis du vil ha mer informasjon, kan du se Opprette en Microsoft Entra-app i Azure.
Den godkjente legitimasjonen (brukerkontohaver, tjenestekontohaver eller administrert identitet) som kaller API-en, må ha kjøretillatelser for GraphQL-API-en (alternativet Kjør spørringer og mutasjoner når du legger til direkte tilgangstillatelser). Hvis du bruker enkel pålogging (SSO) som tilkoblingsalternativ i API-en, må du kontrollere at legitimasjonen har lese- eller skrivetillatelser i den valgte datakilden. Hvis du vil ha mer informasjon, kan du se Koble til en datakilde og bygge skjemaet.

Opprette en Microsoft Entra-app

Følgende trinn forklarer hvordan du konfigurerer støtte for en ReactJS-applikasjon i Microsoft Entra.

Registrer et program ved hjelp av trinnene som er beskrevet på Hurtigstart: Registrer et program med Microsoft-identitetsplattformen.
Verdiene for Microsoft Entra-appens program-ID (klient) og katalog-ID (leier) vises i Sammendrag-boksen. Registrer disse verdiene fordi de er nødvendige senere.
Under listen Behandle velger du API-tillatelser, og deretter Legg til tillatelse.
Legg til PowerBI-tjenesten, velg Delegerte tillatelser, og velg GraphQLApi.Execute.All-tillatelser . Bekreft at administratorsamtykke ikke er nødvendig.
Gå tilbake til Behandle-listen , velg Godkjenning>Legg til en plattform>Enkeltsideprogram.
For lokale utviklingsformål legger du til http://localhost:3000 under Omadresser URIer og bekrefter at programmet er aktivert for autorisasjonskodeflyten med Proof Key for Code Exchange (PKCE). Velg Konfigurer-knappen for å lagre endringene. Hvis programmet støter på en feil relatert til forespørsler om kryssopprinnelse, legger du til plattformen for mobil- og skrivebordsprogrammer i forrige trinn med samme omdirigerings-URI.
Rull ned til Avanserte innstillinger, og velg Ja for Aktiver følgendeunder Tillat offentlige klientflyter.

Konfigurere et eksempel på GraphQL API for programtilgang

I dette eksemplet oppretter vi en GraphQL-API for å vise eksempeldata fra Lakehouse til klienter.

Velg Dataingeniør fra listen over arbeidsbelastninger på hjemmesiden for Fabric-portalen.
I Data Engineering-opplevelsen velger du Bruk et eksempel, og under Lakehouse velger du Helligdager for automatisk å opprette et nytt Lakehouse med helligdagerdata.
Følg trinnene fra Opprett en API for GraphQL for å opprette en ny GraphQL API og velg Lakehouse du opprettet. Legg til helligdager-tabellen slik at klienter kan få tilgang til disse dataene.

Test GraphQL-API-en i API-redigeringsprogrammet ved hjelp av følgende eksempelspørring. Det er den samme spørringen som brukes i React-klientapplikasjonen:

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

Velg Kopier endepunkt på verktøylinjen for API-elementet.
Velg Kopier i skjermbildet Kopier kobling.
Bruk klient-ID-en og leier-ID-en fra Microsoft Entra-appen som er registrert tidligere, og kopier endepunkt-URI-en fordi det er nødvendig senere.

Konfigurere en React-app for å få tilgang til API-en for helligdager

Merk deg

Hvis du foretrekker å hoppe over følgende manuelle trinn, kan du klone GitHub-repositoriet med det fullstendige programmet. Følg trinn 3 for å legge til spesifikke detaljer om GraphQL-endepunktet og ID-er hentet fra Microsoft Entra til filen authConfig.js, installer avhengigheter med npm install og hopp til trinn 9 for å fortsette med testing av programkjøringen.

Bruk en eksisterende React-app som utgangspunkt. Følg trinnene i opplæringen Opprett en React-enkeltsideapplikasjon og klargjør den for autentisering for å opprette et React-prosjekt med Microsoft Entra-autentisering konfigurert, inkludert de nødvendige filene og mappene som er lagt til i prosjektstrukturen. Endre tre filer for å tilpasse appen for GraphQL-brukstilfellet.

src Åpne filen i mappen, authConfig.js og erstatt innholdet i filen med følgende kodesnutt:

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

Som du kan se i koden ovenfor, er det viktig å bruke riktig omfang for å få tilgang til programmet. I vårt tilfelle https://analysis.windows.net/powerbi/api/GraphQLApi.Execute.All.

Erstatt følgende verdier med verdiene fra administrasjonssenteret for Microsoft Entra.
- clientId – Identifikatoren til programmet, også kalt klienten. Erstatt Enter_the_Application_Id_Here med Application(client)-ID-verdien som ble registrert tidligere fra oversiktssiden for det registrerte Microsoft Entra-programmet.
- autoritet – Dette består av to deler:
  - Forekomsten er endepunktet til skyleverandøren. Sjekk med de ulike tilgjengelige endepunktene i nasjonale skyer.
  - Leier-ID-en er identifikatoren for leieren der programmet er registrert. Erstatt Enter_the_Tenant_Info_Here med ID-verdien for katalog (leier) som ble registrert tidligere fra oversiktssiden for det registrerte programmet.
- graphQLEndpoint – Stoff-API-en for GraphQL-endepunkt. Erstatt Enter_the_GraphQL_Endpoint_Here med GraphQL API-endepunktet som ble registrert tidligere.
Lagre filen.

Åpne filen i samme src mappe, App.js og erstatt innholdet i filen med følgende kodesnutt:

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

Lagre filen.

Til slutt, under src/components mappen, åpner ProfileData.jsx du filen og erstatter innholdet i filen med følgende kodesnutt:

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

Lagre alle filendringene.
I terminalapplikasjonen din, gå til rotmappen til React-prosjektet og kjør kommandoen npm start for å teste applikasjonen lokalt.
Når applikasjonen lastes inn i nettleseren din fra http://localhost:3000, følg trinnene i den siste delen av opplæringen Kall API-en fra applikasjonen.
Når du har logget på, velger du knappen Query Fabric API for GraphQL-data.
En vellykket godkjent forespørsel til GraphQL API i Fabric returnerer data fra GraphQL-spørringen til Lakehouse i React-klientapplikasjonen:

Finn ut hvordan du oppretter en Microsoft Entra-app i Azure.
Lær hvordan du oppretter et API for GraphQL i Fabric og legger til data.
Lær hvordan du oppretter en React-enkeltsideapplikasjon og klargjør den for autentisering.
Finn ut hvordan du spør etter flere datakilder i Fabric API for GraphQL.
Utforsk GitHub-repositoriet med React-eksempelappen.

Tilbakemeldinger

Var denne siden nyttig?

Last updated on 2025-08-22