Як правильно налаштувати 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 для доступу до Graph API.

// 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. The 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 може стати потужним інструментом для підвищення продуктивності підприємства. 🛠️