Opret forbindelse mellem programmer og Fabric API til GraphQL

Hvis du vil oprette forbindelse mellem et program og en API til GraphQL, skal du bruge tre vigtige oplysninger: et klient-id, dit lejer-id og din GraphQL-slutpunktsadresse i Fabric. I følgende afsnit forklares det, hvordan du opretter og henter de nødvendige oplysninger og får adgang til din API ved hjælp af et eksempel på et React-program.

Andre sprog

Dette selvstudium forklarer, hvordan du forbinder et React-eksempelprogram til Fabric API til GraphQL. Du finder C#, Python og andre sprogeksempler i GitHub-lageret Microsoft Fabric Samples.

Forudsætninger

• Før du tilslutter et program, skal du sikre dig, at du har en API til GraphQL i Fabric. Du kan få flere oplysninger under Opret en API til GraphQL i Fabric, og tilføj data.

• API'en til GraphQL kræver, at programmer bruger Microsoft Entra til godkendelse. Registrer og konfigurer dit program til at udføre API-kald mod Fabric. Du kan få flere oplysninger under Opret en Microsoft Entra-app i Azure.

• De godkendte legitimationsoplysninger (brugerprincipal, tjenesteprincipal eller administreret identitet), der kalder API'en, skal have kørselstilladelser til GraphQL-API'en (indstillingen Kør forespørgsler og mutationer, når der tilføjes tilladelser til direkte adgang). Hvis du bruger enkeltlogon (SSO) som forbindelsesmulighed i API'en, skal du sikre dig, at legitimationsoplysningerne har læse- eller skrivetilladelser i den valgte datakilde. Du kan få flere oplysninger under Opret forbindelse til en datakilde, og opret dit skema.

Opret en Microsoft Entra-app

Følgende trin forklarer, hvordan du konfigurerer understøttelse af en ReactJS-applikation i Microsoft Entra.

1. Registrer et program ved hjælp af de trin, der er beskrevet i Hurtig start: Registrer et program med Microsoft-identitetsplatformen.

2. Værdierne for Microsoft Entra-appprogram-id (klient) og katalog-id (lejer) vises i feltet Oversigt. Registrer disse værdier, fordi de er påkrævet senere.

3. På listen Administrer skal du vælge API-tilladelserog derefter Tilføj tilladelse.

4. Tilføj PowerBI-tjenesten, vælg Delegerede tilladelser, og vælg GraphQLApi.Execute.All permissions. Bekræft, at administratorsamtykke ikke er påkrævet.

5. Gå tilbage til listen Administrer , vælg Godkendelse>Tilføj en platform>Enkeltsidet program.

6. I forbindelse med lokal udvikling skal du tilføje http://localhost:3000 under Omdirigerings-URI'er og bekræfte, at programmet er aktiveret for godkendelseskodeflowet med proof key for Code Exchange (PKCE). Vælg knappen Konfigurer for at gemme dine ændringer. Hvis programmet støder på en fejl, der er relateret til anmodninger på tværs af oprindelse, skal du tilføje platformen Mobil- og skrivebordsprogrammer i det forrige trin med den samme omdirigerings-URI.

7. Gå tilbage til Godkendelse, rul ned til avancerede indstillinger, og under Tillad offentlige klientflowskal du vælge Ja for at Aktivér følgendepå mobilenheder og stationære computere .

Konfigurer en GraphQL-eksempel-API til programadgang

I dette eksempel opretter vi en GraphQL-API for at vise lakehouse-eksempeldata for klienter.

1. Vælg Dataudvikler på listen over arbejdsbelastninger på startsiden for Fabric-portalen.

2. I Data Engineering-oplevelsen skal du vælge Brug et eksempel og under Lakehouse skal du vælge Helligdage for automatisk at oprette et nyt Lakehouse med helligdagsdata.

   

3. Følg trinene fra Opret en API til GraphQL for at oprette en ny GraphQL API og vælg det Lakehouse, du oprettede. Tilføj tabellen over helligdage, så kunderne kan få adgang til disse data.

   

