Tutorial: Autenticação de fluxo do Serviço de Aplicativo por meio da API de back-end para o Microsoft Graph

Aprenda a criar e configurar uma aplicação de serviços de aplicações back-end para aceitar a credencial de utilizador de uma aplicação front-end, depois trocar essa credencial por um serviço Azure a jusante. Esta abordagem permite ao utilizador iniciar sessão numa aplicação de Serviço de Aplicações front-end, passar a sua credencial para um Serviço de Aplicações de back-end e depois aceder a um serviço Azure com a mesma identidade.

Neste tutorial, aprenderás como:

Pré-requisitos

Complete o tutorial anterior, Aceda ao Microsoft Graph a partir de uma aplicação JavaScript segura como utilizador, antes de começar este tutorial. Não removas os recursos no final do tutorial. Este tutorial assume que tens os dois serviços de aplicação e as respetivas aplicações de autenticação.

O tutorial anterior usava o Azure Cloud Shell como o shell para a CLI do Azure. Este tutorial continua esse uso.

Arquitetura

O tutorial mostra como passar a credencial de utilizador fornecida pela aplicação front-end para a aplicação back-end e depois para um serviço Azure. Neste tutorial, o serviço downstream é o Microsoft Graph. A credencial do usuário é usada para obter seu perfil do Microsoft Graph.

Fluxo de autenticação para um usuário obter informações do Microsoft Graph nesta arquitetura:

O tutorial anterior abordou:

1. Iniciar sessão de utilizador numa aplicação front-end configurada para usar o Active Directory como fornecedor de identidade.
2. O serviço de aplicação front-end passa o token do utilizador para o serviço de aplicação back-end.
3. A aplicação de back-end está protegida para permitir que a interface faça um pedido de API. O token de acesso do utilizador tem um público para a API back-end e o âmbito de user_impersonation.
4. O registo da aplicação de back-end já tem o Microsoft Graph com o âmbito User.Read. Este âmbito é adicionado por defeito a todos os registos de aplicações.
5. No final do tutorial anterior, um perfil falso foi devolvido à aplicação front-end porque o Graph não estava ligado.

Este tutorial estende a arquitetura:

1. Conceda consentimento de administrador para ignorar a tela de consentimento do usuário para o aplicativo back-end.
2. Altere o código do aplicativo para converter o token de acesso enviado do aplicativo front-end em um token de acesso com a permissão necessária para o Microsoft Graph.
3. Fornecer o código para uma aplicação de back-end trocar o token por um novo token com o âmbito do serviço Azure associado, tal como o Microsoft Graph.
4. Forneça código para que a aplicação back-end utilize um novo token para aceder ao serviço a jusante como o utilizador que está atualmente autenticado.
5. Reimplante a aplicação back-end com az webapp up.
6. No final deste tutorial, um perfil real é retornado para a aplicação de front-end porque o Graph está conectado.

Este tutorial não:

• Altere a aplicação front-end do tutorial anterior.
• Alterar a permissão de âmbito da aplicação de autenticação de back-end porque User.Read é adicionada por defeito a todas as aplicações de autenticação.

1. Configurar o consentimento do administrador para a aplicação de back-end

No tutorial anterior, quando o utilizador inicia sessão na aplicação front-end, uma janela pop-up pede consentimento do utilizador.

Neste tutorial, para ler o perfil de usuário do Microsoft Graph, o aplicativo back-end precisa trocar o token de acesso do usuário conectado por um novo token de acesso com as permissões necessárias para o Microsoft Graph. Como o utilizador não está diretamente ligado à aplicação de back-end, não pode aceder ao ecrã de consentimento de forma interativa. Deve contornar este problema configurando o registo da aplicação de back-end no Microsoft Entra ID para conceder o consentimento do administrador. Um administrador do Microsoft Entra normalmente faz esta alteração.

1. Abra o portal Azure e procure o seu recurso para o Serviço de Aplicações do back-end.

2. Encontre a secção de Definições>e Autenticação .

3. Selecione o provedor de identidade para ir para o aplicativo de autenticação.

4. Na aplicação de autenticação, selecione Gerir>permissões da API.

5. Selecione Conceder consentimento de administrador para o diretório padrão.

   

6. Na janela pop-up, selecione Sim para confirmar o consentimento.

7. Verifique se a coluna Status diz Concedido para o diretório padrão. Com essa configuração, o aplicativo back-end não precisa mais mostrar uma tela de consentimento para o usuário conectado e pode solicitar diretamente um token de acesso. O utilizador com sessão iniciada tem acesso à configuração de âmbito User.Read porque esse é o âmbito padrão com o qual o registo da aplicação é criado.

   

2. Instale pacotes npm

