Delen via

Toepassingen verbinden met Fabric-API voor GraphQL

Als u een toepassing wilt verbinden met een API voor GraphQL, hebt u drie belangrijke gegevens nodig: een client-id, uw tenant-id en het GraphQL-eindpuntadres in Fabric. In de volgende secties wordt uitgelegd hoe u de vereiste details maakt en ophaalt en hoe u toegang hebt tot uw API met behulp van een react-voorbeeldtoepassing.

Andere talen

In deze zelfstudie wordt uitgelegd hoe u een React-voorbeeldtoepassing verbindt met fabric-API voor GraphQL. U vindt C#, Python en andere taalvoorbeelden in de GitHub-opslagplaats microsoft Fabric Samples.

Vereisten

  • Voordat u verbinding maakt met een toepassing, moet u ervoor zorgen dat u een API voor GraphQL in Fabric hebt. Zie Een API voor GraphQL maken in Fabric en gegevens toevoegen voor meer informatie.

  • Voor de API voor GraphQL moeten toepassingen Microsoft Entra gebruiken voor verificatie. Registreer en configureer uw toepassing om API-aanroepen uit te voeren op Fabric. Zie Een Microsoft Entra-app maken in Azure voor meer informatie.

  • De geverifieerde referentie (gebruikers-principal, service-principal of beheerde identiteit) die de API aanroept, moet uitvoermachtigingen hebben voor de GraphQL-API (optie Query's en Mutaties uitvoeren bij het toevoegen van directe toegangsmachtigingen). Als u eenmalige aanmelding (SSO) gebruikt als connectiviteitsoptie in de API, moet u ervoor zorgen dat de referentie lees- of schrijfmachtigingen heeft in de gekozen gegevensbron. Zie Verbinding maken met een gegevensbron en uw schemabouwen voor meer informatie.

Een Microsoft Entra-app maken

In de volgende stappen wordt uitgelegd hoe u ondersteuning configureert voor een ReactJS-toepassing in Microsoft Entra.

  1. Registreer een toepassing met behulp van de stappen die worden beschreven in Quickstart: Een toepassing registreren bij het Microsoft Identity Platform.

  2. De waarden voor toepassing-ID (client) en directory-ID (tenant) van Microsoft Entra worden weergegeven in het vak Samenvatting. Noteer deze waarden omdat ze later vereist zijn.

  3. Onder de lijst Beheren, selecteer API-machtigingenen vervolgens Machtiging toevoegen.

  4. Voeg de PowerBI-service toe, selecteer Gedelegeerde machtigingen en selecteer GraphQLApi.Execute.All-machtigingen . Controleer of beheerderstoestemming niet is vereist.

  5. Ga terug naar de lijst Beheren en selecteer Verificatie>een platformtoepassing> metéén pagina toevoegen.

  6. Voeg voor lokale ontwikkelingsdoeleinden onder http://localhost:3000 toe en controleer of de toepassing is ingeschakeld voor de autorisatiecodestroom met Proof Key for Code Exchange (PKCE). Selecteer de knop Configureren om uw wijzigingen op te slaan. Als de toepassing een fout krijgt met betrekking tot cross-origin-aanvragen, voegt u het platform voor mobiele toepassingen en desktoptoepassingen toe in de vorige stap met dezelfde omleidings-URI.

  7. Ga terug naar verificatie, schuif omlaag naar geavanceerde instellingen en selecteer onder Toestaan van openbare clientstromen, Ja voor inschakelen van de volgende mobiele en desktopstromen.

Een GraphQL-voorbeeld-API instellen voor toegang tot toepassingen

In dit voorbeeld maken we een GraphQL-API om voorbeeldgegevens van Lakehouse beschikbaar te maken voor clients.

  1. Selecteer op de startpagina van de Fabric-portal Data-engineer ing in de lijst met workloads.

  2. Selecteer in de data engineering-ervaring een voorbeeld gebruiken en selecteer onder Lakehouseopenbare feestdagen om automatisch een nieuw Lakehouse te maken met gegevens over openbare feestdagen.

    Schermopname van het selecteren van de optie Data Lakehouse-voorbeeld.

  3. Volg de stappen van Een API voor GraphQL maken om een nieuwe GraphQL-API te maken en selecteer het Lakehouse dat u hebt gemaakt. Voeg de tabel openbare feestdagen toe zodat clients toegang hebben tot deze gegevens.

    Schermopname van het toevoegen van het voorbeeld lakehouse als GraphQL-gegevensbron.

  4. Test de GraphQL-API in de API-editor met behulp van de volgende voorbeeldquery. Dit is dezelfde query die wordt gebruikt in de React-clienttoepassing:

     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. Selecteer Eindpunt kopiëren op de werkbalk van het API-item.

    Schermopname van de werkbalkopties voor een API-item.

  6. Selecteer Kopiëren in hetscherm Koppeling kopiëren.

    Schermopname van het dialoogvenster Koppeling kopiëren, waarin wordt weergegeven waar u Kopiëren kunt selecteren.

  7. Gebruik de client-id en tenant-id van de Microsoft Entra-app die u eerder hebt vastgelegd en kopieer de eindpunt-URI omdat deze later vereist is.

Een React-app configureren voor toegang tot de API voor openbare feestdagen

Opmerking

Als u liever de volgende handmatige stappen overslaat, kunt u de GitHub-opslagplaats klonen met de volledige toepassing. Volg stap 3 om specifieke details over uw GraphQL-eindpunt en id's die zijn opgehaald van Microsoft Entra toe te voegen aan het bestand authConfig.js, installeer de afhankelijkheden met npm install en ga verder naar stap 9 om de uitvoering van de toepassing te testen.

  1. Gebruik een bestaande React-app als uitgangspunt. Volg de stappen in de zelfstudie Een React-toepassing met één pagina maken en bereid deze voor op verificatie om een React-project te maken met Microsoft Entra-verificatie geconfigureerd, inclusief de vereiste bestanden en mappen die zijn toegevoegd aan de projectstructuur. Wijzig drie bestanden om de app aan te passen voor de GraphQL-use-case.

  2. Open het src bestand in de authConfig.js map en vervang de inhoud van het bestand door het volgende codefragment:

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

    Zoals u in de bovenstaande code kunt zien, is het belangrijk dat u het juiste bereik gebruikt om toegang te krijgen tot de toepassing. In ons geval https://analysis.windows.net/powerbi/api/GraphQLApi.Execute.All.

  3. Vervang de volgende waarden door de waarden uit het Microsoft Entra-beheercentrum.

    • clientId : de id van de toepassing, ook wel de client genoemd. Vervang Enter_the_Application_Id_Here door de toepassings-id-waarde (client) die eerder is vastgelegd op de overzichtspagina van de geregistreerde Microsoft Entra-toepassing.

    • authority - Dit bestaat uit twee delen:

      • Het exemplaar is het eindpunt van de cloudprovider. Neem contact op met de verschillende beschikbare eindpunten in nationale clouds.

      • De tenant-id is de id van de tenant waar de toepassing is geregistreerd. Vervang Enter_the_Tenant_Info_Here door de Directory (tenant) ID die eerder is vastgelegd op de overzichtspagina van de geregistreerde toepassing.

    • graphQLEndpoint : de Fabric-API voor GraphQL-eindpunt. Vervang door Enter_the_GraphQL_Endpoint_Here het GraphQL API-eindpunt dat eerder is vastgelegd.

  4. Sla het bestand op.

  5. Open het src bestand in dezelfde App.js map en vervang de inhoud van het bestand door het volgende codefragment:

    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. Sla het bestand op.

  7. Open ten slotte onder de src/components map het ProfileData.jsx bestand en vervang de inhoud van het bestand door het volgende codefragment:

    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. Sla alle bestandswijzigingen op.

  9. Ga in uw terminaltoepassing naar de hoofdmap van het React-project en voer de opdracht npm start uit om de toepassing lokaal te testen.

  10. Zodra de toepassing is geladen in uw browser van http://localhost:3000, volgt u de stappen in het laatste deel van de handleiding De API aanroepen vanuit de toepassing.

  11. Nadat u zich hebt aangemeld, selecteert u de knop Query Fabric-API voor GraphQL-gegevens.

    Schermopname van de React-voorbeeld-app nadat u zich hebt aangemeld.

  12. Een geslaagde geverifieerde aanvraag voor de GraphQL-API in Fabric retourneert gegevens van de GraphQL-query naar lakehouse in de React-clienttoepassing:

    Schermopname van de React-voorbeeld-app na ontvangst van de GraphQL-aanvraag.

Gerelateerde inhoud

  • Last updated on