เชื่อมต่อแอปพลิเคชันกับ Fabric API สําหรับ GraphQL

ในการเชื่อมต่อแอปพลิเคชันกับ API สําหรับ GraphQL คุณต้องมีรายละเอียดสําคัญสามประการ ได้แก่ รหัสไคลเอ็นต์ รหัส ผู้เช่า และ ที่อยู่ปลายทาง GraphQL ของคุณใน Fabric ส่วนต่อไปนี้จะอธิบายวิธีสร้างและดึงรายละเอียดที่จําเป็น และเข้าถึง API ของคุณโดยใช้แอปพลิเคชัน React ตัวอย่าง

ภาษาอื่น ๆ

บทช่วยสอนนี้อธิบายวิธีเชื่อมต่อแอปพลิเคชันตัวอย่าง React กับ Fabric API สําหรับ GraphQL คุณพบตัวอย่าง C#, Python และภาษาอื่นๆ ในที่เก็บ GitHub ตัวอย่าง Microsoft Fabric

ข้อกำหนดเบื้องต้น

ก่อนเชื่อมต่อแอปพลิเคชัน ตรวจสอบให้แน่ใจว่าคุณมี API สําหรับ GraphQL ใน Fabric สําหรับข้อมูลเพิ่มเติม ดูสร้าง API สําหรับ GraphQL ใน Fabric และเพิ่มข้อมูล
API สําหรับ GraphQL กําหนดให้แอปพลิเคชันต้องใช้ Microsoft Entra สําหรับการรับรองความถูกต้อง ลงทะเบียนและกําหนดค่าแอปพลิเคชันของคุณเพื่อทําการเรียก API กับ Fabric สําหรับข้อมูลเพิ่มเติม ดูสร้างแอป Microsoft Entra ใน Azure
ข้อมูลประจําตัวที่ผ่านการรับรองความถูกต้อง (ผู้ใช้หลัก บริการหลัก หรือข้อมูลประจําตัวที่มีการจัดการ) ที่เรียก API จําเป็นต้องมีสิทธิ์ดําเนินการสําหรับ GraphQL API (ตัวเลือกเรียกใช้คิวรีและการกลายพันธุ์เมื่อเพิ่มสิทธิ์การเข้าถึงโดยตรง) หากใช้การลงชื่อเพียงครั้งเดียว (SSO) เป็นตัวเลือกการเชื่อมต่อใน API ตรวจสอบให้แน่ใจว่าข้อมูลเข้าสู่ระบบมีสิทธิ์อ่านหรือเขียนในแหล่งข้อมูลที่เลือก สําหรับข้อมูลเพิ่มเติม โปรดดู เชื่อมต่อกับแหล่งข้อมูลและสร้าง schema ของคุณ

สร้างแอป Microsoft Entra

ขั้นตอนต่อไปนี้อธิบายวิธีการกําหนดค่าการสนับสนุนสําหรับแอปพลิเคชัน ReactJS ใน Microsoft Entra

ลงทะเบียนแอปพลิเคชันโดยใช้ขั้นตอนที่อธิบายไว้ใน เริ่มต้นใช้งานด่วน: ลงทะเบียนแอปพลิเคชันด้วยแพลตฟอร์มข้อมูลประจําตัวของ Microsoft
รหัส แอปพลิเคชัน (ไคลเอ็นต์) ของแอป Microsoft Entra และค่า รหัสไดเรกทอรี (ผู้เช่า) จะปรากฏในกล่อง สรุป บันทึกค่าเหล่านี้เนื่องจากจําเป็นต้องใช้ในภายหลัง
ภายใต้รายการ Manage ให้เลือกสิทธิ์ API จากนั้น เพิ่มสิทธิ์
เพิ่ม บริการ PowerBI เลือก สิทธิ์ที่ได้รับมอบหมาย และเลือก GraphQLApi.Execute.All permissions ยืนยันว่าไม่จําเป็นต้องได้รับความยินยอมจากผู้ดูแลระบบ
กลับไปที่รายการจัดการ เลือก การรับรองความถูกต้อง>เพิ่มแพลตฟอร์ม>แอปพลิเคชันหน้าเดียว
สําหรับการพัฒนาภายในเครื่อง ให้เพิ่มhttp://localhost:3000ภายใต้การเปลี่ยนเส้นทาง URI และยืนยันว่าแอปพลิเคชันเปิดใช้งานสําหรับโฟลว์รหัสการให้สิทธิ์ที่มี Proof Key สําหรับ Code Exchange (PKCE) เลือก ปุ่ม กําหนดค่า เพื่อบันทึกการเปลี่ยนแปลงของคุณ หากแอปพลิเคชันพบข้อผิดพลาดที่เกี่ยวข้องกับคําขอข้ามต้นทาง ให้เพิ่มแพลตฟอร์ม แอปพลิเคชันมือถือและเดสก์ท็อป ในขั้นตอนก่อนหน้าด้วย URI การเปลี่ยนเส้นทางเดียวกัน
กลับไปยังรับรองความถูกต้อง เลื่อนลงไปยัง การตั้งค่าขั้นสูง และภายใต้ อนุญาตโฟลว์ไคลเอ็นต์สาธารณะให้เลือก ใช่ สําหรับ เปิดใช้งานโฟลว์อุปกรณ์เคลื่อนที่และเดสก์ท็อปต่อไปนี้

