Menyambungkan aplikasi ke Fabric API untuk GraphQL

Untuk menyambungkan aplikasi ke API untuk GraphQL, Anda memerlukan tiga detail utama: ID Klien, ID Penyewa Anda, dan alamat titik akhir GraphQL Anda di Fabric. Bagian berikut menjelaskan cara membuat dan mengambil detail yang diperlukan dan mengakses API Anda menggunakan aplikasi React sampel.

Bahasa lainnya

Tutorial ini menjelaskan cara menghubungkan aplikasi sampel React ke Fabric API untuk GraphQL. Anda menemukan C#, Python, dan sampel bahasa lain di repositori GitHub Sampel Microsoft Fabric.

Prasyarat

Sebelum menyambungkan aplikasi, pastikan Anda memiliki API untuk GraphQL di Fabric. Untuk informasi selengkapnya, lihat Membuat API untuk GraphQL di Fabric dan menambahkan data.
API untuk GraphQL mengharuskan aplikasi menggunakan Microsoft Entra untuk autentikasi. Daftarkan dan konfigurasikan aplikasi Anda untuk melakukan panggilan API terhadap Fabric. Untuk informasi selengkapnya, lihat Membuat aplikasi Microsoft Entra di Azure.
Kredensial terautentikasi (prinsipal pengguna, perwakilan layanan, atau identitas terkelola) yang memanggil API memerlukan izin Eksekusi untuk API GraphQL (opsi Menjalankan Kueri dan Mutasi saat menambahkan izin akses langsung). Jika menggunakan single sign-on (SSO) sebagai opsi konektivitas di API, pastikan kredensial memiliki izin baca atau tulis di sumber data yang dipilih. Untuk informasi selengkapnya, lihat Menyambungkan ke sumber data dan membangun skema Anda.

Membuat aplikasi Microsoft Entra

Langkah-langkah berikut menjelaskan cara mengonfigurasi dukungan untuk aplikasi ReactJS di Microsoft Entra.

Daftarkan aplikasi menggunakan langkah-langkah yang dijelaskan pada Panduan Memulai Cepat : Daftarkan aplikasi dengan platform identitas Microsoft.
Nilai ID Aplikasi Microsoft Entra (klien) dan ID Direktori (penyewa) muncul di kotak Ringkasan. Rekam nilai-nilai ini karena diperlukan nanti.
Di bawah daftar Kelola , pilih izin API , lalu Tambahkan izin.
Tambahkan Layanan PowerBI, pilih Izin yang didelegasikan, dan pilih izin GraphQLApi.Execute.All . Konfirmasikan bahwa persetujuan admin tidak diperlukan.
Kembali ke daftar Kelola, pilih Autentikasi> Tambahkanaplikasi satu halaman>.
Untuk tujuan pengembangan lokal, tambahkan http://localhost:3000 di bawah URI Pengalihan dan konfirmasikan bahwa aplikasi diaktifkan untuk alur kode otorisasi dengan Proof Key for Code Exchange (PKCE). Pilih tombol Konfigurasi untuk menyimpan perubahan Anda. Jika aplikasi mengalami kesalahan yang terkait dengan permintaan lintas asal, tambahkan platform Aplikasi seluler dan desktop di langkah sebelumnya dengan URI pengalihan yang sama.
Kembali ke Autentikasi, gulir ke bawah ke Pengaturan Tingkat Lanjut dan, di bawah Izinkan alur klien publik, pilih Ya untuk Mengaktifkan alur seluler dan desktop berikut.

Menyiapkan sampel GraphQL API untuk akses aplikasi

Dalam contoh ini, kami membuat API GraphQL untuk mengekspos data Lakehouse sampel ke klien.

Dari beranda portal Fabric, pilih Rekayasa Data dari daftar beban kerja.
Dalam pengalaman Rekayasa Data, pilih Gunakan sampel, dan di bawah Lakehouse, pilih Hari libur umum untuk membuat Lakehouse baru secara otomatis dengan data hari libur umum.
Ikuti langkah-langkah dari Buat API untuk GraphQL untuk membuat API GraphQL baru dan pilih Lakehouse yang Anda buat. Tambahkan tabel hari libur nasional sehingga klien dapat mengakses data ini.

