Sovellusten yhdistäminen GraphQL:n Fabric-ohjelmointirajapintaan

Jos haluat yhdistää sovelluksen GraphQL:n ohjelmointirajapintaan, tarvitset kolme keskeistä tietoa: asiakastunnuksen, vuokraajan tunnuksen ja GraphQL-päätepisteen osoitteen Fabricissa. Seuraavissa osioissa kerrotaan, miten voit luoda ja noutaa tarvittavat tiedot ja käyttää ohjelmointirajapintaa React-esimerkkisovelluksen avulla.

Muut kielet

Tässä opetusohjelmassa kerrotaan, miten React-mallisovellus yhdistetään GraphQL:n Fabric API -ohjelmointirajapintaan. Löydät C#-, Python- ja muita kielinäytteitä Microsoft Fabric Samples GitHub -säilöstä.

Edellytykset

Varmista ennen sovelluksen yhdistämistä, että sinulla on GraphQL:n ohjelmointirajapinta Fabricissa. Lisätietoja on artikkelissa Ohjelmointirajapinnan luominen GraphQL:lle Fabricissa ja tietojen lisääminen.
GraphQL:n ohjelmointirajapinta edellyttää, että sovellukset käyttävät Microsoft Entraa todentamiseen. Rekisteröi ja määritä sovelluksesi suorittamaan ohjelmointirajapintakutsuja Fabricia vastaan. Lisätietoja on artikkelissa Microsoft Entra -sovelluksen luominen Azuressa.
Ohjelmointirajapintaa kutsuva todennettu tunnistetieto (käyttäjän päänimi, palvelun päänimi tai hallittu käyttäjätieto) tarvitsee GraphQL-ohjelmointirajapinnan suoritusoikeudet (Suorita kyselyt ja mutaatiot -vaihtoehto, kun lisäät suoran käytön käyttöoikeuksia). Jos käytät kertakirjautumista (SSO) ohjelmointirajapinnan yhteysvaihtoehtona, varmista, että tunnistetiedoilla on luku- tai kirjoitusoikeudet valitussa tietolähteessä. Lisätietoja on kohdassa Yhdistä tietolähteeseen ja luo rakenne.

Luo Microsoft Entra -sovellus

Seuraavissa vaiheissa kerrotaan, kuinka ReactJS-sovelluksen tuki määritetään Microsoft Entrassa.

Rekisteröi sovellus noudattamalla ohjeita kohdassa Pikaopas: Sovelluksen rekisteröinti Microsoftin käyttäjätietoympäristössä.
Microsoft Entra -sovelluksen sovelluksen (asiakasohjelman) tunnuksen ja hakemiston (vuokraajan) tunnuksen arvot näkyvät Yhteenveto-ruudussa. Tallenna nämä arvot, koska niitä tarvitaan myöhemmin.
Valitse Hallinta -luettelosta -ohjelmointirajapinnan käyttöoikeudetja valitse sitten Lisää käyttöoikeus -.
Lisää PowerBI-palvelu, valitse Delegoidut käyttöoikeudet ja valitse GraphQLApi.Execute.All permissions. Varmista, että järjestelmänvalvojan suostumusta ei tarvita.
Palaa Hallinta-luetteloon ja valitse Todennus>Lisää alustan>yksisivuinen sovellus.
Lisää paikallisiin kehitystarkoituksiin kohtaan http://localhost:3000Uudelleenohjauksen URI-osoitteet ja varmista, että sovellus on otettu käyttöön valtuutuskoodin työnkulussa, jossa on Koodin vaihto -ohjelman (PKCE) todisteavain. Tallenna muutoksesi valitsemalla Määritä-painike. Jos sovellus kohtaa virheen, joka liittyy alkuperän välisiin pyyntöihin, lisää mobiili- ja työpöytäsovellusympäristö edellisessä vaiheessa samalla uudelleenohjaus-URI:lla.
Siirry Authentication-alaspäin kohtaan Lisäasetukset - ja valitse Salli julkisen asiakkaan työnkulut-kohdassa Kyllä Ota käyttöön seuraavat mobiili- ja työpöytätyönkulut.

GraphQL-mallirajapinnan määrittäminen sovelluksen käyttöä varten

Tässä esimerkissä luomme GraphQL-ohjelmointirajapinnan, joka paljastaa Lakehouse-mallitiedot asiakkaille.

Valitse Fabric-portaalin aloitussivulla Tietotekniikka kuormitusten luettelosta.
Valitse Data Engineering -kokemuksessa Käytä mallia ja valitse Lakehouse-kohdassaYleiset vapaapäivät , jos haluat luoda automaattisesti uuden Lakehousen, jossa on yleisten vapaapäivien tiedot.
Luo uusi GraphQL-ohjelmointirajapinta noudattamalla ohjeita kohdassa Ohjelmointirajapinnan luominen GraphQL:lle ja valitse luomasi Lakehouse. Lisää yleiset vapaapäivät-taulukko, jotta asiakkaat voivat käyttää näitä tietoja.

