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

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

บทความนี้จะแนะนําคุณเกี่ยวกับการเชื่อมต่อแอปพลิเคชัน React กับ Fabric GraphQL API โดย:

1. การสร้างและกําหนดค่าแอป Microsoft Entra สําหรับการรับรองความถูกต้อง
2. การตั้งค่า GraphQL API ตัวอย่างใน Fabric พร้อมข้อมูลที่จะคิวรี
3. การโคลนและกําหนดค่าแอปพลิเคชัน React ที่สมบูรณ์จาก GitHub
4. การทดสอบการเชื่อมต่อที่รับรองความถูกต้อง

บทช่วยสอนใช้ React แต่แนวคิดการรับรองความถูกต้องใช้กับภาษาใดก็ได้ สําหรับตัวอย่างใน C#, Python หรือภาษาอื่นๆ โปรดดูที่เก็บ GitHub ตัวอย่าง Microsoft Fabric

ใครต้องเชื่อมต่อแอปพลิเคชัน

การตั้งค่าการเชื่อมต่อแอปพลิเคชันเป็นสิ่งจําเป็นสําหรับ:

• นักพัฒนาเว็บและอุปกรณ์เคลื่อนที่ที่ สร้างแอปพลิเคชันที่ใช้ข้อมูลจาก Fabric lakehouse และคลังสินค้า
• นักพัฒนาการผสานรวม ที่เชื่อมต่อข้อมูล Fabric กับแอปพลิเคชันแบบกําหนดเองและเวิร์กโฟลว์อัตโนมัติ
• นักพัฒนาแบ็กเอนด์ ที่สร้างบริการที่ผสานรวมกับแพลตฟอร์มการวิเคราะห์แบบครบวงจรของ Fabric
• วิศวกรข้อมูล ตั้งค่าเวิร์กโฟลว์การประมวลผลข้อมูลอัตโนมัติที่ใช้ข้อมูล Fabric ผ่าน API

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

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

• เครื่องมือการพัฒนา: คุณต้องติดตั้ง Node.js (เวอร์ชัน LTS) และ Visual Studio Code บนเครื่องของคุณ

• ก่อนเชื่อมต่อแอปพลิเคชัน ตรวจสอบให้แน่ใจว่าคุณมี API สําหรับ GraphQL ใน Fabric สําหรับข้อมูลเพิ่มเติม ดูสร้าง API สําหรับ GraphQL ใน Fabric และเพิ่มข้อมูล

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

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

สรุปการรับรองความถูกต้องและสิทธิ์

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

ตารางต่อไปนี้สรุปสถานการณ์การรับรองความถูกต้องที่รองรับต่างๆ และสิทธิ์ขั้นต่ําที่จําเป็นสําหรับไคลเอ็นต์ที่เข้าถึง GraphQL API:

สร้างแอป Microsoft Entra

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

สําหรับแอปพลิเคชัน React คุณกําหนดการตั้งค่าแอปพลิเคชันหน้าเดียว (SPA) ที่ใช้โฟลว์ PKCE ซึ่งเป็นวิธีการรับรองความถูกต้องที่ปลอดภัยซึ่งออกแบบมาสําหรับแอปบนเบราว์เซอร์ที่ไม่สามารถจัดเก็บข้อมูลลับของไคลเอ็นต์ได้อย่างปลอดภัย

1. ลงทะเบียนแอปพลิเคชันโดยใช้ขั้นตอนที่อธิบายไว้ใน เริ่มต้นใช้งานด่วน: ลงทะเบียนแอปพลิเคชันด้วยแพลตฟอร์มข้อมูลประจําตัวของ Microsoft

2. รหัส แอปพลิเคชัน (ไคลเอ็นต์) ของแอป Microsoft Entra และค่า รหัสไดเรกทอรี (ผู้เช่า) จะปรากฏในกล่อง สรุป บันทึกค่าเหล่านี้เนื่องจากคุณต้องการเมื่อคุณกําหนดค่าแอปพลิเคชัน React

3. กําหนดค่าสิทธิ์ API เพื่อให้แอปพลิเคชันของคุณสามารถเข้าถึง Fabric GraphQL API ได้ ภายใต้รายการ Manage ให้เลือกสิทธิ์ API จากนั้น เพิ่มสิทธิ์

4. เพิ่ม บริการ PowerBI เลือก สิทธิ์ที่ได้รับมอบหมาย และเลือก GraphQLApi.Execute.All permissions สิทธิ์นี้ช่วยให้แอปพลิเคชันดําเนินการสืบค้นและการกลายพันธุ์ในนามของผู้ใช้ที่ลงชื่อเข้าใช้ได้ ยืนยันว่าไม่จําเป็นต้องได้รับความยินยอมจากผู้ดูแลระบบ

