Connecter les applications à l’API Fabric pour GraphQL

Pour connecter une application à une API pour GraphQL, vous avez besoin de trois détails clés : un ID client, votre ID de locataire et votre adresse de point de terminaison GraphQL dans Fabric. Les sections suivantes expliquent comment créer et récupérer les détails requis et accéder à votre API à l’aide d’un exemple d’application React.

Autres langages

Ce tutoriel explique comment connecter un exemple d’application React à l’API Fabric pour GraphQL. Vous trouverez des exemples de langage C#, Python et autres dans le référentiel GitHub d’exemples Microsoft Fabric.

Prérequis

Avant de connecter une application, vérifiez que vous disposez d’une API pour GraphQL dans Fabric. Pour plus d’informations, consultez Créer une API pour GraphQL dans Fabric et ajouter des données.
L’API pour GraphQL nécessite que les applications utilisent Microsoft Entra pour l’authentification. Inscrivez et configurez votre application pour effectuer des appels d’API sur Fabric. Pour plus d’informations, consultez Créer une application Microsoft Entra dans Azure.
Les informations d’identification authentifiées (principal de l’utilisateur, principal de service ou identité managée) appelant l’API ont besoin d’autorisations d’exécution pour l’API GraphQL (Option Exécuter les requêtes et mutations lors de l’ajout d’autorisations d’accès direct). Si vous utilisez l’authentification unique (SSO) comme option de connectivité dans l’API, vérifiez que les informations d’identification disposent d’autorisations de lecture ou d’écriture dans la source de données choisie. Pour plus d’informations, consultez Se connecter à une source de données et construire votre schéma.

Créer une application Microsoft Entra

Les étapes suivantes expliquent comment configurer la prise en charge d’une application ReactJS dans Microsoft Entra.

Inscrivez une application en suivant les étapes décrites dans Démarrage rapide : Inscrire une application avec la plateforme d’identités Microsoft.
Les valeurs d’ID et d’ID d’annuaire (locataire) de l’application Microsoft Entra s’affichent dans la zone Résumé. Enregistrez ces valeurs, car elles sont requises ultérieurement.
Sous la liste Gérer, sélectionnez Autorisations d’API, puis Ajouter une autorisation.
Ajoutez le service PowerBI, sélectionnez Autorisations déléguées, puis sélectionnez Autorisations GraphQLApi.Execute.All . Vérifiez que le consentement de l’administrateur n’est pas obligatoire.
Revenez à la liste Gérer, sélectionnez Authentification>Ajouter une> de plateforme.
À des fins de développement local, ajoutez http://localhost:3000 sous URI de redirection, puis vérifiez que l’application est activée pour le flux de code d’autorisation avec la clé de preuve PKCE (Proof Key for Code Exchange). Sélectionnez le bouton Configurer pour enregistrer vos modifications. Si l’application rencontre une erreur liée aux requêtes inter-origines, ajoutez la plateforme Des applications mobiles et de bureau à l’étape précédente avec le même URI de redirection.
Revenez à Authentification, faites défiler jusqu’à Paramètres avancés et, sous Autoriser les flux clients publics, sélectionnez Oui pour Activer les flux suivants pour mobile et bureau.

Configurer un exemple d’API GraphQL pour l’accès aux applications

Dans cet exemple, nous créons une API GraphQL pour exposer des exemples de données Lakehouse aux clients.

Dans la page d’accueil du portail Fabric, sélectionnez Engineering données dans la liste des charges de travail.
Dans l’expérience d’ingénierie des données, sélectionnez Utiliser un exemple, puis, sous Lakehouse, sélectionnez Jours fériés pour créer automatiquement un Lakehouse avec des données de jours fériés.
Suivez les étapes de créer une API pour GraphQL pour créer une API GraphQL et sélectionnez lakehouse que vous avez créée. Ajoutez la table des jours fériés afin que les clients puissent accéder à ces données.

Testez l’API GraphQL dans l’éditeur d’API à l’aide de l’exemple de requête suivant. Il s’agit de la même requête utilisée dans l’application cliente 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
     }
   }
 }