ตั้งค่าตัวอย่าง GraphQL API สําหรับการเข้าถึงแอปพลิเคชัน

ในตัวอย่างนี้ เราสร้าง GraphQL API เพื่อเปิดเผยข้อมูลตัวอย่างของเลคเฮ้าส์ไปยังไคลเอ็นต์

จากโฮมเพจพอร์ทัล Fabric เลือกวิศวกรข้อมูลจากรายการของปริมาณงาน
ในประสบการณ์ วิศวกรรมข้อมูล ให้เลือก ใช้ตัวอย่าง และภายใต้ Lakehouse ให้เลือก วันหยุดนักขัตฤกษ์ เพื่อสร้าง Lakehouse ใหม่ที่มีข้อมูลวันหยุดนักขัตฤกษ์โดยอัตโนมัติ
ทําตามขั้นตอนจาก สร้าง API สําหรับ GraphQL เพื่อสร้าง GraphQL API ใหม่ และเลือก Lakehouse ที่คุณสร้างขึ้น เพิ่มตารางวันหยุดนักขัตฤกษ์เพื่อให้ลูกค้าสามารถเข้าถึงข้อมูลนี้ได้
ทดสอบ GraphQL API ในตัว แก้ไข API โดยใช้คิวรีตัวอย่างต่อไปนี้ เป็นแบบสอบถามเดียวกับที่ใช้ในแอปพลิเคชันไคลเอ็นต์ 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
     }
   }
 }
