Esercitazione: Chiamare l'API Microsoft Graph da un'applicazione Web Node/Express.js

Si applica a: I tenant della forza lavoro Tenant esterni (altre informazioni)

In questa esercitazione si chiama l'API Microsoft Graph da un'app Web Node/Express.js. Dopo l'accesso di un utente, l'app acquisisce un token di accesso per chiamare l'API Microsoft Graph.

Questa esercitazione è la parte 3 della serie di esercitazioni in 3 parti.

In questa esercitazione:

• Aggiornare l'applicazione WebExpress.js per acquisire un token di accesso
• Usare il token di accesso per chiamare l'API Microsoft Graph.

Prerequisiti

• Completare i passaggi descritti in Esercitazione: Aggiungere l'accesso a un'app Web Node/Express.js usando Microsoft Identity Platform.

Aggiungere componenti dell'interfaccia utente

1. Nell'editor di codice, apri il file views/index.hbs, quindi aggiungi un collegamento Visualizza profilo utente usando il frammento di codice seguente:

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

   Dopo aver eseguito l'aggiornamento, il file views/index.hbs dovrebbe essere simile al file seguente:

      <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. Creare file views/profile.hbs, quindi aggiungere il codice seguente:

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

   • Questa pagina visualizza i dettagli del profilo dell'utente restituiti dall'API Microsoft Graph.

Acquisire un token di accesso

Nell'editor di codice aprire il file auth/AuthProvider.js, quindi aggiungere getToken metodo nella classe 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);
                }
            };
        }
}
    //...

Il metodo getToken usa l'ambito specificato per acquisire un token di accesso

Aggiungere una route API di chiamata

Nell'editor di codice aprire il file route/users.js, quindi aggiungere la route seguente:

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

• Si attiva la route /profile quando l'utente del cliente seleziona il collegamento Visualizza profilo utente . L'app:

  • Acquisisce un token di accesso con l'autorizzazione User.Read.
  • Effettua una chiamata all'API Microsoft Graph per leggere il profilo dell'utente connesso.
  • Visualizza i dettagli dell'utente nell'interfaccia utente profile.hbs.

Chiamare l'API Microsoft Graph

Creare fetch.js file, quindi aggiungere il codice seguente:

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

La chiamata API effettiva viene eseguita nel file fetch.js.

Eseguire e testare l'app Web Node/Express.js

1. Usare i passaggi descritti in Eseguire e testare l'app Web Node/Express.js per eseguire l'app Web.
2. Dopo aver eseguito l'accesso, selezionare il link Visualizza profilo utente. Se l'app funziona correttamente, dovrebbe essere visualizzato il profilo dell'utente connesso come letto dall'API Microsoft Graph.

Contenuto correlato

• Modificare il profilo dell'utente del cliente in un'app Web Node.js