Cara Mengatur Microsoft Graph dan PnPjs dengan Benar di Add-on Word Office

Menyederhanakan Akses Data untuk Add-in Word Anda

Bayangkan Anda sedang mengembangkan Add-in Word Office yang perlu mengambil data tertentu dari pustaka dokumen SharePoint. Dengan menggunakan kerangka kerja seperti PnPjs dan Microsoft Graph, tugas ini seharusnya mudah dilakukan. Namun ketika inisialisasi gagal, segalanya bisa menjadi frustasi. 🤔

Dalam skenario kami, kami bertujuan untuk membaca file JSON yang disimpan di SharePoint untuk meningkatkan interaktivitas pengguna di add-in. Meskipun PnPjs menawarkan abstraksi yang nyaman untuk mengakses Microsoft Graph, mengonfigurasinya agar berfungsi dalam add-in Office menghadirkan tantangan unik.

Masalah utama yang kami temui terletak pada pengaturan header autentikasi yang benar untuk permintaan Graph API. Meskipun `authService` kami berfungsi seperti yang diharapkan, upaya untuk memvalidasi token atau mengambil data dasar pengguna menghasilkan kesalahan.

Dalam artikel ini, kita akan mempelajari penyebab masalah ini terjadi dan memberikan contoh kerja untuk menginisialisasi PnPjs dan Microsoft Graph. Jika Anda menghadapi rintangan serupa dalam perjalanan pengembangan Anda, panduan ini cocok untuk Anda. Mari kita atasi masalah ini selangkah demi selangkah! 🚀

Integrasi PnPjs dan Microsoft Graph yang Efisien di Add-in Office

Untuk mengatasi masalah pembacaan file JSON dari add-in SharePoint untuk Word, skrip yang disediakan memanfaatkan kekuatan kerangka kerja PnPjs dan Microsoft Graph API. Solusinya dimulai dengan menginisialisasi instance `graphfi`. Hal ini berfungsi sebagai dasar untuk semua panggilan API berikutnya, memastikan bahwa permintaan ke Microsoft Graph dirutekan dan diautentikasi dengan benar. Dengan memanfaatkan konfigurasi `DefaultInit()`, pengembang dapat menyederhanakan proses penyiapan mereka sambil tetap mempertahankan fleksibilitas untuk penyesuaian.

Salah satu aspek penting dari implementasi ini adalah penggunaan metode `on.auth.replace`. Ini menggantikan mekanisme autentikasi default, yang memungkinkan injeksi dinamis token akses ke header permintaan. Pendekatan ini memastikan akses yang aman dan valid ke Graph API dengan mengambil token melalui `authService` khusus. Hal ini sangat berguna dalam skenario perusahaan di mana alur kerja autentikasi mungkin memerlukan kepatuhan terhadap protokol keamanan tertentu. 🔐

Dimasukkannya metode penanganan token seperti `acquireTokenSilent()` dan `acquireTokenPopup()` memastikan bahwa autentikasi mudah digunakan dan tangguh. Metode ini memungkinkan add-in berfungsi dengan lancar, mengambil token dari cache atau meminta pengguna hanya jika diperlukan. Misalnya, bayangkan seorang manajer SDM perlu membuat laporan karyawan dalam Word. Add-in dapat mengautentikasi secara diam-diam di latar belakang, memastikan pengalaman manajer tidak terganggu. Hal ini menjadikan solusi ini terukur dan sangat efisien. 🚀

Terakhir, integrasi perintah pengujian API seperti `graph.me()` sangat berharga untuk debugging dan memvalidasi fungsionalitas token. Langkah ini memastikan alur autentikasi berfungsi dengan benar sebelum melanjutkan ke operasi yang lebih kompleks seperti membaca dokumen SharePoint. Dengan menggabungkan modularitas dan praktik terbaik, skrip ini memberikan kerangka kerja yang jelas dan dapat digunakan kembali untuk mengatasi tantangan serupa. Baik Anda membuat add-in untuk penggunaan pribadi atau menerapkan solusi skala perusahaan, pengaturan ini menjamin fleksibilitas dan keandalan.

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

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

Mengoptimalkan Otentikasi dan Pengambilan Data di Add-in Office

Meskipun tantangan utamanya berkisar pada inisialisasi PnPjs dan mengintegrasikannya dengan Microsoft Graph, aspek yang sama pentingnya adalah mengelola autentikasi dengan aman dan efisien. Untuk Add-in Office, penggunaan pustaka MSAL.js menyederhanakan akuisisi token, terutama saat menangani skenario multi-penyewa atau perusahaan. MSAL menyediakan metode untuk menyederhanakan autentikasi pengguna, mengurangi kebutuhan akan layanan backend yang kompleks, yang sangat penting saat menerapkan add-in Word yang ringan. 🔑

Pertimbangan utama lainnya adalah menangani status kesalahan dan masa berlaku token. Add-in Office beroperasi di lingkungan dengan batas waktu dan kebijakan keamanan yang ketat. Untuk menjaga kepercayaan pengguna dan keamanan data, penerapan mekanisme percobaan ulang untuk permintaan token yang gagal atau panggilan Graph API sangatlah penting. Hal ini memastikan add-in tetap berfungsi bahkan ketika menghadapi gangguan jaringan atau token kedaluwarsa, sehingga meningkatkan keandalan solusi secara keseluruhan. Misalnya, seorang karyawan yang mengakses dokumen selama server padam masih dapat melihat data cache atau mencoba mengambilnya kembali dengan lancar. 🚀

Terakhir, kinerja pengambilan data SharePoint merupakan pertimbangan penting lainnya. Karena add-in bergantung pada API eksternal, mengoptimalkan panggilan untuk mengurangi latensi sangatlah penting. Teknik seperti permintaan batch atau menggunakan properti selektif Graph API hanya membantu mengambil data yang diperlukan, sehingga mengurangi waktu muat dan penggunaan bandwidth. Baik membaca file JSON atau mengambil data pengguna, pengoptimalan ini membuat add-in terasa lebih cepat dan responsif, bahkan di lingkungan dengan permintaan tinggi.