Kako pravilno postaviti Microsoft Graph i PnPjs u Word Office dodatku

Kako inicijalizirati PnPjs i pristupiti Microsoft Graphu u Word Office dodatku

Ovo rješenje pokazuje kako konfigurirati PnPjs za korištenje u dodatku za Office, fokusirajući se na modularnost pozadinske skripte i integraciju s Microsoft Graphom.

// 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 pristup: Koristite MSAL za upravljanje tokenima i PnPjs inicijalizaciju

Ova metoda koristi biblioteku MSAL.js za upravljanje autentifikacijskim tokenima i njihovu integraciju u PnPjs za Graph API pristup.

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

Uobičajena pitanja o integraciji PnPjs i Microsoft Graph

1. Što je graphfi() koristi za?
2. graphfi() inicijalizira instancu PnPjs Graph, omogućujući interakciju s Microsoft Graph API-jima.
3. Kako mogu ubrizgati tokene pomoću on.auth.replace?
4. The on.auth.replace metoda vam omogućuje da zamijenite zadani tijek provjere autentičnosti prilagođenom logikom za umetanje tokena u zaglavlja zahtjeva.
5. Što znači DefaultInit() pružiti?
6. DefaultInit() pojednostavljuje konfiguraciju za PnPjs, pružajući unaprijed izgrađene zadane postavke za tipične slučajeve upotrebe.
7. Kako MSAL obrađuje zahtjeve za tihim tokenom?
8. acquireTokenSilent() dohvaća tokene iz predmemorije bez interakcije korisnika, osiguravajući besprijekoran rad.
9. Koje su prednosti grupiranja API zahtjeva?
10. Grupiranje s PnPjs smanjuje broj API poziva, poboljšava performanse i smanjuje kašnjenje za operacije dohvaćanja podataka.

Besprijekorna integracija PnPjs i Microsoft Graph

Učinkovito postavljanje PnPjs u dodatku za Office osigurava da je vaša aplikacija spremna za sigurno dohvaćanje podataka i interakciju s Microsoft Graphom. Ovaj okvir pojednostavljuje rukovanje SharePoint sadržajem i korisničkim podacima dok daje prioritet sigurnosti i performansama. Pravilna implementacija ključna je za pouzdanost.

Slijedeći navedene korake i primjere, programeri mogu riješiti uobičajene probleme poput neuspjeha provjere autentičnosti i optimizirati svoje dodatke za bolje korisničko iskustvo. S ovim alatima i najboljim praksama na mjestu, vaš Word Add-in može postati moćan alat za produktivnost poduzeća. 🛠️