Connettere le applicazioni all'API infrastruttura per GraphQL

Articolo
06/28/2024

Nota

L'API Microsoft Fabric per GraphQL è disponibile in anteprima.

Per connettere un'applicazione a un'API per GraphQL, sono necessarie tre informazioni importanti: un ID client, l'ID tenant e l'indirizzo dell'endpoint GraphQL in Fabric. Nelle sezioni seguenti viene illustrato come creare e recuperare tutti i dettagli necessari e come accedere all'API usando un'applicazione di esempio.

Prerequisiti

Attualmente l'API per GraphQL richiede che le applicazioni usino Microsoft Entra per l'autenticazione. L'applicazione deve essere registrata e configurata in modo adeguato per eseguire chiamate API su Fabric. Per altre informazioni, vedere Creare un'app Microsoft Entra in Azure.
L'utente autenticato che chiama l'API deve essere un membro dell'area di lavoro in cui si trovano sia l'API che gli elementi dell'origine dati con un ruolo Collaboratore. Per altre informazioni, vedere Concedere agli utenti l'accesso alle aree di lavoro.
Prima di connettere un'applicazione, è necessario avere un'API per GraphQL in Fabric. Per altre informazioni, vedere Creare un'API per GraphQL in Fabric e aggiungere dati.

Creare un'app Microsoft Entra

Nei passaggi seguenti viene illustrato come configurare il supporto per un'applicazione ReactJS in Entra.

Accedi al portale di Azure.
Cerca e seleziona Microsoft Entra ID.
Nell'elenco Gestisci selezionare Registrazione app.
Seleziona Nuova registrazione.
Specificare le informazioni necessarie:
- Nome : immettere un nome per l'applicazione.
- Tipi di account supportati: selezionare gli account che si vuole supportare per l'app.
- (Facoltativo) URI di reindirizzamento: immettere un URI, se necessario.
Selezionare Registra. I valori id applicazione applicazione (client) e ID directory (tenant) dell'app Microsoft Entra vengono visualizzati nella casella Riepilogo. Registrare questi valori perché sono necessari in un secondo momento.
Nell'elenco Gestisci selezionare Autorizzazioni API e quindi Aggiungi autorizzazione.
Aggiungere il servizio PowerBI, selezionare Autorizzazioni delegate e selezionare le autorizzazioni Item.Execute.All e Datamart.ReadWrite.All. Assicurarsi che il consenso amministratore non sia obbligatorio.
Tornare all'elenco Gestisci , selezionare Autenticazione, selezionare Aggiungi una piattaforma e quindi selezionare Applicazione a pagina singola.
Ai fini dello sviluppo locale, aggiungere http://localhost:3000 in URI di reindirizzamento e verificare che l'applicazione sia abilitata per il flusso del codice di autorizzazione con la chiave di prova per Lo scambio di codice (PKCE). Selezionare il pulsante Configura per salvare le modifiche.
Tornare a Autorizzazione, scorrere verso il basso fino a Impostazioni avanzate e, in Consenti flussi client pubblici, selezionare Sì per Abilita i flussi per dispositivi mobili e desktop seguenti.

Configurare un'API GraphQL di esempio per l'accesso alle applicazioni

In questo esempio viene creata un'API GraphQL per esporre i dati sample Lakehouse ai client.

Nel portale infrastruttura selezionare Ingegneria dei dati dal commutatore del carico di lavoro nella parte inferiore della barra di spostamento. Se si è nella casa fabric, è anche possibile selezionare la scheda Ingegneria dei dati.
Nell'esperienza di Ingegneria dei dati selezionare Usa un esempio e in Lakehouse selezionare Festività pubbliche per creare automaticamente un nuovo Lakehouse con i dati delle festività pubbliche.
Seguendo la procedura descritta in Creare un'API per GraphQL, creare una nuova API GraphQL e selezionare lakehouse creata. Aggiungere la tabella festività pubblica per consentire ai client di accedere a questi dati.

Testare l'API GraphQL nell'editor di API usando la query di esempio seguente. È la stessa query usata nell'applicazione client React:

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

Selezionare Copy endpoint (Copia endpoint ) sulla barra degli strumenti dell'elemento API.
Nella schermata Copia collegamento selezionare Copia.
Come ID client e ID tenant dell'app Entra registrato in precedenza, copiare l'URI dell'endpoint come richiesto in un secondo momento.

