Conectar aplicaciones a la API de Fabric para GraphQL

Para conectar una aplicación a una API para GraphQL, necesita tres detalles clave: un identificador de cliente, el identificador de inquilino y la dirección del punto de conexión de GraphQL en Fabric. En las secciones siguientes se explica cómo crear y recuperar los detalles necesarios y acceder a la API mediante una aplicación react de ejemplo.

Otros idiomas

En este tutorial se explica cómo conectar una aplicación de ejemplo de React a Fabric API para GraphQL. Encontrará C#, Python y otros ejemplos de lenguaje en el repositorio de GitHub Ejemplos de Microsoft Fabric.

Requisitos previos

Antes de conectar una aplicación, asegúrese de que tiene una API para GraphQL en Fabric. Para obtener más información, consulte Crear una API para GraphQL en Fabric y añadir datos.
La API para GraphQL requiere que las aplicaciones usen Microsoft Entra para la autenticación. Registre y configure la aplicación para realizar llamadas API en Fabric. Para obtener más información, vea Crear una aplicación de Microsoft Entra en Azure.
La credencial autenticada (entidad de servicio, entidad de servicio o identidad administrada) que llama a la API necesita permisos de ejecución para graphQL API (opción Ejecutar consultas y mutaciones al agregar permisos de acceso directo). Si usa el inicio de sesión único (SSO) como opción de conectividad en la API, asegúrese de que la credencial tiene permisos de lectura o escritura en el origen de datos elegido. Para obtener más información, consulte Conexión a un origen de datos y compilación del esquema.

Crear una aplicación de Microsoft Entra

En los pasos siguientes se explica cómo configurar la compatibilidad con una aplicación ReactJS en Microsoft Entra.

Registro de una aplicación mediante los pasos descritos en Inicio rápido: Registro de una aplicación con la plataforma de identidad de Microsoft.
Los valores de Id. de aplicación de aplicación de Microsoft Entra (cliente) e Id. de directorio (inquilino) aparecen en el cuadro Resumen. Registre estos valores porque son necesarios más adelante.
En la lista Administrar, seleccione permisos de APIy luego Agregar permiso.
Agregue el servicio PowerBI, seleccione Permisos delegados y seleccione GraphQLApi.Execute.All permisos. Confirme que el consentimiento del administrador no es necesario.
Vuelva a la lista Administrar y seleccione Autenticación>Agregar una> de plataforma.
Para fines de desarrollo local, agregue http://localhost:3000 en URI de redirección y confirme que la aplicación está habilitada para el flujo de código de autorización con clave de prueba para Intercambio de código (PKCE). Seleccione el botón Configurar para guardar los cambios. Si la aplicación encuentra un error relacionado con las solicitudes entre orígenes, agregue la plataforma aplicaciones móviles y de escritorio en el paso anterior con el mismo URI de redirección.
Vuelva a Autenticación, desplácese hasta Configuración avanzada y, en Permitir flujos de clientes públicos, seleccione Sí para Habilitar los siguientes flujos de dispositivos móviles y de escritorio.

Configuración de una API de GraphQL de ejemplo para el acceso a aplicaciones

En este ejemplo, creamos una API de GraphQL para exponer datos de ejemplo de Lakehouse a los clientes.

Desde la página principal del portal de Fabric, seleccione Ingeniería de datos en la lista de cargas de trabajo.
En la experiencia de ingeniería de datos, seleccione Usar un ejemplo y, en Lakehouse, seleccione Días festivos públicos para crear automáticamente una nueva instancia de Lakehouse con datos de días festivos públicos.
Siga los pasos descritos en Creación de una API para GraphQL para crear una nueva GRAPHQL API y seleccionar la instancia de Lakehouse que creó. Agregue la tabla días festivos públicos para que los clientes puedan acceder a estos datos.

Pruebe la API de GraphQL en el editor de API mediante la siguiente consulta de ejemplo. Es la misma consulta que se usa en la aplicación cliente de 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
     }
   }
 }