Sélectionnez Copier le point de terminaison dans la barre d’outils de l’élément d’API.
Dans l'écran Copier le lien, sélectionnez Copier.
Utilisez l’ID client et l’ID de locataire de l’application Microsoft Entra enregistrée précédemment, puis copiez l’URI du point de terminaison, car il est nécessaire ultérieurement.

Configurer une application React pour accéder à l’API jours fériés

Remarque

Si vous préférez ignorer les étapes manuelles suivantes, vous pouvez cloner le dépôt GitHub avec l’application complète. Suivez l’étape 3 pour ajouter des détails spécifiques sur votre point de terminaison GraphQL et les ID récupérés de Microsoft Entra dans le fichier authConfig.js, installer les dépendances avec npm install et passer à l’étape 9 pour poursuivre le test de l’exécution de l’application.

Utilisez une application React existante comme point de départ. Suivez les étapes décrites dans le tutoriel Créer une application à page unique React et préparez-la pour l’authentification afin de créer un projet React avec l’authentification Microsoft Entra configurée, y compris les fichiers et dossiers requis ajoutés à la structure du projet. Modifiez trois fichiers pour adapter l’application pour le cas d’usage GraphQL.

Dans le src dossier, ouvrez le authConfig.js fichier et remplacez le contenu du fichier par l’extrait de code suivant :

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

Comme vous pouvez le voir dans le code ci-dessus, il est important d’utiliser l’étendue correcte pour accéder à l’application. Dans notre cas https://analysis.windows.net/powerbi/api/GraphQLApi.Execute.All.

Remplacez les valeurs suivantes par les valeurs du centre d’administration Microsoft Entra.
- clientId : identificateur de l’application, également appelé client. Remplacez Enter_the_Application_Id_Here par la valeur d’ID Application(client) enregistrée précédemment à partir de la page vue d’ensemble de l’application Microsoft Entra inscrite.
- autorité : il s’agit de deux parties :
  - L’instance est le point de terminaison du fournisseur de cloud. Vérifiez les différents points de terminaison disponibles dans les clouds nationaux.
  - L’ID du locataire est l’identificateur du locataire dans lequel l’application est inscrite. Remplacez Enter_the_Tenant_Info_Here par la valeur ID d’annuaire (locataire) qui a été enregistrée précédemment depuis la page d'aperçu de l'application enregistrée.
- graphQLEndpoint : API Fabric pour point de terminaison GraphQL. Remplacez Enter_the_GraphQL_Endpoint_Here par le point de terminaison de l’API GraphQL enregistré précédemment.
Enregistrez le fichier.

Dans le même src dossier, ouvrez le App.js fichier et remplacez le contenu du fichier par l’extrait de code suivant :

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

Enregistrez le fichier.

Enfin, sous le src/components dossier, ouvrez le ProfileData.jsx fichier et remplacez le contenu du fichier par l’extrait de code suivant :

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

Enregistrez toutes les modifications du fichier.
Dans votre application terminale, accédez au dossier racine du projet React et exécutez la commande npm start pour tester l’application localement.
Une fois l’application chargée dans votre navigateur à partir de http://localhost:3000, suivez les étapes de la dernière partie du didacticiel Appeler l’API à partir de l’application.
Après vous être connecté, sélectionnez le bouton API Query Fabric pour les données GraphQL.
Une demande authentifiée réussie auprès de l’API GraphQL dans Fabric retourne des données de la requête GraphQL à Lakehouse dans l’application cliente React :

Découvrez comment créer une application Microsoft Entra dans Azure.
Découvrez comment créer une API pour GraphQL dans Fabric et ajouter des données.
Découvrez comment créer une application à page unique React et la préparer pour l’authentification.
Découvrez comment interroger plusieurs sources de données dans l’API Fabric pour GraphQL.
Explorez le référentiel GitHub avec l’exemple d’application React.

Commentaires

Cette page a-t-elle été utile ?

Last updated on 2025-08-22