Testaa GraphQL-ohjelmointirajapintaa ohjelmointirajapintaeditorissa käyttämällä seuraavaa esimerkkikyselyä. Se on sama kysely, jota käytetään React-asiakassovelluksessa:

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

Valitse Ohjelmointirajapintakohteen työkaluriviltä Kopioi päätepiste .
Valitse Kopioi linkki -näytössä Kopioi.
Käytä aiemmin tallennetun Microsoft Entra -sovelluksen asiakastunnusta ja vuokraajan tunnusta ja kopioi päätepisteen URI, koska sitä tarvitaan myöhemmin.

Määritä React-sovellus käyttämään julkisten lomien ohjelmointirajapintaa

Huomautus

Jos haluat ohittaa seuraavat manuaaliset vaiheet, voit kloonata GitHub-säilön koko sovelluksen avulla. Lisää vaihe 3:een tarkat tiedot GraphQL-päätepisteestäsi ja Microsoft Entrasta tiedostoon authConfig.jsnoudetuista tunnuksista, asenna riippuvuussuhteet npm install ja siirry vaiheeseen 9. Näin voit jatkaa sovelluksen suorituksen testaamista.

Käytä lähtökohtana olemassa olevaa React-sovellusta. Noudata opetusohjelman ohjeita Luo yksisivuinen React-sovellus ja valmistele se todentamista varten , jotta voit luoda React-projektin, jossa on määritetty Microsoft Entra -todennus, mukaan lukien tarvittavat tiedostot ja kansiot, jotka on lisätty projektirakenteeseen. Muuta kolmea tiedostoa mukauttaaksesi sovelluksen GraphQL:n käyttötapaukseen.

src Avaa kansiossa tiedosto authConfig.js ja korvaa tiedoston sisältö seuraavalla koodikatkelmalla:

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

Kuten yllä olevasta koodista näkyy, on tärkeää käyttää oikeaa vaikutusaluetta, jotta voit käyttää sovellusta. Meidän tapauksessamme https://analysis.windows.net/powerbi/api/GraphQLApi.Execute.All.

Korvaa seuraavat arvot Microsoft Entra -hallintakeskuksen arvoilla.
- clientId – Sovelluksen tunnus, jota kutsutaan myös asiakkaaksi. Korvaa Enter_the_Application_Id_HereApplication(client) ID -arvolla, joka on tallennettu aiemmin rekisteröidyn Microsoft Entra -sovelluksen yleiskatsaussivulta.
- auktoriteetti - Tämä koostuu kahdesta osasta:
  - Esiintymä on pilvipalveluntarjoajan päätepiste. Tarkista kansallisissa pilvipalveluissa käytettävissä olevat eri päätepisteet.
  - Vuokraajatunnus on sen vuokraajan tunnus, johon sovellus on rekisteröity. Korvaa Enter_the_Tenant_Info_Here rekisteröidyn sovelluksen Yleiskatsaus-sivulta aiemmin tallennetulla Hakemiston (vuokraajan) tunnus -arvolla.
- graphQLEndpoint - GraphQL-päätepisteen Fabric-ohjelmointirajapinta. Korvaa Enter_the_GraphQL_Endpoint_Here aiemmin kirjatulla GraphQL-ohjelmointirajapinnan päätepisteellä.
Tallenna tiedosto.

Avaa samassa src kansiossa oleva App.js tiedosto ja korvaa tiedoston sisältö seuraavalla koodikatkelmalla:

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

Tallenna tiedosto.

Avaa lopuksi -kansion src/components alla oleva ProfileData.jsx tiedosto ja korvaa tiedoston sisältö seuraavalla koodikatkelmalla:

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

Tallenna kaikki tiedoston muutokset.
Siirry päätesovelluksessasi React-projektin juurikansioon ja suorita komento npm start testataksesi sovellusta paikallisesti.
Kun sovellus latautuu selaimeesi http://localhost:3000, noudata opetusohjelman viimeisen osan ohjeita Kutsu ohjelmointirajapinta sovelluksesta.
Kun olet kirjautunut sisään, valitse painikkeesta Query Fabric API for GraphQL Data.
Onnistunut todennettu pyyntö GraphQL-ohjelmointirajapinnalle Fabricissa palauttaa tiedot GraphQL-kyselystä Lakehouseen React-asiakassovelluksessa:

Lue, miten voit luoda Microsoft Entra -sovelluksen Azuressa.
Lue, miten voit luoda API:n GraphQL:lle Fabricissa ja lisätä tietoja.
Opi luomaan yksisivuinen React-sovellus ja valmistelemaan se todennusta varten.
Lue, miten voit tehdä kyselyjä useista tietolähteistä GraphQL:n Fabric API -ohjelmointirajapinnassa.
Tutustu GitHub-säilöön React-mallisovelluksella.

Palaute

Oliko tästä sivusta apua?

Last updated on 2025-08-22