Σύνδεση εφαρμογών στο API Fabric για GraphQL

Άρθρο
06/04/2024

Σημείωμα

Το Microsoft Fabric API για GraphQL είναι σε προεπισκόπηση.

Για να συνδέσετε μια εφαρμογή σε ένα API για GraphQL, χρειάζεστε τρία σημαντικά στοιχεία: ένα Αναγνωριστικό προγράμματος-πελάτη, το αναγνωριστικό μισθωτή σας και τη διεύθυνση τελικού σημείου GraphQL στο Fabric. Στις παρακάτω ενότητες, παρουσιάζουμε τον τρόπο δημιουργίας και ανάκτησης όλων των λεπτομερειών που χρειάζεστε και του τρόπου πρόσβασης στο API σας χρησιμοποιώντας ένα δείγμα εφαρμογής.

Προαπαιτούμενα στοιχεία

Προς το παρόν, το API για GraphQL απαιτεί από τις εφαρμογές να χρησιμοποιούν το Microsoft Entra για έλεγχο ταυτότητας. Η εφαρμογή σας πρέπει να καταχωρηθεί και ρυθμιστεί επαρκώς για την εκτέλεση κλήσεων API στο Fabric. Για περισσότερες πληροφορίες, ανατρέξτε στο θέμα Δημιουργία εφαρμογής Microsoft Entra στο Azure.
Ο εξουσιοδοτημένος χρήστης που καλεί το API πρέπει να είναι μέλος του χώρου εργασίας όπου βρίσκονται τόσο το API όσο και τα στοιχεία προέλευσης δεδομένων με ρόλο Συμβάλλοντα. Για περισσότερες πληροφορίες, ανατρέξτε στο θέμα Παροχή πρόσβασης στους χρήστες σε χώρους εργασίας.
Πριν να συνδέσετε μια εφαρμογή, πρέπει να έχετε ένα API για το GraphQL στο Fabric. Για περισσότερες πληροφορίες, ανατρέξτε στο θέμα Δημιουργία API για GraphQL στο Fabric και προσθήκη δεδομένων.

Δημιουργία εφαρμογής Microsoft Entra

Στα παρακάτω βήματα, παρουσιάζουμε τον τρόπο ρύθμισης παραμέτρων υποστήριξης για μια εφαρμογή ReactJS στο Entra.

Εισέλθετε στην Πύλη Azure.
Πραγματοποιήστε αναζήτηση και επιλέξτε Microsoft Entra ID.
Από τη λίστα Διαχείριση , επιλέξτε Καταχώρηση εφαρμογής.
Επιλέξτε Νέα καταχώριση.
Συμπληρώστε τις απαιτούμενες πληροφορίες:
- Όνομα - Εισαγάγετε ένα όνομα για την εφαρμογή σας.
- Υποστηριζόμενοι τύποι λογαριασμών - Επιλέξτε τους λογαριασμούς που θέλετε να υποστηρίζει η εφαρμογή σας.
- (Προαιρετικό) URI ανακατεύθυνσης - Εισαγάγετε ένα URI, εάν είναι απαραίτητο.
Επιλέξτε Καταχώρηση. Το αναγνωριστικό της εφαρμογής σας Microsoft Entra (αναγνωριστικό προγράμματος-πελάτη) και το αναγνωριστικό καταλόγου (μισθωτής) εμφανίζονται στο πλαίσιο Σύνοψη. Καταγράψτε αυτές τις τιμές όπως απαιτείται αργότερα.
Από τη λίστα Διαχείριση , επιλέξτε Δικαιώματα API και, στη συνέχεια , Προσθήκη δικαιώματος.
Προσθέστε την υπηρεσία PowerBI, επιλέξτε Δικαιώματα με ανάθεση και επιλέξτε τα δικαιώματα Item.Execute.All και Datamart.ReadWrite.All. Βεβαιωθείτε ότι δεν απαιτείται συγκατάθεση διαχειριστή.
Επιστρέψτε στη λίστα Διαχείριση , επιλέξτε Έλεγχος ταυτότητας, προσθήκη πλατφόρμας και, στη συνέχεια, επιλέξτε Εφαρμογή μίας σελίδας.
Για σκοπούς τοπικής ανάπτυξης, προσθέστε http://localhost:3000 στην περιοχή URIs ανακατεύθυνσης και επιβεβαιώστε ότι η εφαρμογή έχει ενεργοποιηθεί για τη ροή του κωδικού εξουσιοδότησης με το κλειδί επαλήθευσης για Exchange κώδικα (PKCE). Επιλέξτε το κουμπί Ρύθμιση παραμέτρων για να αποθηκεύσετε τις αλλαγές σας. Σε περίπτωση που η εφαρμογή λάβει ένα σφάλμα που σχετίζεται με τις αιτήσεις διασταυρούμενης προέλευσης, προσθέστε την πλατφόρμα εφαρμογών για κινητές συσκευές και υπολογιστές στο προηγούμενο βήμα με το ίδιο URI ανακατεύθυνσης.
Επιστρέψτε στην επιλογή Εξουσιοδότηση, κάντε κύλιση προς τα κάτω στην περιοχή Ρυθμίσεις για προχωρημένους και, στην περιοχή Να επιτρέπονται δημόσιες ροές προγράμματος-πελάτη, επιλέξτε Ναι για ενεργοποίηση των παρακάτω ροών για κινητές συσκευές και υπολογιστές.

