Cara Sediakan Microsoft Graph dan PnPjs dengan Betul dalam Word Office Add-on

Memperkemaskan Akses Data untuk Tambah Masuk Word Anda

Bayangkan anda sedang membangunkan Word Office Add-in yang perlu menarik data tertentu daripada pustaka dokumen SharePoint. Menggunakan rangka kerja seperti PnPjs dan Microsoft Graph, tugasan ini haruslah mudah. Tetapi apabila pemulaan gagal, keadaan boleh menjadi mengecewakan dengan cepat. 🤔

Dalam senario kami, kami menyasarkan untuk membaca fail JSON yang disimpan dalam SharePoint untuk meningkatkan interaktiviti pengguna dalam tambahan. Walaupun PnPjs menawarkan abstraksi yang mudah untuk mengakses Microsoft Graph, mengkonfigurasinya untuk berfungsi dalam add-in Office memberikan cabaran yang unik.

Isu utama yang kami hadapi terletak pada menyediakan pengepala pengesahan dengan betul untuk permintaan API Graf. Walaupun `authService` kami berfungsi seperti yang diharapkan, percubaan untuk mengesahkan token atau mengambil data pengguna asas mengakibatkan ralat.

Dalam artikel ini, kami akan meneroka sebab isu ini berlaku dan memberikan contoh yang berkesan untuk memulakan PnPjs dan Microsoft Graph. Jika anda pernah menghadapi halangan yang sama dalam perjalanan pembangunan anda, panduan ini adalah untuk anda. Jom atasi masalah ini langkah demi langkah! 🚀

Integrasi Diperkemas PnPjs dan Microsoft Graph dalam Office Add-in

Untuk menangani isu membaca fail JSON daripada SharePoint untuk tambahan Word, skrip yang disediakan memanfaatkan kuasa rangka kerja PnPjs dan Microsoft Graph API. Penyelesaian bermula dengan memulakan tika `graphfi`. Ini berfungsi sebagai asas untuk semua panggilan API berikutnya, memastikan permintaan kepada Microsoft Graph dihalakan dan disahkan dengan betul. Dengan menggunakan konfigurasi `DefaultInit()`, pembangun boleh memudahkan proses persediaan mereka sambil mengekalkan fleksibiliti untuk penyesuaian.

Salah satu aspek kritikal pelaksanaan ini ialah penggunaan kaedah `on.auth.replace`. Ini menggantikan mekanisme pengesahan lalai, membenarkan suntikan dinamik token akses ke dalam pengepala permintaan. Pendekatan ini memastikan akses yang selamat dan sah kepada API Graf dengan mengambil token melalui `authService` tersuai. Ini amat berguna dalam senario perusahaan yang aliran kerja pengesahan mungkin memerlukan pematuhan dengan protokol keselamatan tertentu. 🔐

Kemasukan kaedah pengendalian token seperti `acquireTokenSilent()` dan `acquireTokenPopup()` memastikan bahawa pengesahan adalah mesra pengguna dan teguh. Kaedah ini membolehkan alat tambah berfungsi dengan lancar, mendapatkan semula token daripada cache atau menggesa pengguna hanya apabila perlu. Sebagai contoh, bayangkan pengurus HR perlu menjana laporan pekerja dalam Word. Alat tambah boleh mengesahkan secara senyap di latar belakang, memastikan pengalaman pengurus tidak terganggu. Ini menjadikan penyelesaian berskala dan sangat cekap. 🚀

Akhir sekali, penyepaduan arahan ujian API seperti `graph.me()` adalah tidak ternilai untuk menyahpepijat dan mengesahkan fungsi token. Langkah ini memastikan aliran pengesahan berfungsi dengan betul sebelum menyelam ke dalam operasi yang lebih kompleks seperti membaca dokumen SharePoint. Dengan menggabungkan modulariti dan amalan terbaik, skrip ini menyediakan rangka kerja yang jelas dan boleh digunakan semula untuk menangani cabaran yang serupa. Sama ada anda membina tambahan untuk kegunaan peribadi atau menggunakan penyelesaian seluruh perusahaan, persediaan ini menjamin kefleksibelan dan kebolehpercayaan.

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

Mengoptimumkan Pengesahan dan Mendapatkan Data dalam Tambahan Office

Walaupun cabaran utama berkisar tentang memulakan PnPjs dan menyepadukannya dengan Microsoft Graph, aspek yang sama kritikal ialah mengurus pengesahan dengan selamat dan cekap. Untuk Tambahan Pejabat, menggunakan pustaka MSAL.js memudahkan pemerolehan token, terutamanya apabila mengendalikan senario berbilang penyewa atau perusahaan. MSAL menyediakan kaedah untuk menyelaraskan pengesahan pengguna, mengurangkan keperluan untuk perkhidmatan bahagian belakang yang kompleks, yang penting apabila menggunakan alat tambah Word yang ringan. 🔑

Satu lagi pertimbangan utama ialah mengendalikan keadaan ralat dan tamat tempoh token. Tambahan Pejabat beroperasi dalam persekitaran dengan had masa yang ketat dan dasar keselamatan. Untuk mengekalkan kepercayaan pengguna dan keselamatan data, melaksanakan mekanisme cuba semula untuk permintaan token yang gagal atau panggilan API Graf adalah penting. Ini memastikan alat tambah kekal berfungsi walaupun apabila menghadapi gangguan rangkaian atau token tamat tempoh, meningkatkan kebolehpercayaan keseluruhan penyelesaian. Sebagai contoh, pekerja yang mengakses dokumen semasa gangguan pelayan masih boleh melihat data cache atau cuba mengambilnya semula dengan lancar. 🚀

Akhir sekali, prestasi pengambilan data SharePoint merupakan satu lagi pertimbangan penting. Memandangkan alat tambah bergantung pada API luaran, mengoptimumkan panggilan untuk mengurangkan kependaman adalah penting. Teknik seperti permintaan batching atau menggunakan sifat terpilih Graph API membantu mengambil data yang diperlukan sahaja, mengurangkan masa muat dan penggunaan lebar jalur. Sama ada membaca fail JSON atau mengambil data pengguna, pengoptimuman ini menjadikan alat tambah berasa lebih pantas dan lebih responsif, walaupun dalam persekitaran permintaan tinggi.