Zelfstudie: Microsoft Graph API aanroepen vanuit een Node/Express.js-web-app

Van toepassing op: arbeidskrachtenhuurders externe huurders (meer informatie)

In deze zelfstudie roept u Microsoft Graph API aan vanuit een Node/Express.js-web-app. Zodra een gebruiker zich aanmeldt, verkrijgt de app een toegangstoken om Microsoft Graph API aan te roepen.

Deze zelfstudie is deel 3 van de driedelige reeks zelfstudies.

In deze zelfstudie gaat u het volgende doen:

• Node/Express.js-web-app bijwerken om een toegangstoken te verkrijgen
• Gebruik het toegangstoken om Microsoft Graph API aan te roepen.

Voorwaarden

• Voltooi de stappen in Zelfstudie: Aanmelding toevoegen aan een Node/Express.js-web-app met behulp van Microsoft Identity Platform.

Een UI-onderdelen toevoegen

1. Open in je code-editor het views/index.hbs bestand en voeg vervolgens een Bekijk gebruikersprofiel koppeling toe met behulp van het volgende codefragment.

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

   Nadat u de update hebt uitgevoerd, moet het views/index.hbs-bestand er ongeveer als volgt uitzien:

      <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. Maak views/profile.hbs bestand en voeg de volgende code toe:

   <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>
   

   • Op deze pagina worden de profielgegevens van de gebruiker weergegeven die door Microsoft Graph API worden geretourneerd.

Een toegangstoken verkrijgen

Open in de code-editor het bestand auth/AuthProvider.js en voeg vervolgens getToken methode toe in de klasse 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);
                }
            };
        }
}
    //...

De methode getToken gebruikt het opgegeven bereik om een toegangstoken te verkrijgen

API-route voor aanroepen toevoegen

Open in de code-editor het bestand routes/users.js en voeg vervolgens de volgende route toe:

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,
    });
    },
);

• U activeert de /profile route wanneer de klantgebruiker de koppeling Gebruikersprofiel weergeven selecteert. De app:

  • Hiermee verkrijgt u een toegangstoken met de machtiging User.Read.
  • Roept Microsoft Graph API aan om het profiel van de aangemelde gebruiker te lezen.
  • Geeft de gebruikersgegevens weer in de gebruikersinterface van profile.hbs.

Microsoft Graph API aanroepen

Maak fetch.js bestand en voeg vervolgens de volgende code toe:

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 };

De werkelijke API-aanroep vindt plaats in het fetch.js-bestand.

De Node/Express.js-web-app uitvoeren en testen

1. Gebruik de stappen in De Node-/Express.js-web-app uitvoeren en testen om uw web-app uit te voeren.
2. Nadat u zich hebt aangemeld, selecteert u gebruikersprofiel weergeven koppeling. Als uw app correct werkt, ziet u het profiel van de aangemelde gebruiker als gelezen uit Microsoft Graph API.

Verwante inhoud

• Het profiel van de klantgebruiker bewerken in een Node.js-web-app