No tutorial anterior, a aplicação de back-end não precisava de pacotes npm para autenticação porque a única autenticação era fornecida configurando o fornecedor de identidade no portal Azure. Neste tutorial, o token de acesso do utilizador autenticado para a API de retaguarda deve ser trocado por um token de acesso incluindo o Microsoft Graph no seu âmbito. Esta troca é concluída com duas bibliotecas porque esta troca já não utiliza autenticação por Serviços de Aplicações. Em vez disso, utiliza o Microsoft Entra ID e MSAL.js diretamente.

• @azure/msal-node: token de troca
• @microsoft/microsoft-graph-client: ligar-se ao Microsoft Graph

1. Abra o Azure Cloud Shell e mude para a aplicação de back-end do diretório de exemplo:

   cd js-e2e-web-app-easy-auth-app-to-app/backend
   

2. Instale o pacote npm da Azure Microsoft Authentication Library (MSAL):

   npm install @azure/msal-node
   

3. Instale o pacote npm do Microsoft Graph:

   npm install @microsoft/microsoft-graph-client
   

3. Adicione código para trocar o token atual pelo token do Microsoft Graph

O código-fonte para concluir esta etapa é fornecido para você. Siga os passos seguintes para incluí-lo.

1. Abra o ficheiro ./src/server.js.

2. Descomente a dependência seguinte na parte superior do ficheiro:

   import { getGraphProfile } from './with-graph/graph';
   

3. No mesmo arquivo, descomente a graphProfile variável:

   let graphProfile={};
   

4. No mesmo ficheiro, descomente as seguintes getGraphProfile linhas na get-profile rota para obter o perfil do Microsoft Graph:

   // where did the profile come from
   profileFromGraph=true;
   
   // get the profile from Microsoft Graph
   graphProfile = await getGraphProfile(accessToken);
   
   // log the profile for debugging
   console.log(`profile: ${JSON.stringify(graphProfile)}`);
   

5. Salve as alterações: Ctrl + s.

6. Redistribuir a aplicação de back-end:

   az webapp up --resource-group myAuthResourceGroup --name <back-end-app-name> 
   
   

4. Inspecionar código de back-end para trocar token de API back-end pelo token Microsoft Graph

Para alterar o token de audiência da API back-end para um token Microsoft Graph, a aplicação back-end precisa de encontrar o ID do Tenant e usá-lo como parte do objeto de configuração MSAL.js. Como a aplicação de back-end está configurada com a Microsoft como fornecedora de identidade, o ID do Inquilino e vários outros valores necessários já estão nas definições da app App Service.

O seguinte código é fornecido para si na aplicação de exemplo. Você precisa entender por que ele está lá e como ele funciona para que você possa aplicar esse trabalho a outros aplicativos criados por você que precisam dessa mesma funcionalidade.

Inspecionar o código para obter o ID do locatário

1. Abra o ficheiro ./backend/src/with-graph/auth.js.

2. Reveja a getTenantId() função.

   export function getTenantId() {
   
       const openIdIssuer = process.env.WEBSITE_AUTH_OPENID_ISSUER;
       const backendAppTenantId = openIdIssuer.replace(/https:\/\/sts\.windows\.net\/(.{1,36})\/v2\.0/gm, '$1');
   
       return backendAppTenantId;
   }
   

3. Esta função obtém o ID do locatário atual da WEBSITE_AUTH_OPENID_ISSUER variável de ambiente. O ID é extraído da variável com uma expressão regular.

Inspecione o código para obter o token do Graph usando MSAL.js

1. No ./backend/src/with-graph/auth.js ficheiro, revise a getGraphToken() função.

2. Constrói o MSAL.js objeto de configuração. Use a configuração MSAL para criar o clientCredentialAuthority. Configure o pedido em nome de. Depois, use o acquireTokenOnBehalfOf para trocar o token de acesso à API back-end por um token de acesso Graph.

   // ./backend/src/auth.js
   // Exchange current bearerToken for Graph API token
   // Env vars were set by App Service
   export async function getGraphToken(backEndAccessToken) {
   
       const config = {
           // MSAL configuration
           auth: {
               // the backend's authentication CLIENT ID 
               clientId: process.env.WEBSITE_AUTH_CLIENT_ID,
               // the backend's authentication CLIENT SECRET 
               clientSecret: process.env.MICROSOFT_PROVIDER_AUTHENTICATION_SECRET,
               // OAuth 2.0 authorization endpoint (v2)
               // should be: https://login.microsoftonline.com/BACKEND-TENANT-ID
               authority: `https://login.microsoftonline.com/${getTenantId()}`
           },
           // used for debugging
           system: {
               loggerOptions: {
                   loggerCallback(loglevel, message, containsPii) {
                       console.log(message);
                   },
                   piiLoggingEnabled: true,
                   logLevel: MSAL.LogLevel.Verbose,
               }
           }
       };
   
       const clientCredentialAuthority = new MSAL.ConfidentialClientApplication(config);
   
       const oboRequest = {
           oboAssertion: backEndAccessToken,
           // this scope must already exist on the backend authentication app registration 
           // and visible in resources.azure.com backend app auth config
           scopes: ["https://graph.microsoft.com/.default"]
       }
   
       // This example has App Service validate token in runtime
       // from headers that can't be set externally
   
       // If you aren't using App Service's authentication, 
       // you must validate your access token yourself
       // before calling this code
       try {
           const { accessToken } = await clientCredentialAuthority.acquireTokenOnBehalfOf(oboRequest);
           return accessToken;
       } catch (error) {
           console.log(`getGraphToken:error.type = ${error.type}  ${error.message}`);
       }
   }
   

