Compartilhar via


Tutorial: Chamar a API do Microsoft Graph a partir de um aplicativo Web Node/Express.js

Aplica-se a: círculo verde com um símbolo de marca de seleção branco. Inquilinos do Workforce círculo verde com um símbolo de marca de seleção branco. Inquilinos externos (saber mais)

Neste tutorial, você chama a API do Microsoft Graph de um aplicativo Web Node/Express.js. Depois que um usuário entra, o aplicativo adquire um token de acesso para chamar a API do Microsoft Graph.

Este tutorial é a parte 3 da série de tutoriais de 3 partes.

Neste tutorial, você:

  • Atualizar o aplicativo Web Node/Express.js para adquirir um token de acesso
  • Use o token de acesso para chamar a API do Microsoft Graph.

Pré-requisitos

Adicionar componentes da interface do usuário

  1. No editor de códigos, abra arquivo de views/index.hbs e adicione um link Exibir perfil de usuário usando o seguinte trecho de código:

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

    Depois de fazer a atualização, seu arquivo views/index.hbs deve ser semelhante ao seguinte arquivo:

       <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. Crie o ficheiro views/profile.hbs e, em seguida, adicione o seguinte código:

    <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>
    
    • Esta página exibe os detalhes do perfil do usuário que a API do Microsoft Graph retorna.

Adquira um token de acesso

No editor de códigos, abra o arquivo auth/AuthProvider.js e adicione o método getToken na 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);
                }
            };
        }
}
    //...

O método getToken usa o escopo especificado para adquirir um token de acesso

Adicionar rota de API de chamada

No editor de códigos, abra o arquivo routes/users.js e adicione a seguinte rota:

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,
    });
    },
);
  • Você aciona a rota /profile quando o usuário cliente seleciona o link Ver perfil do usuário. A aplicação:

    • Adquire um token de acesso com a permissão User.Read.
    • Faz uma chamada para a API do Microsoft Graph para ler o perfil do usuário conectado.
    • Exibe os detalhes do usuário no profile.hbs UI.

Chame a API do Microsoft Graph

Crie fetch.js ficheiro e, em seguida, adicione o seguinte código:

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

A chamada de API real acontece no arquivo fetch.js.

Executar e testar o aplicativo Web Node/Express.js

  1. Siga os passos em Executar e testar a aplicação web Node/Express.js para executar a sua aplicação web.
  2. Depois de entrar, selecione Exibir perfil de usuário link. Se o seu aplicativo funcionar corretamente, você verá o perfil do usuário conectado como lido na API do Microsoft Graph.