Ansluta program till Fabric API för GraphQL

2025-08-22

För att ansluta ett program till ett API för GraphQL behöver du tre viktiga uppgifter: ett klient-ID, ditt hyresgäst-ID och din GraphQL-slutpunktsadress i Fabric. I följande avsnitt beskrivs hur du skapar och hämtar nödvändig information och får åtkomst till ditt API med hjälp av ett React-exempelprogram.

Andra språk

I den här handledningen beskrivs hur du ansluter ett React-demoprogram till Fabric API för GraphQL. Du hittar C#, Python och andra språkexempel i GitHub-lagringsplatsen Microsoft Fabric Samples.

Förutsättningar

Kontrollera att du har ett API för GraphQL i Infrastrukturresurser innan du ansluter ett program. Mer information finns i Skapa ett API för GraphQL i Infrastrukturresurser och lägga till data.
API:et för GraphQL kräver att program använder Microsoft Entra för autentisering. Registrera och konfigurera ditt program för att utföra API-anrop mot Fabric. Mer information finns i Skapa en Microsoft Entra-app i Azure.
Den autentiserade legitimationsuppgiften (användarens huvudnamn, tjänstens huvudnamn eller hanterade identitet) som anropar API:et behöver Kör-behörigheter för GraphQL-API:et (optionen för att köra frågor och mutationer när du lägger till direktåtkomstbehörigheter). Om du använder enkel inloggning (SSO) som anslutningsalternativ i API:et kontrollerar du att autentiseringsuppgifterna har läs- eller skrivbehörigheter i den valda datakällan. Mer information finns i Anslut till en datakälla och skapa ditt schema.

Skapa en Microsoft Entra-app

Följande steg förklarar 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.
Värdena för Microsoft Entra-app Applikation-ID (klient) och Katalog-ID (klientorganisation) visas i rutan Sammanfattning. Registrera dessa värden eftersom 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 . Bekräfta att administratörsmedgivande inte krävs.
Gå tillbaka till listan Hantera och välj Autentisering>Lägg till ett plattformsprogram>för 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 applikationen stöter på ett fel relaterat till begäranden mellan olika ursprung, lägger du till plattformen Mobil- och skrivbordsapplikationer 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 Data Engineering-upplevelsen 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 för att skapa ett nytt GraphQL-API och välj det Lakehouse som du skapade. Lägg till tabellen för helgdagar så att klienter kan 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 används i React-klientprogrammet:

 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.
Använd klient-ID och klient-ID från Microsoft Entra-appen som registrerats tidigare och kopiera slutpunkts-URI:n eftersom det krävs 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.

Använd en befintlig React-app som utgångspunkt. Följ stegen i handledningen Skapa ett ensidesprogram i React och förbered det för autentisering för att skapa ett React-projekt med Microsoft Entra-autentisering konfigurerad, inklusive att de nödvändiga filerna och mapparna läggs till i projektstrukturen. Ändra tre filer för att anpassa appen för GraphQL-användningsfallet.

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: 
 * [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 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 kallat klienten. Ersätt Enter_the_Application_Id_Here med det application(client) ID-värde 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 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>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>
)};

Spara alla filändringar.
I terminalprogrammet 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:3000 följer du stegen i den sista delen av handledningen Anropa API:et från programmet.
När du har loggat in väljer 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 React-klientprogrammet:

Lär dig hur du skapar en Microsoft Entra-app i Azure.
Lär dig hur du skapar ett API för GraphQL i Fabric och lägger till data.
Lär dig hur du skapar ett React-program på en sida och förbereder det för autentisering.
Lär dig hur du kör frågor mot flera datakällor i Fabric API för GraphQL.
Utforska GitHub-lagringsplatsen med react-exempelappen.

Feedback

Var den här sidan till hjälp?