Ρύθμιση ενός δείγματος API GraphQL για πρόσβαση σε εφαρμογές

Σε αυτό το παράδειγμα, δημιουργούμε ένα API GraphQL για να εκθέσουμε δείγματα δεδομένων Lakehouse σε προγράμματα-πελάτες.

Στην πύλη Fabric, επιλέξτε Διαχείριση δεδομένων από την εναλλαγή φόρτου εργασίας στο κάτω μέρος της γραμμής περιήγησης. Εάν βρίσκεστε στην αρχική σελίδα Fabric, μπορείτε επίσης να επιλέξετε την κάρτα Data Engineering .
Στην εμπειρία της διαχείρισης δεδομένων, επιλέξτε Χρήση δείγματος και, στην περιοχή Lakehouse, επιλέξτε Δημόσιες αργίες για να δημιουργήσετε αυτόματα ένα νέο Lakehouse με δεδομένα δημόσιων αργιών.
Ακολουθώντας τα βήματα από το σημείο Δημιουργία API για GraphQL, δημιουργήστε ένα νέο API GraphQL και επιλέξτε το 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.
Στην οθόνη Αντιγραφή σύνδεσης, επιλέξτε Αντιγραφή.
Όπως το Αναγνωριστικό προγράμματος-πελάτη και το Αναγνωριστικό μισθωτή από την εφαρμογή Entra που καταγράφηκε νωρίτερα, αντιγράψτε το URI τελικού σημείου όπως απαιτείται αργότερα.

Ρύθμιση παραμέτρων μιας εφαρμογής React για πρόσβαση στο API δημόσιων αργιών

Χρησιμοποιούμε μια υπάρχουσα εφαρμογή React ως σημείο εκκίνησης. Ακολουθήστε όλα τα βήματα στο εκπαιδευτικό βοήθημα Δημιουργήστε μια εφαρμογή μίας σελίδας React και προετοιμάστε την για έλεγχο ταυτότητας για να δημιουργήσετε ένα έργο React με ήδη ρυθμισμένο τον έλεγχο ταυτότητας του 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/Item.Execute.All","https://analysis.windows.net/powerbi/api/Datamart.ReadWrite.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/Item.Execute.All μας και https://analysis.windows.net/powerbi/api/Datamart.ReadWrite.All.

Σημαντικό

Οι εμβέλειες μπορεί να αλλάξουν κατά τη διάρκεια του Microsoft Fabric API για προεπισκόπηση GraphQL.

Αντικαταστήστε τις ακόλουθες τιμές με τις τιμές από το Κέντρο διαχείρισης του Microsoft Entra.
- clientId - Το αναγνωριστικό της εφαρμογής, γνωστό και ως πρόγραμμα-πελάτης. Αντικαταστήστε Enter_the_Application_Id_Here το με την τιμή Αναγνωριστικό εφαρμογής (πρόγραμμα-πελάτης) που καταγράφηκε νωρίτερα από τη σελίδα επισκόπησης της καταχωρημένης εφαρμογής Entra.
- authority - Αποτελείται από δύο μέρη:
  - Η Παρουσία είναι τελικό σημείο της υπηρεσίας παροχής cloud. Ελέγξτε τα διαφορετικά διαθέσιμα τελικά σημεία στα εθνικά cloud.
  - Το Αναγνωριστικό μισθωτή είναι το αναγνωριστικό του μισθωτή στον οποίο έχει καταχωρηθεί η εφαρμογή. Αντικαταστήστε το Enter_the_Tenant_Info_Here με την τιμή αναγνωριστικού καταλόγου (μισθωτή) που καταγράφηκε νωρίτερα από τη σελίδα επισκόπησης της καταχωρημένης εφαρμογής.
- graphQLEndpoint - Το API Fabric για το τελικό σημείο GraphQL. Αντικαταστήστε Enter_the_GraphQL_Endpoint_Here το με το τελικό σημείο API GraphQL που καταγράφηκε προηγουμένως.
Αποθηκεύστε το αρχείο.

Στον ίδιο φάκελο 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 σας στο αποθετήριο δεδομένων GitHub Δείγματα Microsoft Fabric.

Κοινή χρήση μέσω

Σύνδεση εφαρμογών στο API Fabric για GraphQL

Προαπαιτούμενα στοιχεία

Δημιουργία εφαρμογής Microsoft Entra

Ρύθμιση ενός δείγματος API GraphQL για πρόσβαση σε εφαρμογές

Ρύθμιση παραμέτρων μιας εφαρμογής React για πρόσβαση στο API δημόσιων αργιών

Άλλες γλώσσες

Σχόλια

Πρόσθετοι πόροι

Κοινή χρήση μέσω

Σύνδεση εφαρμογών στο API Fabric για GraphQL

Προαπαιτούμενα στοιχεία

Δημιουργία εφαρμογής Microsoft Entra

Ρύθμιση ενός δείγματος API GraphQL για πρόσβαση σε εφαρμογές

Ρύθμιση παραμέτρων μιας εφαρμογής React για πρόσβαση στο API δημόσιων αργιών

Άλλες γλώσσες

Σχετικό περιεχόμενο

Σχόλια

Πρόσθετοι πόροι