5. กลับไปที่รายการจัดการ เลือก การรับรองความถูกต้อง>เพิ่มแพลตฟอร์ม>แอปพลิเคชันหน้าเดียว

6. สําหรับการพัฒนาภายในเครื่อง ให้เพิ่มhttp://localhost:3000ภายใต้การเปลี่ยนเส้นทาง URI และยืนยันว่าแอปพลิเคชันเปิดใช้งานสําหรับโฟลว์รหัสการให้สิทธิ์ที่มี Proof Key สําหรับ Code Exchange (PKCE) เลือก ปุ่ม กําหนดค่า เพื่อบันทึกการเปลี่ยนแปลงของคุณ หากแอปพลิเคชันพบข้อผิดพลาดที่เกี่ยวข้องกับคําขอข้ามต้นทาง ให้เพิ่มแพลตฟอร์ม แอปพลิเคชันมือถือและเดสก์ท็อป ในขั้นตอนก่อนหน้าด้วย URI การเปลี่ยนเส้นทางเดียวกัน

7. กลับไปยังรับรองความถูกต้อง เลื่อนลงไปยัง การตั้งค่าขั้นสูง และภายใต้ อนุญาตโฟลว์ไคลเอ็นต์สาธารณะให้เลือก ใช่ สําหรับ เปิดใช้งานโฟลว์อุปกรณ์เคลื่อนที่และเดสก์ท็อปต่อไปนี้

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

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

API ตัวอย่างแสดงข้อมูลวันหยุดจากตาราง Lakehouse ซึ่งแอปพลิเคชัน React ของคุณสืบค้นเพื่อแสดงวันหยุดนักขัตฤกษ์

1. จากโฮมเพจพอร์ทัล Fabric เลือกวิศวกรข้อมูลจากรายการของปริมาณงาน

2. ในประสบการณ์ วิศวกรรมข้อมูล ให้เลือก ใช้ตัวอย่าง และภายใต้ Lakehouse ให้เลือก วันหยุดนักขัตฤกษ์ เพื่อสร้าง Lakehouse ใหม่ที่มีข้อมูลวันหยุดนักขัตฤกษ์โดยอัตโนมัติ

   

3. ทําตามขั้นตอนจาก สร้าง API สําหรับ GraphQL เพื่อสร้าง GraphQL API ใหม่ และเลือก Lakehouse ที่คุณสร้างขึ้น เพิ่มตารางวันหยุดนักขัตฤกษ์เพื่อให้ลูกค้าสามารถเข้าถึงข้อมูลนี้ได้

   

4. ก่อนสร้างแอปพลิเคชัน React ให้ตรวจสอบว่า 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
        }
      }
    }
   

5. เลือก คัดลอกจุด สิ้นสุด บนแถบเครื่องมือของรายการ API

   

6. ในหน้าจอ คัดลอกลิงก์ เลือก คัดลอก

   

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

โคลนและกําหนดค่าแอปพลิเคชัน React

เมื่อคุณได้ตั้งค่าแอป Microsoft Entra และ GraphQL API แล้ว คุณสามารถกําหนดค่าแอปพลิเคชัน React เพื่อเชื่อมต่อกับแอปเหล่านั้นได้ แอปพลิเคชันใช้ Microsoft Authentication Library (MSAL) เพื่อจัดการการรับรองความถูกต้องและสร้างคําขอ GraphQL ด้วยโทเค็นผู้ถือ

1. โคลนที่เก็บตัวอย่างจาก GitHub:

   git clone https://github.com/microsoft/fabric-samples.git
   

2. ไปที่โฟลเดอร์แอปพลิเคชัน React:

   cd fabric-samples/docs-samples/data-engineering/GraphQL/React
   

   โฟลเดอร์ประกอบด้วยแอปพลิเคชัน React ที่สมบูรณ์ คุณต้องแก้ไข src/authConfig.js เพื่อกําหนดค่าปลายทางและข้อมูลประจําตัวเฉพาะของคุณเท่านั้น

3. เปิดโปรเจ็กต์ในโปรแกรมแก้ไขโค้ดของคุณ:

   code .
   

4. ในเครื่องมือแก้ไข ให้ไปที่srcโฟลเดอร์แล้วเปิดauthConfig.js