```
เลือก คัดลอกจุด สิ้นสุด บนแถบเครื่องมือของรายการ API
ในหน้าจอ คัดลอกลิงก์ เลือก คัดลอก
ใช้ รหัสไคลเอ็นต์ และ รหัสผู้เช่า จากแอป Microsoft Entra ที่บันทึกไว้ก่อนหน้านี้ และคัดลอก URI ปลายทางเนื่องจากจําเป็นในภายหลัง

กําหนดค่าแอป React เพื่อเข้าถึง API วันหยุดราชการ

หมายเหตุ

ถ้าคุณต้องการข้ามขั้นตอนด้วยตนเองต่อไปนี้ คุณสามารถโคลน ที่เก็บ GitHub ด้วยแอปพลิเคชันที่สมบูรณ์ ทําตามขั้นตอนที่ 3 เพื่อเพิ่มรายละเอียดเฉพาะเกี่ยวกับจุดสิ้นสุด GraphQL และรหัสของคุณที่ดึงมาจาก Microsoft Entra ไปยังไฟล์ authConfig.jsติดตั้งการขึ้นต่อกันด้วย npm install และข้ามไปยังขั้นตอนที่ 9 เพื่อดําเนินการทดสอบการดําเนินการแอปพลิเคชัน

ใช้แอป React ที่มีอยู่เป็นจุดเริ่มต้น ทําตามขั้นตอนในบทช่วยสอน สร้างแอปพลิเคชันหน้าเดียว React และเตรียมพร้อมสําหรับการรับรองความถูกต้อง เพื่อสร้างโครงการ React ที่มีการกําหนดค่าการรับรองความถูกต้องของ Microsoft Entra รวมถึงไฟล์และโฟลเดอร์ที่จําเป็นที่เพิ่มลงในโครงสร้างโครงการ เปลี่ยนไฟล์สามไฟล์เพื่อปรับแอปให้เหมาะกับกรณีการใช้งาน GraphQL

ใน src โฟลเดอร์ เปิด authConfig.js ไฟล์ และแทนที่เนื้อหาของไฟล์ด้วยส่วนย่อยของโค้ดต่อไปนี้:

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

ตามที่คุณเห็นในรหัสด้านบน สิ่งสําคัญคือต้องใช้ขอบเขตที่ถูกต้องเพื่อเข้าถึงแอปพลิเคชัน ในกรณี https://analysis.windows.net/powerbi/api/GraphQLApi.Execute.Allของเรา

แทนที่ค่าต่อไปนี้ด้วยค่าจากศูนย์การจัดการ Microsoft Entra
- clientId - ตัวระบุของแอปพลิเคชัน หรือที่เรียกว่าไคลเอ็นต์ แทนที่ด้วย Enter_the_Application_Id_Here ค่า รหัสแอปพลิเคชัน (ไคลเอ็นต์) ที่บันทึกไว้ก่อนหน้านี้จากหน้าภาพรวมของโปรแกรมประยุกต์ Microsoft Entra ที่ลงทะเบียน
- อํานาจ - ประกอบด้วยสองส่วน:
  - อินสแตนซ์คือจุดสิ้นสุดของผู้ให้บริการระบบคลาวด์ ตรวจสอบด้วยจุดสิ้นสุดที่พร้อมใช้งานที่แตกต่างกันในระบบ คลาวด์แห่งชาติ
  - รหัสผู้เช่าเป็นตัวระบุของผู้เช่าที่มีการลงทะเบียนแอปพลิเคชัน แทนที่ Enter_the_Tenant_Info_Here ด้วยค่า ID ไดเรกทอรี (ผู้เช่า) ที่ถูกบันทึกไว้ก่อนหน้านี้จากหน้าภาพรวมของแอปพลิเคชันที่ลงทะเบียนไว้
- graphQLEndpoint - Fabric API สําหรับตําแหน่งข้อมูล GraphQL แทนที่ Enter_the_GraphQL_Endpoint_Here ด้วยจุดสิ้นสุด GraphQL API ที่บันทึกไว้ก่อนหน้านี้
บันทึกไฟล์

ในโฟลเดอร์เดียวกัน src เปิด App.js ไฟล์ และแทนที่เนื้อหาของไฟล์ด้วยส่วนย่อยของโค้ดต่อไปนี้:

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

บันทึกไฟล์

สุดท้าย ใต้ src/components โฟลเดอร์ เปิด ProfileData.jsx ไฟล์ และแทนที่เนื้อหาของไฟล์ด้วยส่วนย่อยของโค้ดต่อไปนี้:

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

บันทึกการเปลี่ยนแปลงของไฟล์ทั้งหมด
ในแอปพลิเคชันเทอร์มินัลของคุณ ให้ไปที่โฟลเดอร์รากของโปรเจ็กต์ React และเรียกใช้คําสั่ง npm start เพื่อทดสอบแอปพลิเคชันในเครื่อง
เมื่อแอปพลิเคชันโหลดในเบราว์เซอร์ของคุณจาก http://localhost:3000ให้ทําตามขั้นตอนในส่วนสุดท้ายของบทช่วยสอน เรียก API จากแอปพลิเคชัน
หลังจากลงชื่อเข้าใช้แล้ว ให้เลือกปุ่ม Query Fabric API สําหรับข้อมูล GraphQL
คําขอที่ได้รับการรับรองความถูกต้องสําเร็จไปยัง GraphQL API ใน Fabric จะส่งคืนข้อมูลจากคิวรี GraphQL ไปยัง Lakehouse ในแอปพลิเคชันไคลเอ็นต์ React:

เรียนรู้วิธีสร้างแอป Microsoft Entra ใน Azure
เรียนรู้วิธีสร้าง API สําหรับ GraphQL ใน Fabric และเพิ่มข้อมูล
เรียนรู้วิธีสร้างแอปพลิเคชันหน้าเดียวของ React และเตรียมพร้อมสําหรับการรับรองความถูกต้อง
เรียนรู้วิธีสืบค้นแหล่งข้อมูลหลายแหล่งใน Fabric API สําหรับ GraphQL
สํารวจที่เก็บ GitHub ด้วยแอป React ตัวอย่าง

คำติชม

หน้านี้มีประโยชน์หรือไม่

Last updated on 2025-08-20