Configurare un'app React per accedere all'API delle festività pubbliche

Usiamo un'app React esistente come punto di partenza. Seguire tutti i passaggi dell'esercitazione Creare un'applicazione a pagina singola React e prepararla per l'autenticazione per creare un progetto React con l'autenticazione Entra già configurata, inclusi file e cartelle aggiuntivi da aggiungere alla struttura del progetto. È sufficiente modificare tre file per adattare l'app per il caso d'uso graphQL.

Nella cartella src aprire il file authConfig.js e sostituire il contenuto del file con il frammento di codice seguente:

 /*
  * 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: 
  * https://docs.microsoft.com/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes
  */
 export const loginRequest = {
     scopes: ["https://analysis.windows.net/powerbi/api/Item.Execute.All","https://analysis.windows.net/powerbi/api/Datamart.ReadWrite.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",
 };

Come si può notare nel codice precedente, è importante usare l'ambito corretto per accedere all'applicazione. In questo caso https://analysis.windows.net/powerbi/api/Item.Execute.All e https://analysis.windows.net/powerbi/api/Datamart.ReadWrite.All.

Importante

Gli ambiti possono cambiare durante l'anteprima dell'API di Microsoft Fabric per GraphQL.

Sostituire i valori seguenti con i valori dell'interfaccia di amministrazione di Microsoft Entra.
- clientId - Identificatore dell'applicazione, detto anche client. Sostituire Enter_the_Application_Id_Here con il valore ID applicazione (client) registrato in precedenza dalla pagina di panoramica dell'applicazione Entra registrata.
- authority - Questo è composto da due parti:
  - L'istanza è l'endpoint del provider di servizi cloud. Verificare i diversi endpoint disponibili nei cloud nazionali.
  - L'ID tenant è l'identificatore del tenant in cui è registrata l'applicazione. Sostituire Enter_the_Tenant_Info_Here con il valore ID directory (tenant) registrato in precedenza dalla pagina di panoramica dell'applicazione registrata.
- graphQLEndpoint - API infrastruttura per l'endpoint GraphQL. Sostituire Enter_the_GraphQL_Endpoint_Here con l'endpoint dell'API GraphQL registrato in precedenza.
Salvare il file.

Nella stessa cartella src aprire il file App.js e sostituire il contenuto del file con il frammento di codice seguente:

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

Salvare il file.

Infine, nella cartella src/components aprire il file ProfileData.jsx e sostituire il contenuto del file con il frammento di codice seguente:

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

Salvare tutte le modifiche apportate al file.
Nell'applicazione terminale preferita passare alla cartella radice del progetto React ed eseguire il comando npm start per testare l'applicazione in locale.
Dopo che l'applicazione viene caricata nel browser da http://localhost:3000, seguire la procedura descritta nell'ultima parte dell'esercitazione Chiamare l'API dall'applicazione per l'autenticazione .
Dopo aver eseguito l'accesso, fare clic sul pulsante API Di Query Fabric per GraphQL Data.
Una richiesta autenticata riuscita all'API GraphQL in Fabric restituisce i dati dalla query GraphQL a Lakehouse nell'applicazione client React:

Altri linguaggi

Trovare C#, Python e altri esempi di linguaggio per la connessione all'API GraphQL nel repository GitHub degli esempi di Microsoft Fabric.

Condividi tramite

Connettere le applicazioni all'API infrastruttura per GraphQL

Prerequisiti

Creare un'app Microsoft Entra

Configurare un'API GraphQL di esempio per l'accesso alle applicazioni

Configurare un'app React per accedere all'API delle festività pubbliche

Altri linguaggi

Commenti e suggerimenti

Commenti e suggerimenti

Risorse aggiuntive

Condividi tramite

Connettere le applicazioni all'API infrastruttura per GraphQL

Prerequisiti

Creare un'app Microsoft Entra

Configurare un'API GraphQL di esempio per l'accesso alle applicazioni

Configurare un'app React per accedere all'API delle festività pubbliche

Altri linguaggi

Contenuto correlato

Commenti e suggerimenti

Commenti e suggerimenti

Risorse aggiuntive