Seleccione Copiar punto de conexión en la barra de herramientas del elemento de API.
En la pantalla Copiar vínculo, seleccione Copiar.
Use el identificador de cliente y el identificador de inquilino de la aplicación De Microsoft Entra registrados anteriormente y copie el URI del punto de conexión porque es necesario más adelante.

Configuración de una aplicación React para acceder a la API de días festivos públicos

Nota:

Si prefiere omitir los pasos manuales siguientes, puede clonar el repositorio de GitHub con la aplicación completa. Siga el paso 3 para agregar detalles específicos sobre el punto de conexión de GraphQL e identificadores recuperados de Microsoft Entra al archivo authConfig.js, instalar dependencias con npm install y ir al paso 9 para continuar con la prueba de la ejecución de la aplicación.

Use una aplicación react existente como punto de partida. Siga los pasos del tutorial Creación de una aplicación de página única de React y preparación para la autenticación para crear un proyecto de React con la autenticación de Microsoft Entra configurada, incluidos los archivos y carpetas necesarios agregados a la estructura del proyecto. Cambie tres archivos para adaptar la aplicación para el caso de uso de GraphQL.

En la src carpeta , abra el authConfig.js archivo y reemplace el contenido del archivo por el siguiente fragmento de código:

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

Como puede ver en el código anterior, es importante usar el ámbito correcto para acceder a la aplicación. En nuestro caso https://analysis.windows.net/powerbi/api/GraphQLApi.Execute.All.

Reemplace los siguientes valores por los del Centro de administración de Microsoft Entra.
- clientId : el identificador de la aplicación, también conocido como cliente. Reemplace por Enter_the_Application_Id_Here el valor de id. de aplicación (cliente) que se registró anteriormente en la página de información general de la aplicación Microsoft Entra registrada.
- authority : consta de dos partes:
  - La instancia es el punto de conexión del proveedor de nube. Consulte los diferentes puntos de conexión disponibles en nubes nacionales.
  - El Id. de inquilino es el identificador del inquilino en el que está registrada la solicitud. Reemplace Enter_the_Tenant_Info_Here por el valor de identificador de directorio (inquilino) que se registró anteriormente en la página de información general de la aplicación registrada.
- graphQLEndpoint : la API de Fabric para el punto de conexión de GraphQL. Reemplace Enter_the_GraphQL_Endpoint_Here por el punto de conexión de la API de GraphQL registrado anteriormente.
Guarde el archivo.

En la misma src carpeta, abra el App.js archivo y reemplace el contenido del archivo por el siguiente fragmento de código:

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

Guarde el archivo.

Por último, en la src/components carpeta , abra el ProfileData.jsx archivo y reemplace el contenido del archivo por el siguiente fragmento de código:

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

Guarde todos los cambios.
En la aplicación terminal, vaya a la carpeta raíz del proyecto de React y ejecute el comando npm start para probar la aplicación localmente.
Una vez que la aplicación se cargue en el explorador desde http://localhost:3000, siga los pasos descritos en la última parte del tutorial Llamada a la API desde la aplicación.
Después de iniciar sesión, seleccione el botón Query Fabric API for GraphQL Data (Api de Query Fabric para datos de GraphQL).
Una solicitud autenticada correcta a GraphQL API en Fabric devuelve datos de la consulta GraphQL a Lakehouse en la aplicación cliente de React:

Aprenda a crear una aplicación de Microsoft Entra en Azure.
Obtenga información sobre cómo crear una API para GraphQL en Fabric y agregar datos.
Obtenga información sobre cómo crear una aplicación de página única de React y prepararla para la autenticación.
Obtenga información sobre cómo consultar varios orígenes de datos en Fabric API for GraphQL.
Explore el repositorio de GitHub con la aplicación React de ejemplo.

Comentarios

¿Le ha resultado útil esta página?

Last updated on 2025-08-22