Hvordan sette opp Microsoft Graph og PnPjs riktig i et Word Office-tillegg

Hvordan initialisere PnPjs og få tilgang til Microsoft Graph i et Word Office-tillegg

Denne løsningen viser hvordan du konfigurerer PnPjs for bruk i et Office-tillegg, med fokus på backend-skriptmodularitet og integrasjon med 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();

Alternativ tilnærming: Bruk MSAL for Token Management og PnPjs initialisering

Denne metoden bruker MSAL.js-biblioteket til å administrere autentiseringstokener og integrere dem i PnPjs for Graph API-tilgang.

// 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();

Vanlige spørsmål om integrering av PnPjs og Microsoft Graph

1. Hva er graphfi() brukes til?
2. graphfi() initialiserer en PnPjs Graph-forekomst, og muliggjør interaksjon med Microsoft Graph APIer.
3. Hvordan injiserer jeg tokens ved hjelp av on.auth.replace?
4. De on.auth.replace metoden lar deg erstatte standard autentiseringsflyten med tilpasset logikk for å sette inn tokenet i forespørselshodene.
5. Hva gjør DefaultInit() gi?
6. DefaultInit() forenkler konfigurasjonen for PnPjs, og gir forhåndsbygde standarder for typiske brukstilfeller.
7. Hvordan håndterer MSAL stille token-forespørsler?
8. acquireTokenSilent() henter tokens fra hurtigbufferen uten brukerinteraksjon, noe som sikrer sømløs drift.
9. Hva er fordelene med batching av API-forespørsler?
10. Batching med PnPjs reduserer antallet API-anrop, forbedrer ytelsen og reduserer ventetiden for datainnhentingsoperasjoner.

Sømløs integrasjon av PnPjs og Microsoft Graph

Effektiv oppsett av PnPjs i et Office-tillegg sikrer at applikasjonen din er klar til å sikkert hente data og samhandle med Microsoft Graph. Dette rammeverket forenkler håndteringen av SharePoint-innhold og brukerdata samtidig som sikkerhet og ytelse prioriteres. Riktig implementering er avgjørende for påliteligheten.

Ved å følge trinnene og eksemplene som er gitt, kan utviklere løse vanlige problemer som autentiseringsfeil og optimalisere tilleggene deres for bedre brukeropplevelse. Med disse verktøyene og beste fremgangsmåtene på plass, kan Word-tillegget ditt bli et kraftig verktøy for bedriftsproduktivitet. 🛠️