Condividi tramite

Connettere le applicazioni all'API Fabric per GraphQL

Per connettere un'applicazione a un'API per GraphQL, sono necessari tre dettagli chiave: un ID client, l'ID tenant e l'indirizzo dell'endpoint GraphQL in Fabric. Le sezioni seguenti illustrano come creare e recuperare i dettagli necessari e accedere all'API usando un'applicazione React di esempio.

Altri linguaggi

Questa esercitazione illustra come connettere un'applicazione di esempio React all'API fabric per GraphQL. Gli esempi di linguaggio C#, Python e altri sono disponibili nel repository GitHub degli esempi di Microsoft Fabric.

Prerequisiti

  • Prima di connettere un'applicazione, assicurarsi di avere un'API per GraphQL in Fabric. Per altre informazioni, si veda Creare un'API per GraphQL in Fabric e aggiungere dati.

  • L'API per GraphQL richiede che le applicazioni usino Microsoft Entra per l'autenticazione. Registrare e configurare l'applicazione per eseguire chiamate API su Fabric. Per altre informazioni, si veda Creare un'app Microsoft Entra in Azure.

  • Le credenziali autenticate (entità utente, entità servizio o identità gestita) che chiamano l'API devono avere autorizzazioni di esecuzione per l'API GraphQL (opzione Esegui query e mutazioni quando si aggiungono autorizzazioni di accesso diretto). Se si usa Single Sign-On (SSO) come opzione di connettività nell'API, assicurarsi che le credenziali dispongano di autorizzazioni di lettura o scrittura nell'origine dati scelta. Per altre informazioni, vedere Connetti a un'origine dati e crea lo schema.

Creare un'app Microsoft Entra

I passaggi seguenti illustrano come configurare il supporto per un'applicazione ReactJS in Microsoft Entra.

  1. Registrare un'applicazione usando i passaggi descritti in Avvio rapido: Registrare un'applicazione con Microsoft Identity Platform.

  2. I valori ID 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.

  3. Nell'elenco Gestisci selezionare autorizzazioni API , quindi Aggiungi autorizzazione.

  4. Aggiungere il servizio PowerBI, selezionare Autorizzazioni delegate e selezionare le autorizzazioni GraphQLApi.Execute.All. Verificare che il consenso dell'amministratore non sia obbligatorio.

  5. Tornare all'elenco Gestisci, selezionare Autenticazione>Aggiungi una piattaforma>applicazione a pagina singola.

  6. 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. Se l'applicazione rileva un errore correlato alle richieste tra le origini, aggiungere la piattaforma applicazioni per dispositivi mobili e desktop nel passaggio precedente con lo stesso URI di reindirizzamento.

  7. Tornare a Authentication, scorrere verso il basso fino a Advanced Settings e, in Consenti flussi client pubblici, selezionare Sì per Abilitare i flussi per dispositivi mobili e desktop seguenti.

Impostare un'API GraphQL di esempio per l'accesso all'applicazione

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

  1. Nella home page del portale di Infrastruttura selezionare Ingegneria dei dati dall'elenco dei carichi di lavoro.

  2. Nell'esperienza di ingegneria dei dati selezionare Usa un esempio e in Lakehouse selezionare Festività pubbliche per creare automaticamente un nuovo Lakehouse con dati festivi pubblici.

    Screenshot della selezione dell'opzione data Lakehouse di esempio.

  3. Seguire la procedura descritta in Creare un'API per GraphQL per creare una nuova API GraphQL e selezionare il Lakehouse creato. Aggiungere la tabella festività pubblica in modo che i client possano accedere a questi dati.

    Screenshot dell'aggiunta dell'esempio Lakehouse come origine dati GraphQL.

  4. Testare l'API GraphQL nell'editor API utilizzando la seguente query di esempio. È 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
     }
   }
 }

  5. Selezionare Copia endpoint sulla barra degli strumenti dell'elemento API.

    Screenshot delle opzioni della barra degli strumenti per un elemento API.

  6. Nella schermata Copia collegamento selezionare Copia.

    Screenshot della finestra di dialogo Copia link, che mostra dove selezionare Copia.

  7. Usare l'ID client e l'ID tenant dell'app Microsoft Entra registrati in precedenza e copiare l'URI dell'endpoint perché è necessario in un secondo momento.

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

Annotazioni

Se si preferisce ignorare i passaggi manuali seguenti, è possibile clonare il repository GitHub con l'applicazione completa. Seguire il passaggio 3 per aggiungere dettagli specifici sull'endpoint GraphQL e sugli ID recuperati da Microsoft Entra al file authConfig.js, installare le dipendenze con npm install e andare al passaggio 9 per procedere con il test dell'esecuzione dell'applicazione.

  1. Usare un'app React esistente come punto di partenza. Seguire i passaggi dell'esercitazione Creare un'applicazione a pagina singola React e prepararla per l'autenticazione per creare un progetto React con l'autenticazione di Microsoft Entra configurata, inclusi i file e le cartelle necessari aggiunti alla struttura del progetto. Modificare tre file per adattare l'app per il caso d'uso graphQL.

  2. src Nella cartella aprire il authConfig.js file 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: 
 * [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",
};

    Come si può vedere nel codice qui sopra, per accedere all'applicazione è importante utilizzare l'ambito corretto. In questo caso https://analysis.windows.net/powerbi/api/GraphQLApi.Execute.All.

  3. 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 Application(client) registrato in precedenza dalla pagina di panoramica dell'applicazione Microsoft Entra registrata.

    • authority - Questo è composto da due parti:

      • L' Istanza è l'endpoint del provider di servizi cloud. Verificare i diversi endpoint disponibili in Cloud nazionali.

      • L' ID tenant è l'identificatore del tenant dove è 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 : l'API di infrastruttura per l'endpoint GraphQL. Sostituire Enter_the_GraphQL_Endpoint_Here con l'endpoint API di GraphQL registrato in precedenza.

  4. Salvare il file.

  5. Nella stessa src cartella aprire il App.js file 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>
  );
}

  6. Salvare il file.

  7. Infine, nella src/components cartella aprire il ProfileData.jsx file 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>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. Salvare tutte le modifiche ai file.

  9. Nell'applicazione terminale passare alla cartella radice del progetto React ed eseguire il comando npm start per testare l'applicazione in locale.

  10. 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.

  11. Dopo aver eseguito l'accesso, selezionare il pulsante API di Query Fabric per i dati GraphQL.

    Screenshot dell'app di esempio React dopo l'accesso.

  12. Una richiesta autenticata riuscita all'API GraphQL in Fabric restituisce dati dalla query GraphQL a Lakehouse nell'applicazione client React:

    Screenshot dell'app di esempio React dopo aver ricevuto la richiesta GraphQL.

Contenuto correlato

  • Last updated on