Word Office アドオンで Microsoft Graph と PnPjs を正しく設定する方法

PnPjs を初期化し、Word Office アドインで Microsoft Graph にアクセスする方法

このソリューションでは、バックエンド スクリプトのモジュール性と Microsoft Graph との統合に焦点を当てて、Office アドインで使用するために PnPjs を構成する方法を示します。

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

代替アプローチ: トークン管理と PnPjs の初期化に MSAL を使用する

この方法では、MSAL.js ライブラリを使用して認証トークンを管理し、グラフ API アクセスのために認証トークンを PnPjs に統合します。

// 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 アドインは企業の生産性を向上させる強力なツールになります。 🛠️