Uji API GraphQL di editor API menggunakan kueri sampel berikut. Ini adalah kueri yang sama yang digunakan dalam aplikasi klien 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
     }
   }
 }

Pilih Salin titik akhir pada toolbar item API.
Di layar Salin tautan, pilih Salin.
Gunakan ID Klien dan ID Penyewa dari aplikasi Microsoft Entra yang direkam sebelumnya, dan salin URI titik akhir karena diperlukan nanti.

Mengonfigurasi aplikasi React untuk mengakses API hari libur umum

Nota

Jika Anda lebih suka melewati langkah-langkah manual berikut, Anda dapat mengkloning repositori GitHub dengan aplikasi lengkap. Ikuti langkah 3 untuk menambahkan detail spesifik tentang titik akhir dan ID GraphQL yang diambil dari Microsoft Entra ke file authConfig.js, instal dependensi dengan npm install dan lewati ke langkah 9 untuk melanjutkan pengujian eksekusi aplikasi.

Gunakan aplikasi React yang ada sebagai titik awal. Ikuti langkah-langkah dalam tutorial Membuat aplikasi satu halaman React dan menyiapkannya untuk autentikasi untuk membuat proyek React yang sudah dikonfigurasi dengan autentikasi Microsoft Entra, termasuk penambahan file dan folder yang diperlukan ke dalam struktur proyek. Ubah tiga file untuk menyesuaikan aplikasi untuk kasus penggunaan GraphQL.

src Di folder , buka authConfig.js file dan ganti konten file dengan cuplikan kode berikut:

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

Seperti yang Anda lihat dalam kode di atas, penting untuk menggunakan cakupan yang benar untuk mengakses aplikasi. Dalam kasus https://analysis.windows.net/powerbi/api/GraphQLApi.Execute.Allkami .

Ganti nilai berikut dengan nilai dari pusat admin Microsoft Entra.
- clientId - Pengidentifikasi aplikasi, juga disebut sebagai klien. Ganti Enter_the_Application_Id_Here dengan nilai ID Aplikasi (klien) yang direkam sebelumnya dari halaman gambaran umum aplikasi Microsoft Entra terdaftar.
- otoritas - Ini terdiri dari dua bagian:
  - Instans adalah titik akhir penyedia cloud. Periksa dengan berbagai titik akhir yang tersedia di cloud Nasional.
  - ID Penyewa adalah pengidentifikasi penyewa tempat aplikasi terdaftar. Ganti Enter_the_Tenant_Info_Here dengan nilai ID Direktori (penyewa) yang direkam sebelumnya dari halaman gambaran umum aplikasi terdaftar.
- graphQLEndpoint - API Fabric untuk titik akhir GraphQL. Ganti Enter_the_GraphQL_Endpoint_Here dengan titik akhir GraphQL API yang direkam sebelumnya.
Simpan file.

Di folder yang sama src , buka App.js file dan ganti konten file dengan cuplikan kode berikut:

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

Simpan file.

Terakhir, di bawah src/components folder, buka ProfileData.jsx file dan ganti konten file dengan cuplikan kode berikut:

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

Simpan semua perubahan file.
Di aplikasi terminal Anda, buka folder akar proyek React dan jalankan perintah npm start untuk menguji aplikasi secara lokal.
Setelah aplikasi dimuat di browser Anda dari http://localhost:3000, ikuti langkah-langkah pada bagian terakhir tutorial Panggil API dari aplikasi.
Setelah masuk, pilih tombol Query Fabric API untuk Data GraphQL.
Permintaan terautentikasi yang berhasil ke API GraphQL di Fabric mengembalikan data dari kueri GraphQL ke Lakehouse di aplikasi klien React:

Pelajari cara membuat aplikasi Microsoft Entra di Azure.
Pelajari cara membuat API untuk GraphQL di Fabric dan menambahkan data.
Pelajari cara membuat aplikasi satu halaman React dan menyiapkannya untuk autentikasi.
Pelajari cara mengkueri beberapa sumber data di Fabric API untuk GraphQL.
Jelajahi repositori GitHub dengan contoh aplikasi React.

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2025-08-22