Kaip teisingai nustatyti „Microsoft Graph“ ir „PnPjs“ „Word Office“ priede

Kaip inicijuoti PnPjs ir pasiekti „Microsoft Graph“ „Word Office“ priede

Šis sprendimas parodo, kaip sukonfigūruoti PnPjs naudoti „Office“ papildinyje, daugiausia dėmesio skiriant scenarijaus moduliavimui ir integravimui su „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();

Alternatyvus būdas: naudokite MSAL žetonų valdymui ir PnPjs inicijavimui

Šis metodas naudoja MSAL.js biblioteką autentifikavimo prieigos raktams valdyti ir integruoti į PnPjs, skirtą Graph API prieigai.

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

Dažni klausimai apie PnPjs ir Microsoft Graph integravimą

1. Kas yra graphfi() naudojamas?
2. graphfi() inicijuoja PnPjs Graph egzempliorių, įgalindamas sąveiką su Microsoft Graph API.
3. Kaip suleisti žetonus naudojant on.auth.replace?
4. The on.auth.replace metodas leidžia pakeisti numatytąjį autentifikavimo srautą pasirinktine logika, kad įterptumėte prieigos raktą į užklausų antraštes.
5. Ką daro DefaultInit() suteikti?
6. DefaultInit() supaprastina PnPjs konfigūraciją, suteikdama iš anksto sukurtus numatytuosius nustatymus tipiniams naudojimo atvejams.
7. Kaip MSAL apdoroja tyliąsias prieigos raktų užklausas?
8. acquireTokenSilent() nuskaito žetonus iš talpyklos be vartotojo sąveikos, užtikrinant sklandų veikimą.
9. Kokie yra API užklausų paketavimo pranašumai?
10. Paketas naudojant PnPjs sumažina API skambučių skaičių, pagerina našumą ir sumažina duomenų gavimo operacijų delsą.

Sklandus PnPjs ir Microsoft Graph integravimas

Veiksmingas PnPjs nustatymas „Office“ priede užtikrina, kad jūsų programa būtų paruošta saugiai gauti duomenis ir sąveikauti su „Microsoft Graph“. Ši sistema supaprastina „SharePoint“ turinio ir vartotojo duomenų tvarkymą, o pirmenybę teikia saugai ir našumui. Tinkamas įgyvendinimas yra labai svarbus patikimumui.

Vykdydami veiksmus ir pateiktus pavyzdžius, kūrėjai gali išspręsti įprastas problemas, pvz., autentifikavimo klaidas, ir optimizuoti savo priedus, kad naudotojų patirtis būtų geresnė. Turėdami šiuos įrankius ir geriausios praktikos pavyzdžius, jūsų Word papildinys gali tapti galingu įmonės produktyvumo įrankiu. 🛠️