Како правилно поставити Мицрософт Грапх и ПнПјс у Ворд Оффице додатку

Како да иницијализујете ПнПјс и приступите Мицрософт Грапх-у у Ворд Оффице додатку

Ово решење показује како да конфигуришете ПнПјс за употребу у Оффице додатку, фокусирајући се на модуларност позадинске скрипте и интеграцију са Мицрософт Грапх-ом.

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

Алтернативни приступ: Користите МСАЛ за управљање токенима и ПнПјс иницијализацију

Овај метод користи библиотеку МСАЛ.јс да управља токенима за аутентификацију и интегрише их у ПнПјс за приступ Грапх АПИ-ју.

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

Уобичајена питања о интеграцији ПнПјс-а и Мицрософт Грапх-а

1. Шта је graphfi() користи за?
2. graphfi() иницијализује ПнПјс Грапх инстанцу, омогућавајући интеракцију са Мицрософт Грапх АПИ-јима.
3. Како да убацим токене користећи on.auth.replace?
4. Тхе on.auth.replace метода вам омогућава да замените подразумевани ток аутентификације прилагођеном логиком да бисте убацили токен у заглавља захтева.
5. Шта ради DefaultInit() обезбедити?
6. DefaultInit() поједностављује конфигурацију за ПнПјс, пружајући унапред направљене подразумеване вредности за типичне случајеве употребе.
7. Како МСАЛ рукује тихим захтевима за токене?
8. acquireTokenSilent() преузима токене из кеша без интеракције корисника, обезбеђујући беспрекоран рад.
9. Које су предности батцхинг АПИ захтева?
10. Батцхинг са ПнПјс смањује број АПИ позива, побољшава перформансе и смањује кашњење за операције преузимања података.

Беспрекорна интеграција ПнПјс-а и Мицрософт Грапх-а

Ефикасно подешавање ПнПјс у Оффице додатку обезбеђује да ваша апликација буде спремна за безбедно преузимање података и интеракцију са Мицрософт Грапх-ом. Овај оквир поједностављује руковање СхареПоинт садржајем и корисничким подацима док даје приоритет безбедности и перформансама. Правилна имплементација је кључна за поузданост.

Пратећи наведене кораке и примере, програмери могу да реше уобичајене проблеме као што су грешке у аутентификацији и оптимизују своје додатке за боље корисничко искуство. Са овим алатима и најбољим праксама на месту, ваш Ворд додатак може постати моћан алат за продуктивност предузећа. 🛠