Word Office 추가 기능에서 Microsoft Graph 및 PnPjs를 올바르게 설정하는 방법

Word Office 추가 기능에서 PnPjs를 초기화하고 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 라이브러리를 사용하여 인증 토큰을 관리하고 Graph 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 추가 기능이 기업 생산성을 위한 강력한 도구가 될 수 있습니다. 🛠️