Tutorial: Acessar o Microsoft Graph a partir de um aplicativo JavaScript protegido como usuário.

Saiba como acessar Microsoft Graph de um aplicativo Web em execução no Serviço de Aplicativo do Azure.

Você deseja adicionar acesso ao Microsoft Graph de seu aplicativo web e realizar alguma ação como o usuário que está conectado. Esta seção descreve como conceder permissões delegadas ao aplicativo Web e obter as informações de perfil do usuário conectado de Microsoft Entra ID.

Neste tutorial, você aprenderá a:

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

Pré-requisitos

• Um aplicativo Web em execução em Serviço de Aplicativo do Azure que tem o módulo de autenticação/autorização App Service habilitado.

Conceder acesso ao front-end para chamar o Microsoft Graph

Agora que você habilitou a autenticação e a autorização em seu aplicativo Web, o aplicativo Web é registrado com o plataforma de identidade da Microsoft e tem o suporte de um aplicativo Microsoft Entra. Nesta etapa, você concede permissões ao aplicativo Web para acessar Microsoft Graph para o usuário. (Tecnicamente, você concede ao aplicativo Microsoft Entra do app Web as permissões necessárias para que ele acesse o aplicativo Microsoft Graph em nome do usuário.)

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

2. Selecione Registros de aplicativos>Aplicativos próprios>Ver todos os aplicativos neste diretório. Selecione o nome do aplicativo Web e Permissões de API.

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

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

Configurar o Serviço de Aplicativo para retornar um token de acesso utilizável

O aplicativo Web agora tem as permissões necessárias para acessar Microsoft Graph como o usuário conectado. Nesta etapa, você configurará a autenticação e a autorização do Serviço de Aplicativo para fornecer um token de acesso utilizável para acessar Microsoft Graph. Para esta etapa, você precisa adicionar o escopo User.Read para o serviço downstream (Microsoft Graph): https://graph.microsoft.com/User.Read.

Chamar Microsoft Graph de Node.js

Seu aplicativo Web agora tem as permissões necessárias e também adiciona a ID do cliente do Microsoft Graph aos parâmetros de logon.

Instalar os pacotes da biblioteca de clientes

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

npm install @microsoft/microsoft-graph-client

Configurar as 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
        },
    },
}

Chamar Microsoft Graph em nome do usuário

O código a seguir mostra como chamar Microsoft Graph controlador como o aplicativo e obter algumas informações do usuário.

// 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 depende da seguinte função getAuthenticatedClient para retornar Microsoft Graph cliente.

// 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 os recursos

Se você concluiu todas as etapas neste tutorial de várias partes, você 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. Você também criou um registro de aplicativo no Microsoft Entra ID. Se você escolheu a configuração externa, talvez tenha criado um novo cliente externo. Quando não for mais necessário, exclua esses recursos e o registro de aplicativo para que você não continue a acumular encargos.

Neste tutorial, você aprenderá a:

Exclua o grupo de recursos

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

Selecione Excluir grupo de recursos para excluir o grupo de recursos e todos os recursos que ele contém.

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

Excluir o registro do aplicativo

No Centro de Administração do Microsoft Entra, selecione Registros de Aplicativos. Em seguida, selecione o aplicativo que você criou.

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

Exclua o locatário externo

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

Selecione o locatário que você deseja excluir e, em seguida, selecione Excluir.

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

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

Próximas etapas

Neste tutorial, você aprendeu a: