Как правильно настроить Microsoft Graph и PnPjs в надстройке Word Office

Как инициализировать PnPjs и получить доступ к Microsoft Graph в надстройке Word Office

Это решение демонстрирует, как настроить PnPjs для использования в надстройке Office, уделяя особое внимание модульности внутренних сценариев и интеграции с 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();

Альтернативный подход: используйте MSAL для управления токенами и инициализации PnPjs.

Этот метод использует библиотеку MSAL.js для управления токенами аутентификации и их интеграции в PnPjs для доступа к 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();

Общие вопросы об интеграции PnPjs и Microsoft Graph

1. Что такое graphfi() используется для?
2. graphfi() инициализирует экземпляр PnPjs Graph, обеспечивая взаимодействие с API Microsoft Graph.
3. Как внедрить токены с помощью on.auth.replace?
4. on.auth.replace Метод позволяет заменить поток аутентификации по умолчанию на пользовательскую логику для вставки токена в заголовки запросов.
5. Что значит DefaultInit() предоставлять?
6. DefaultInit() упрощает настройку PnPjs, предоставляя готовые настройки по умолчанию для типичных случаев использования.
7. Как MSAL обрабатывает автоматические запросы токенов?
8. acquireTokenSilent() извлекает токены из кэша без взаимодействия с пользователем, обеспечивая бесперебойную работу.
9. Каковы преимущества пакетной обработки запросов API?
10. Пакетная обработка с помощью PnPjs сокращает количество вызовов API, повышает производительность и снижает задержку операций получения данных.

Бесшовная интеграция PnPjs и Microsoft Graph

Эффективная настройка PnPjs в надстройке Office гарантирует, что ваше приложение будет готово к безопасному получению данных и взаимодействию с Microsoft Graph. Эта платформа упрощает обработку содержимого SharePoint и пользовательских данных, уделяя при этом приоритет безопасности и производительности. Правильная реализация имеет решающее значение для надежности.

Следуя предоставленным инструкциям и примерам, разработчики могут решить распространенные проблемы, такие как сбои аутентификации, и оптимизировать свои надстройки для повышения удобства работы пользователей. Благодаря этим инструментам и передовым практикам ваша надстройка Word может стать мощным инструментом повышения производительности предприятия. 🛠️