如何在 Word Office 加载项中正确设置 Microsoft Graph 和 PnPjs

如何在 Word Office 加载项中初始化 PnPjs 并访问 Microsoft Graph

该解决方案演示了如何配置 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 访问。

// 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 实例，启用与 Microsoft Graph API 的交互。
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 的无缝集成

在 Office 加载项中有效设置 PnPjs 可确保您的应用程序准备好安全地获取数据并与 Microsoft Graph 交互。该框架简化了 SharePoint 内容和用户数据的处理，同时优先考虑安全性和性能。正确的实施对于可靠性至关重要。

通过遵循提供的步骤和示例，开发人员可以解决身份验证失败等常见问题，并优化其加载项以获得更好的用户体验。有了这些工具和最佳实践，您的 Word 插件就可以成为提高企业生产力的强大工具。 🛠️