5. Inspecionar o código back-end para aceder ao Microsoft Graph com o novo token

Para aceder ao Microsoft Graph como um utilizador que iniciou sessão na aplicação de front-end, as alterações incluem:

• Configuração do registro do aplicativo Ative Directory com uma permissão de API para o serviço downstream, Microsoft Graph, com o escopo necessário de User.Read.
• Conceda consentimento de administrador para ignorar a tela de consentimento do usuário para o aplicativo back-end.
• Altere o código do aplicativo para converter o token de acesso enviado do aplicativo front-end em um token de acesso com a permissão necessária para o serviço downstream, Microsoft Graph.

Agora que o código tem o token correto para o Microsoft Graph, use-o para criar um cliente para o Microsoft Graph e, em seguida, obtenha o perfil do usuário.

1. Abra o ./backend/src/graph.js

2. Na getGraphProfile() função, obtenha o token, depois o cliente autenticado do token, e depois o perfil.

   // 
   import graph from "@microsoft/microsoft-graph-client";
   import { getGraphToken } from "./auth.js";
   
   // Create client from token with Graph API scope
   export function getAuthenticatedClient(accessToken) {
       const client = graph.Client.init({
           authProvider: (done) => {
               done(null, accessToken);
           }
       });
   
       return client;
   }
   export async function getGraphProfile(accessToken) {
       // exchange current backend token for token with 
       // graph api scope
       const graphToken = await getGraphToken(accessToken);
   
       // use graph token to get Graph client
       const graphClient = getAuthenticatedClient(graphToken);
   
       // get profile of user
       const profile = await graphClient
           .api('/me')
           .get();
   
       return profile;
   }
   

6. Teste as alterações

1. Utilize um site de front-end no navegador. Podes precisar de atualizar o teu token se este expirou.

2. Selecione Get user's profile. Isto transmite a sua autenticação no token portador para o backend.

3. O backend responde com o perfil real do Microsoft Graph para a sua conta.

   

7. Limpeza

Nos passos anteriores, criou os recursos do Azure num grupo de recursos.

1. Para eliminar o grupo de recursos, execute o seguinte comando na Cloud Shell. Esse comando pode levar um minuto para ser executado.

   az group delete --name myAuthResourceGroup
   

2. Use os respetivos IDs de Cliente que encontrou anteriormente e anotou nas Enable authentication and authorization secções das aplicações de back-end e front-end.

3. Elimine registos de aplicações tanto para aplicações front-end como para back-end.

   # delete app - do this for both front-end and back-end client ids
   az ad app delete --id <client-id>
   

Perguntas frequentes

Recebi um erro 80049217, o que significa?

Este erro, CompactToken parsing failed with error code: 80049217, significa que o serviço de aplicações de back-end não está autorizado a devolver o token Microsoft Graph. Este erro é causado porque o registo da aplicação não tem a User.Read permissão.

Recebi um erro AADSTS65001, o que significa?

Este erro, AADSTS65001: The user or administrator has not consented to use the application with ID \<backend-authentication-id>. Send an interactive authorization request for this user and resource, significa que a aplicação de autenticação de back-end não foi configurada para consentimento do Administrador. Como o erro aparece no registo da aplicação de back-end, a aplicação de front-end não consegue dizer ao utilizador porque não viu o seu perfil na aplicação de front-end.

Como faço para me conectar a um serviço do Azure downstream diferente como usuário?

Este tutorial demonstra uma aplicação API autenticada para o Microsoft Graph. Os mesmos passos gerais podem ser aplicados para aceder a qualquer serviço Azure em nome do utilizador.

1. Nenhuma alteração na aplicação front-end. Só alterações ao registo da aplicação de autenticação e ao código-fonte da aplicação back-end.
2. Substitua o token do utilizador com escopo para a API de back-end por um token para o serviço subsequente que pretende aceder.
3. Utilize o token no SDK do serviço downstream para criar o cliente.
4. Use o cliente downstream para acessar a funcionalidade do serviço.

Conteúdo relacionado

• Tutorial: Criar um aplicativo seguro de n camadas no Serviço de Aplicativo do Azure
• Implantar um aplicativo Web Node.js + MongoDB no Azure