Dela via

Självstudie: Anropa Microsoft Graph API från en Nod-/Express.js-webbapp

  • Artikel

Gäller för: grön cirkel med en vit bockmarkeringssymbol. Workforce-klienter grön cirkel med en vit bockmarkeringssymbol. externa klienter (läs mer)

I den här självstudien anropar du Microsoft Graph API från en Node/Express.js-webbapp. När en användare loggar in hämtar appen en åtkomsttoken för att anropa Microsoft Graph API.

Den här självstudien är del 3 i självstudieserien i tre delar.

I den här handledningen:

  • Uppdatera Nod/Express.js webbapp för att hämta en åtkomsttoken
  • Använd åtkomsttoken för att anropa Microsoft Graph API.

Förutsättningar

Lägga till en UI-komponenter

  1. Öppna views/index.hbs-filen i kodredigeraren och lägg sedan till en Visa användarprofil länk med hjälp av följande kodfragment:

    <a href="/users/profile">View user profile</a>

    När du har skapat uppdateringen bör dina -vyer/index.hbs fil se ut ungefär som följande fil:

       <h1>{{title}}</h1>
    {{#if isAuthenticated }}
    <p>Hi {{username}}!</p>
    <a href="/users/id">View ID token claims</a>
    <br>
    <a href="/users/profile">View user profile</a>
    <br>
    <br>
    <a href="/auth/signout">Sign out</a>
    {{else}}
    <p>Welcome to {{title}}</p>
    <a href="/auth/signin">Sign in</a>
    {{/if}}

  2. Skapa views/profile.hbs fil och lägg sedan till följande kod:

    <h1>Microsoft Graph API</h1>
<h3>/me endpoint response</h3>
<table>
    <tbody>
        {{#each profile}}
        <tr>
            <td>{{@key}}</td>
            <td>{{this}}</td>
        </tr>
        {{/each}}
    </tbody>
</table>
<br>
<a href="/">Go back</a>
    • Den här sidan visar användarens profilinformation som Microsoft Graph API returnerar.

Hämta en åtkomsttoken

Öppna filen autentisering/AuthProvider.js i kodredigeraren och lägg sedan till getToken-metoden i klassen AuthProvider:

class AuthProvider {
    //...
        getToken(scopes, redirectUri = "http://localhost:3000/") {
            return  async function (req, res, next) {
                const msalInstance = authProvider.getMsalInstance(authProvider.config.msalConfig);
                try {
                    msalInstance.getTokenCache().deserialize(req.session.tokenCache);
    
                    const silentRequest = {
                        account: req.session.account,
                        scopes: scopes,
                    };
                    const tokenResponse = await msalInstance.acquireTokenSilent(silentRequest);
    
                    req.session.tokenCache = msalInstance.getTokenCache().serialize();
                    req.session.accessToken = tokenResponse.accessToken;
                    next();
                } catch (error) {
                    if (error instanceof msal.InteractionRequiredAuthError) {
                        req.session.csrfToken = authProvider.cryptoProvider.createNewGuid();
    
                        const state = authProvider.cryptoProvider.base64Encode(
                            JSON.stringify({
                                redirectTo: redirectUri,
                                csrfToken: req.session.csrfToken,
                            })
                        );
                        
                        const authCodeUrlRequestParams = {
                            state: state,
                            scopes: scopes,
                        };
    
                        const authCodeRequestParams = {
                            state: state,
                            scopes: scopes,
                        };
    
                        authProvider.redirectToAuthCodeUrl(
                            req,
                            res,
                            next,
                            authCodeUrlRequestParams,
                            authCodeRequestParams,
                            msalInstance
                        );
                    }
    
                    next(error);
                }
            };
        }
}
    //...

Metoden getToken använder det angivna omfånget för att hämta en åtkomsttoken

Lägga till anrops-API-väg

Öppna filen vägar/users.js i kodredigeraren och lägg sedan till följande väg:

router.get(
    "/profile",
    isAuthenticated,
    authProvider.getToken(["User.Read"]), // check if user is authenticated
    async function (req, res, next) {
    const graphResponse = await fetch(
        GRAPH_ME_ENDPOINT,
        req.session.accessToken,
    );
    if (!graphResponse.id) {
        return res 
        .status(501) 
        .send("Failed to fetch profile details"); 
    }
    res.render("profile", {
        profile: graphResponse,
    });
    },
);

  • Du utlöser /profile-rutt, när kundanvändaren väljer länken Visa användarprofil. Appen:

    • Hämtar en åtkomsttoken med behörigheten User.Read.
    • Anropar Microsoft Graph API för att läsa den inloggade användarens profil.
    • Visar användarinformationen i profile.hbs användargränssnittet.

Anropa Microsoft Graph API

Skapa fetch.js fil och lägg sedan till följande kod:

var axios = require('axios');
var authProvider = require("./auth/AuthProvider");

/**
 * Makes an Authorization "Bearer" request with the given accessToken to the given endpoint.
 * @param endpoint
 * @param accessToken
 * @param method
 */
const fetch = async (endpoint, accessToken, method = "GET", data = null) => {
    const options = {
        headers: {
            Authorization: `Bearer ${accessToken}`,
        },
    };

    console.log(`request made to ${endpoint} at: ` + new Date().toString());

    try{
        const response = await axios.get(endpoint, options);
        return await response.data;

    }catch(error){
        throw new Error(error);
    }

};

module.exports = { fetch };

Det faktiska API-anropet sker i filen fetch.js.

Köra och testa webbappen Node/Express.js

  1. Använd stegen i för att köra och testaExpress.js-webbapplikationen för att köra din webbapplikation.
  2. När du har loggat in väljer du Visa användarprofil länk. Om appen fungerar korrekt bör du se den inloggade användarens profil som läst från Microsoft Graph API.

Relaterat innehåll