Tutorial: Acessar o Microsoft Graph por meio de um aplicativo JavaScript protegido como o usuário
Saiba como acessar o Microsoft Graph de um aplicativo Web em execução no Serviço de Aplicativo do Azure.
Você deseja adicionar acesso a Microsoft Graph do seu aplicativo Web e executar alguma ação como o usuário conectado. Esta seção descreve como conceder permissões delegadas ao aplicativo Web e obter as informações de perfil do usuário conectado da ID do Microsoft Entra.
Neste tutorial, você aprenderá a:
- Conceder permissões delegadas a um aplicativo Web.
- Chamar o Microsoft Graph em um aplicativo Web para um usuário conectado.
Caso você não tenha uma assinatura do Azure, crie uma conta gratuita do Azure antes de começar.
Pré-requisitos
- Um aplicativo Web em execução no Serviço de Aplicativo do Azure que tem o módulo de autenticação/autorização do Serviço de Aplicativo habilitado.
Permitir acesso de front-end para chamada ao Microsoft Graph
Agora que você habilitou a autenticação e a autorização no aplicativo Web, ele será registrado na plataforma de identidade da Microsoft e terá o suporte de um aplicativo do Microsoft Entra. Nesta etapa, você fornecerá as permissões ao aplicativo Web para acessar o Microsoft Graph para o usuário. (Tecnicamente, você concede ao aplicativo do Microsoft Entra do aplicativo Web as permissões para acessar o aplicativo do Microsoft Entra do Microsoft Graph para o usuário).
No menu Centro de administração do Microsoft Entra, selecione Aplicativos.
Selecione Registros de aplicativo>Aplicativos próprios>Exibir todos os aplicativos neste diretório. Selecione o nome do aplicativo Web e Permissões de API.
Escolha Adicionar uma permissão e selecione APIs da Microsoft e Microsoft Graph.
Selecione Permissões delegadas e 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 o Microsoft Graph como o usuário conectado. Nesta etapa, configure o recurso de autenticação e autorização do Serviço de Aplicativo para fornecer um token de acesso usado para acessar o 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.
Importante
Se você não configurar o Serviço de Aplicativo para retornar um token de acesso utilizável, receberá um erro CompactToken parsing failed with error code: 80049217 ao chamar as APIs do Microsoft Graph no código.
Acesse o Azure Resource Explorer e, usando a árvore de recursos, localize seu aplicativo Web. A URL do recurso será semelhante a https://resources.azure.com/subscriptions/subscriptionId/resourceGroups/SecureWebApp/providers/Microsoft.Web/sites/SecureWebApp20200915115914.
O Azure Resource Explorer agora está aberto com seu aplicativo Web selecionado na árvore de recursos.
Na parte superior da página, selecione Leitura/Gravação para permitir a edição dos recursos do Azure.
No navegador esquerdo, faça uma busca detalhada até config>authsettingsV2.
Na exibição authsettingsV2, selecione Editar.
Localize a seção de logon de identityProviders ->azureActiveDirectory e adicione as seguintes configurações de loginParameters:
"loginParameters":[ "response_type=code id_token","scope=openid offline_access profile https://graph.microsoft.com/User.Read" ]."identityProviders": { "azureActiveDirectory": { "enabled": true, "login": { "loginParameters":[ "response_type=code id_token", "scope=openid offline_access profile https://graph.microsoft.com/User.Read" ] } } } },Salve as configurações selecionando PUT. Essa configuração pode levar vários minutos para entrar em vigor. Seu aplicativo Web agora está configurado para acessar o Microsoft Graph com um token de acesso adequado. Se você não fizer isso, o Microsoft Graph retornará um erro informando que o formato do token compacto está incorreto.
Chamar o Microsoft Graph pelo Node.js
Seu aplicativo Web agora tem a permissão necessária 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 @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 o Microsoft Graph em nome do usuário
O código a seguir mostra como chamar o controlador do Microsoft Graph 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 função getAuthenticatedClient a seguir para retornar o cliente do 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 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 na ID do Microsoft Entra. Se você escolheu a configuração externa, talvez você tenha criado um novo locatário 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á como:
- Excluir os recursos do Azure criados durante as etapas do tutorial.
Exclua o grupo de recursos
No portal do Azure, selecione Grupos de recursos no menu do portal e selecione o grupo de recursos que contém o Serviço de Aplicativo e o Plano 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 Aplicativos>Registros de aplicativo. 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é Identidade>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:
- Conceder permissões delegadas a um aplicativo Web.
- Chamar o Microsoft Graph em um aplicativo Web para um usuário conectado.