4. Test GraphQL-API'en i API-editoren ved hjælp af følgende eksempelforespørgsel. Det er den samme forespørgsel, der bruges 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
        }
      }
    }
   

5. Vælg Kopiér slutpunkt på API-elementets værktøjslinje.

   

6. Vælg Kopiér på skærmen Kopiér link.

   

7. Brug klient-id'et og lejer-id'et fra den Microsoft Entra-app, der er registreret tidligere, og kopiér slutpunkts-URI'en, fordi det er påkrævet senere.

Konfigurer en React-app for at få adgang til API'en for helligdage

Notat

Hvis du foretrækker at springe følgende manuelle trin over, kan du klone GitHub-lageret med det komplette program. Følg trin 3 for at tilføje specifikke oplysninger om dit GraphQL-slutpunkt og id'er, der er hentet fra Microsoft Entra, til filen authConfig.js, installere afhængigheder med npm install og gå til trin 9 for at fortsætte med at teste udførelsen af programmet.

1. Brug en eksisterende React-app som udgangspunkt. Følg trinene i selvstudiet Opret et React-enkeltsidet program, og forbered det til godkendelse for at oprette et React-projekt med Microsoft Entra-godkendelse konfigureret, herunder de nødvendige filer og mapper, der er tilføjet til projektstrukturen. Skift tre filer for at tilpasse appen til GraphQL-brugssituationen.

2. Åbn filen i srcauthConfig.js mappen, og erstat indholdet af filen med følgende kodestykke:

   /*
    * 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 ovenstående kode, er det vigtigt at bruge det korrekte område til at få adgang til programmet. I vores tilfælde https://analysis.windows.net/powerbi/api/GraphQLApi.Execute.All.

3. Erstat følgende værdier med værdierne fra Microsoft Entra Administration.

   • clientId – Programmets id, også kaldet klienten. Erstat Enter_the_Application_Id_Here med værdien Program(klient)-id , der blev registreret tidligere fra oversigtssiden for det registrerede Microsoft Entra-program.

   • myndighed - Dette består af to dele:

     • Forekomsten er slutpunktet for cloududbyderen. Kontakt de forskellige tilgængelige slutpunkter i nationale cloudmiljøer.

     • Lejer-id'et er id'et for den lejer, hvor programmet er registreret. Erstat Enter_the_Tenant_Info_Here med den mappe-id-værdi (lejer), der blev registreret tidligere fra oversigtssiden for det registrerede program.

   • graphQLEndpoint – Fabric API til GraphQL-slutpunkt. Erstat Enter_the_GraphQL_Endpoint_Here med GraphQL API-slutpunktet, der er registreret tidligere.

4. Gem filen.

5. Åbn filen i src den samme App.js mappe, og erstat indholdet af filen med følgende kodestykke:

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

7. Til sidst skal du åbne src/components filen under ProfileData.jsx mappen og erstatte indholdet af filen med følgende kodestykke:

   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. Gem alle filændringerne.

9. I din terminalapplikation skal du gå til rodmappen for React-projektet og køre kommandoen npm start for at teste applikationen lokalt.

10. Når applikationen indlæses i din browser fra http://localhost:3000, skal du følge trinene i den sidste del af selvstudiet Kald API'en fra applikationen.

11. Når du er logget på, skal du vælge knappen Forespørg Fabric API for GraphQL-data.

    

12. En godkendt anmodning til GraphQL-API'en i Fabric returnerer data fra GraphQL-forespørgslen til Lakehouse i React-klientprogrammet:

    

Relateret indhold

• Få mere at vide om, hvordan du opretter en Microsoft Entra-app i Azure.
• Få mere at vide om, hvordan du opretter en API til GraphQL i Fabric og tilføjer data.
• Få mere at vide om, hvordan du opretter en React-enkeltsidet applikation og forbereder den til godkendelse.
• Få mere at vide om, hvordan du forespørger på flere datakilder i Fabric API til GraphQL.
• Udforsk GitHub-lageret med React-eksempelappen.