Kako pravilno nastaviti Microsoft Graph in PnPjs v dodatku Word Office

Kako inicializirati PnPjs in dostopati do Microsoft Graph v dodatku Word Office

Ta rešitev prikazuje, kako konfigurirati PnPjs za uporabo v Officeovem dodatku, pri čemer se osredotoča na modularnost zalednega skripta in integracijo z Microsoft Graph.

// Import necessary modules from PnPjs
import { graphfi } from "@pnp/graph";
import "@pnp/graph/users"; // For accessing user data
import { DefaultInit } from "@pnp/graph/presets/all";
// Authentication Service Integration
class AuthService {
    async getGraphApiToken(authority) {
        // Replace this with your actual token fetch logic
        return { accessToken: "your-access-token" };
    }
}
// Main configuration class
class GraphConfig {
    constructor(authService) {
        this.authService = authService;
        this.graph = null;
    }
    async initialize() {
        this.graph = graphfi().using(DefaultInit(), (instance) => {
            instance.on.auth.replace(async (url, context) => {
                const tokenResponse = await this.authService.getGraphApiToken("your-authority");
                if (!tokenResponse) {
                    console.error("Token retrieval failed");
                    return;
                }
                context.headers = {
                    ...context.headers,
                    Authorization: `Bearer ${tokenResponse.accessToken}`
                };
            });
        });
    }
    async testTokenValidity() {
        try {
            const userInfo = await this.graph.me();
            console.log("User info:", userInfo);
        } catch (error) {
            console.error("Token is not valid:", error);
        }
    }
}
// Usage example
const authService = new AuthService();
const graphConfig = new GraphConfig(authService);
await graphConfig.initialize();
await graphConfig.testTokenValidity();

Alternativni pristop: uporabite MSAL za upravljanje žetonov in inicializacijo PnPjs

Ta metoda uporablja knjižnico MSAL.js za upravljanje žetonov za preverjanje pristnosti in njihovo integracijo v PnPjs za dostop API Graph.

// Import necessary modules
import * as msal from "@azure/msal-browser";
import { graphfi } from "@pnp/graph";
import "@pnp/graph/users";
// MSAL Configuration
const msalConfig = {
    auth: {
        clientId: "your-client-id",
        authority: "https://login.microsoftonline.com/your-tenant-id",
        redirectUri: "your-redirect-uri"
    }
};
// Initialize MSAL client
const msalClient = new msal.PublicClientApplication(msalConfig);
// Acquire token silently or interactively
async function getToken() {
    try {
        const response = await msalClient.acquireTokenSilent({
            scopes: ["https://graph.microsoft.com/.default"]
        });
        return response.accessToken;
    } catch (error) {
        if (error instanceof msal.InteractionRequiredAuthError) {
            const response = await msalClient.acquireTokenPopup({
                scopes: ["https://graph.microsoft.com/.default"]
            });
            return response.accessToken;
        }
        throw error;
    }
}
// Initialize PnPjs with MSAL token
const graph = graphfi().using((instance) => {
    instance.on.auth.replace(async (url, context) => {
        const token = await getToken();
        context.headers = {
            ...context.headers,
            Authorization: `Bearer ${token}`
        };
    });
});
// Test API
async function testApi() {
    try {
        const user = await graph.me();
        console.log("User info:", user);
    } catch (error) {
        console.error("API call failed:", error);
    }
}
// Execute test
testApi();

Pogosta vprašanja o integraciji PnPjs in Microsoft Graph

1. Kaj je graphfi() uporablja za?
2. graphfi() inicializira primerek PnPjs Graph, kar omogoča interakcijo z API-ji Microsoft Graph.
3. Kako vbrizgam žetone z uporabo on.auth.replace?
4. The on.auth.replace omogoča zamenjavo privzetega toka preverjanja pristnosti z logiko po meri za vstavljanje žetona v glave zahtev.
5. Kaj počne DefaultInit() zagotoviti?
6. DefaultInit() poenostavlja konfiguracijo za PnPjs in zagotavlja vnaprej izdelane privzete nastavitve za tipične primere uporabe.
7. Kako MSAL obravnava zahteve po tihem žetonu?
8. acquireTokenSilent() pridobi žetone iz predpomnilnika brez interakcije uporabnika, kar zagotavlja brezhibno delovanje.
9. Kakšne so prednosti paketnega združevanja zahtev API?
10. Paketiranje s PnPjs zmanjša število klicev API-ja, izboljša zmogljivost in zmanjša zakasnitev za operacije pridobivanja podatkov.

Brezhibna integracija PnPjs in Microsoft Graph

Učinkovita nastavitev PnPjs v Officeovem dodatku zagotavlja, da je vaša aplikacija pripravljena za varno pridobivanje podatkov in interakcijo z Microsoft Graph. To ogrodje poenostavlja ravnanje z vsebino SharePoint in uporabniškimi podatki, hkrati pa daje prednost varnosti in zmogljivosti. Pravilna izvedba je ključnega pomena za zanesljivost.

Z upoštevanjem navedenih korakov in primerov lahko razvijalci odpravijo pogoste težave, kot so napake pri preverjanju pristnosti, in optimizirajo svoje dodatke za boljšo uporabniško izkušnjo. S temi orodji in najboljšimi praksami lahko vaš dodatek za Word postane močno orodje za produktivnost podjetja. 🛠️