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

2025-06-13

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

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

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

สร้างแอป Microsoft Entra

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

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

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

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

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

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

เราใช้แอป 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: 
  * https://docs.microsoft.com/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 ด้วย ค่า ID แอปพลิเคชัน (ไคลเอ็นต์) ที่ถูกบันทึกไว้ก่อนหน้านี้จากหน้าภาพรวมของแอปพลิเคชัน Microsoft Entra ที่ลงทะเบียนไว้
- authority -นี้ประกอบด้วยสองส่วน:
  - อินสแตนซ์คือจุดสิ้นสุดของผู้ให้บริการระบบคลาวด์ ตรวจสอบด้วยจุดสิ้นสุดที่พร้อมใช้งานที่แตกต่างกันในระบบ คลาวด์แห่งชาติ
  - รหัสผู้เช่าเป็นตัวระบุของผู้เช่าที่มีการลงทะเบียนแอปพลิเคชัน แทนที่ 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>Country</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 ของเรา:

ภาษาอื่น ๆ

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

แชร์ผ่าน

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

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

สร้างแอป Microsoft Entra

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

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

ภาษาอื่น ๆ

เนื้อหาที่เกี่ยวข้อง

คำติชม

แหล่งทรัพยากรเพิ่มเติม