5. แทนที่ค่าตัวยึดต่อไปนี้ด้วยรายละเอียดเฉพาะของคุณ:

   • Enter_the_GraphQL_Endpoint_Here - แทนที่ด้วยตําแหน่งข้อมูล GraphQL API ของคุณจาก ตั้งค่า GraphQL API ตัวอย่างสําหรับการเข้าถึงแอปพลิเคชัน
   • Enter_the_Application_Id_Here - แทนที่ด้วย รหัสแอปพลิเคชัน (ไคลเอ็นต์) ของคุณจาก สร้างแอป Microsoft Entra
   • Enter_the_Tenant_Info_Here - แทนที่ด้วย รหัสไดเรกทอรี (ผู้เช่า) ของคุณจาก สร้างแอป Microsoft Entra

   สําคัญ

   ในไฟล์loginRequestเดียวกันค่าคงที่จะรวมขอบเขตhttps://analysis.windows.net/powerbi/api/GraphQLApi.Execute.All ขอบเขตที่แน่นอนนี้จําเป็นสําหรับการเข้าถึง Fabric GraphQL API อย่าลบหรือแก้ไขขอบเขตนี้ มิฉะนั้น การรับรองความถูกต้องจะล้มเหลว

6. บันทึกไฟล์

7. ในเทอร์มินัลของคุณ ให้ไปที่โฟลเดอร์รากของโปรเจ็กต์และเรียกใช้:

   npm install
   

   สิ่งนี้จะติดตั้งการขึ้นต่อกันที่จําเป็นทั้งหมด

ทดสอบแอปพลิเคชัน

เมื่อกําหนดค่าแอปพลิเคชันแล้ว ให้เรียกใช้ภายในเครื่องเพื่อตรวจสอบว่าทุกอย่างทํางานได้อย่างถูกต้อง:

1. ในเทอร์มินัลของคุณ ให้เรียกใช้:

   npm start
   

   คําสั่งนี้จะเริ่มเซิร์ฟเวอร์การพัฒนาและเปิดแอปพลิเคชันในเบราว์เซอร์ของคุณ

2. ดําเนินการขั้นตอนการรับรองความถูกต้องให้เสร็จสมบูรณ์เมื่อโหลดแอปพลิเคชันที่http://localhost:3000 ทําตามขั้นตอนการลงชื่อเข้าใช้ที่อธิบายไว้ในส่วนบทช่วยสอนเรียกใช้ API จากแอปพลิเคชัน

3. หลังจากลงชื่อเข้าใช้สําเร็จ ให้เลือกปุ่ม Query Fabric API สําหรับข้อมูล GraphQL สิ่งนี้จะทริกเกอร์โฟลว์การรับรองความถูกต้อง รับโทเค็นการเข้าถึง และดําเนินการสืบค้น GraphQL กับ Fabric API ของคุณ

   

4. หากทุกอย่างได้รับการกําหนดค่าอย่างถูกต้องแอปพลิเคชันจะแสดงวันหยุดนักขัตฤกษ์ในตาราง การดําเนินการนี้จะยืนยันว่า:

   • แอป Microsoft Entra ของคุณมีสิทธิ์ที่ถูกต้อง
   • รับโทเค็นการเข้าถึงสําเร็จแล้ว
   • GraphQL API ตรวจสอบสิทธิ์คําขอ
   • การสืบค้นที่ดําเนินการกับข้อมูล Lakehouse

   

คําสั่ง npm อื่นๆ

นอกเหนือจาก npm start และ npm installคุณสามารถใช้คําสั่ง npm ทั่วไปเหล่านี้สําหรับสถานการณ์การพัฒนาที่แตกต่างกัน:

• npm run dev - วิธีอื่นในการเริ่มต้นเซิร์ฟเวอร์การพัฒนา
• npm run build - สร้างบิลด์การใช้งานจริงที่ปรับให้เหมาะสมของแอปพลิเคชันของคุณ
• npm run preview - ทดสอบบิลด์ที่ใช้งานจริงในเครื่องก่อนปรับใช้
• npm test - เรียกใช้การทดสอบอัตโนมัติเพื่อยืนยันว่าโค้ดของคุณทํางานได้อย่างถูกต้อง

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

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

• สร้าง API สําหรับ GraphQL ใน Fabric และเพิ่มข้อมูล - เรียนรู้วิธีแสดงแหล่งข้อมูลของคุณเอง
• คิวรีแหล่งข้อมูลหลายแหล่งใน Fabric API สําหรับ GraphQL - รวมข้อมูลจากแหล่งข้อมูลต่างๆ ในคิวรีเดียว
• Fabric API สําหรับตัวแก้ไข GraphQL - ทดสอบและพัฒนาการสืบค้นแบบโต้ตอบ
• สร้างแอป Microsoft Entra ใน Azure - คู่มือโดยละเอียดสําหรับการลงทะเบียนแอปที่ใช้งานจริง
• ตัวอย่าง Microsoft Fabric GraphQL - เรียกดูตัวอย่างในหลายภาษา