Tutorial: Acede ao Microsoft Graph a partir de uma aplicação JavaScript segura como utilizador

Aprenda como aceder ao Microsoft Graph a partir de uma aplicação web a correr no Serviço de Aplicações do Azure.

Quer adicionar acesso ao Microsoft Graph na sua aplicação web e executar ações como o utilizador com sessão iniciada. Esta secção descreve como conceder permissões delegadas à aplicação web e obter as informações de perfil do utilizador com sessão iniciada a partir do Microsoft Entra ID.

Neste tutorial, irá aprender a:

Se não tiver uma conta Azure, crie uma conta free antes de começar.

Pré-requisitos

• Uma aplicação web a correr em Serviço de Aplicações do Azure que tem ativado o módulo de autenticação/autorização App Service.

Conceder acesso front-end para aceder ao Microsoft Graph

Agora que ativou a autenticação e autorização na sua aplicação web, a aplicação web está registada na plataforma de identidades da Microsoft e é suportada por uma aplicação Microsoft Entra. Neste passo, dá permissões à aplicação web para aceder ao Microsoft Graph ao utilizador. (Tecnicamente, dá à aplicação web Microsoft Entra as permissões necessárias para que esta aceda à aplicação Microsoft Graph Entra em nome do utilizador.)

1. No centro de administração Microsoft Entra, selecione Entra ID.

2. Selecione Registos de aplicações>Aplicações próprias>Veja todas as aplicações neste diretório. Selecione o nome do aplicativo Web e, em seguida, selecione Permissões de API.

3. Selecione Adicionar uma permissão, e depois selecione Microsoft APIs e Microsoft Graph.

4. Selecione Permissões delegadas e, em seguida, selecione User.Read na lista. Selecione Adicionar permissões.

Configurar o Serviço de Aplicações para devolver um token de acesso utilizável

A aplicação web tem agora as permissões necessárias para aceder ao Microsoft Graph enquanto utilizador iniciado sessão. Neste passo, configura a autenticação e autorização do App Service para lhe dar um token de acesso utilizável para aceder ao Microsoft Graph. Para este passo, precisa de adicionar o âmbito User.Read para o serviço a jusante (Microsoft Graph): https://graph.microsoft.com/User.Read.

Chamar o Microsoft Graph a partir do Node.js

A sua aplicação web agora tem as permissões necessárias e também adiciona o ID do cliente do Microsoft Graph aos parâmetros de login.

Instalar pacotes de biblioteca cliente

Instale os pacotes @azure/identity e os pacotes @microsoft/microsoft-graph-client no seu projeto com o npm.

npm install @microsoft/microsoft-graph-client

Configurar informações de autenticação

Crie um objeto para manter as configurações de autenticação:

// partial code in app.js
const appSettings = {
    appCredentials: {
        clientId: process.env.WEBSITE_AUTH_CLIENT_ID, // Enter the client Id here,
        tenantId: "common", // Enter the tenant info here,
        clientSecret: process.env.MICROSOFT_PROVIDER_AUTHENTICATION_SECRET // Enter the client secret here,
    },
    authRoutes: {
        redirect: "/.auth/login/aad/callback", // Enter the redirect URI here
        error: "/error", // enter the relative path to error handling route
        unauthorized: "/unauthorized" // enter the relative path to unauthorized route
    },
    protectedResources: {
        graphAPI: {
            endpoint: "https://graph.microsoft.com/v1.0/me", // resource endpoint
            scopes: ["User.Read"] // resource scopes
        },
    },
}

Ligue para a Microsoft Graph em nome do utilizador

O código seguinte mostra como chamar o controlador Microsoft Graph como a aplicação e obter alguma informação do utilizador.

// controllers/graphController.js

// get the name of the app service instance from environment variables
const appServiceName = process.env.WEBSITE_SITE_NAME;

const graphHelper = require('../utils/graphHelper');

exports.getProfilePage = async(req, res, next) => {

    try {
        // get user's access token scoped to Microsoft Graph from session
        // use token to create Graph client
        const graphClient = graphHelper.getAuthenticatedClient(req.session.protectedResources["graphAPI"].accessToken);

        // return user's profile
        const profile = await graphClient
            .api('/me')
            .get();

        res.render('profile', { isAuthenticated: req.session.isAuthenticated, profile: profile, appServiceName: appServiceName });   
    } catch (error) {
        next(error);
    }
}

O código anterior baseia-se na seguinte função getAuthenticatedClient para devolver o cliente Microsoft Graph.

// utils/graphHelper.js

const graph = require('@microsoft/microsoft-graph-client');

getAuthenticatedClient = (accessToken) => {
    // Initialize Graph client
    const client = graph.Client.init({
        // Use the provided access token to authenticate requests
        authProvider: (done) => {
            done(null, accessToken);
        }
    });

    return client;
}

Limpar recursos

Se você concluiu todas as etapas neste tutorial com várias partes, criou um Serviço de Aplicativo, um plano de hospedagem do Serviço de Aplicativo e uma conta de armazenamento em um grupo de recursos. Também criou um registo de aplicação no Microsoft Entra ID. Se escolheu a configuração externa, talvez tenha criado uma nova entidade externa. Quando não for mais necessário, exclua esses recursos e o registro do aplicativo para não continuar acumulando cobranças.

Neste tutorial, irá aprender a:

Eliminar o grupo de recursos

No portal Azure, selecione Resource groups no menu do portal e selecione o grupo de recursos que contém o seu Serviço de Aplicações e o plano de Serviço de Aplicações.

Selecione Excluir grupo de recursos para excluir o grupo de recursos e todos os recursos.

Esse comando pode levar vários minutos para ser executado.

Excluir o registro do aplicativo

No centro de administração do Microsoft Entra, selecione Registos de Aplicações. Em seguida, selecione o aplicativo que você criou.

Na visão geral de registro do aplicativo, selecione Excluir.

Excluir o locatário externo

Se você criou um novo locatário externo, poderá excluí-lo. Em centro de administração Microsoft Entra, navegue até Entra ID>Visão geral>Gerir inquilinos.

Selecione o inquilino que pretende eliminar e, em seguida, selecione Eliminar.

Talvez seja necessário concluir as ações necessárias antes de excluir o locatário. Por exemplo, talvez seja necessário excluir todos os fluxos de usuários e registros de aplicativos no locatário.

Se você estiver pronto para excluir o locatário, selecione Excluir.

Próximos passos

Neste tutorial, ficou a saber como: