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

Saiba como criar e configurar um Serviço de Aplicativo de back-end para aceitar a credencial de usuário de um aplicativo front-end e, em seguida, trocar essa credencial por um serviço do Azure downstream. Isso permite que um usuário entre em um serviço de Aplicativo front-end, passe suas credenciais para um serviço de Aplicativo de back-end e acesse um serviço do Azure com a mesma identidade.

Neste tutorial, aprenderás como:

Pré-requisitos

Conclua o tutorial anterior, Acesse o Microsoft Graph a partir de um aplicativo JavaScript seguro como usuário, antes de iniciar este tutorial, mas não remova os recursos no final do tutorial. Este tutorial pressupõe que você tenha os dois serviços de aplicativo e seus aplicativos de autenticação correspondentes.

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 usuário fornecida pelo aplicativo front-end para o aplicativo back-end e, em seguida, para um serviço do 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:

Tutorial anterior cobriu:

1. Inicie sessão na aplicação frontend configurada para usar o Active Directory como provedor de identidade.
2. O serviço de aplicação frontend passa o token do usuário para o serviço de aplicação de back-end.
3. O aplicativo de back-end é protegido para permitir que o frontend faça uma solicitação de API. O token de acesso do usuário tem um destinatário para a API de back-end e um escopo de user_impersonation.
4. O registro do aplicativo back-end já tem o Microsoft Graph com o escopo User.Read. Isso é adicionado por padrão a todos os registros de aplicativos.
5. No final do tutorial anterior, um perfil falso foi devolvido ao aplicativo frontend porque o Graph não estava conectado.

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. Forneça o código para que o aplicativo de back-end troque um token por um novo token com o escopo de um serviço do Azure a jusante, como o Microsoft Graph.
4. Forneça código para que o aplicativo back-end use um novo token para acessar o serviço downstream como o usuário de autenticação atual.
5. Reimplante a aplicação back-end com az webapp up.
6. No final deste tutorial, um perfil real é retornado ao aplicativo frontend porque o Graph está conectado.

Este tutorial não:

• Altere o aplicativo frontend do tutorial anterior.
• Altere a permissão de âmbito da aplicação de autenticação no servidor uma vez que User.Read é adicionada por padrão a todas as aplicações de autenticação.

1. Configurar o consentimento de administrador para o aplicativo de back-end

No tutorial anterior, quando o usuário entrava no aplicativo frontend, um pop-up era exibido solicitando o consentimento do usuário.

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 usuário não está diretamente conectado ao aplicativo de back-end, ele não pode acessar a tela de consentimento interativamente. Você deve contornar isso configurando o registro do aplicativo back-end no Microsoft Entra ID para conceder o consentimento do administrador. Essa é uma alteração de configuração normalmente feita por um administrador do Ative Directory.

1. Abra o portal do Azure e procure sua pesquisa para o Serviço de Aplicativo de back-end.

2. Encontre a seção Configurações -> Autenticação .

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

4. No aplicativo de autenticação, selecione Gerenciar -> permissões de 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, o aplicativo de back-end não precisava de nenhum pacote npm para autenticação porque a única autenticação era fornecida pela configuração do provedor de identidade no portal do 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 não utiliza mais a autenticação do Serviço de Aplicações, mas sim o ID do Microsoft Entra e MSAL.js diretamente.

• @azure/MSAL-node - token de troca
• @microsoft/microsoft-graph-client - conectar-se ao Microsoft Graph

1. Abra o Azure Cloud Shell e vá para a aplicação de back-end do diretório de amostra.

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

2. Instale o pacote npm do Azure 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. Reimplante o aplicativo de back-end:

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

4. Inspecione o código de back-end para trocar o token da API de back-end pelo token do Microsoft Graph

Para alterar o token de audiência da API de back-end para um token do Microsoft Graph, o aplicativo de back-end precisa localizar a ID do locatário e usá-la como parte do objeto de configuração MSAL.js. Como a aplicação de back-end está configurada com a Microsoft como fornecedor de identidade, o ID do Locatário e vários outros valores necessários já estão nas configurações da aplicação do serviço de aplicações.

O código a seguir já é fornecido para você no aplicativo 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. Ainda no ./backend/src/with-graph/auth.js ficheiro, reveja a getGraphToken() função.

2. Crie o objeto de configuração MSAL.js, use a configuração MSAL para criar o clientCredentialAuthority. Configure a solicitação on-behalf-off. Em seguida, use o acquireTokenOnBehalfOf para trocar o token de acesso da API de back-end por um token de acesso do 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. Inspecione o código de back-end para acessar o Microsoft Graph com o novo token

Para acessar o Microsoft Graph como um usuário conectado ao aplicativo 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 função getGraphProfile(), obtenha o token, depois o cliente autenticado a partir do token e, por último, obtenha 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. Use o site frontend em um navegador. Talvez seja necessário atualizar seu token se ele tiver expirado.

2. Selecione Get user's profile. Isso passa sua autenticação no token do portador para o back-end.

3. O back-end responde com o perfil real do Microsoft Graph para sua conta.

   

7. Limpeza

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

1. Exclua o grupo de recursos executando o seguinte comando no Cloud Shell. Este comando pode demorar alguns minutos a ser executado.

   az group delete --name myAuthResourceGroup
   

2. Use o ID do Cliente dos aplicativos de autenticação, que encontrou anteriormente e anotou nas Enable authentication and authorization seções para os aplicativos de back-end e front-end.

3. Exclua os registos de aplicações para o frontend e o backend.

   # delete app - do this for both frontend and backend client ids
   az ad app delete --id <client-id>
   

Perguntas frequentes

Recebi um erro 80049217, o que significa?

Esse erro, CompactToken parsing failed with error code: 80049217, significa que o serviço de aplicativo de back-end não está autorizado a retornar o token do 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 o aplicativo de autenticação de back-end não foi configurado para consentimento do administrador. Como o erro aparece no log do aplicativo de back-end, o aplicativo front-end não pode dizer ao usuário por que ele não viu seu perfil no aplicativo de front-end.

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

Este tutorial demonstra um aplicativo de API autenticado no Microsoft Graph, no entanto, as mesmas etapas gerais podem ser aplicadas para acessar qualquer serviço do Azure em nome do usuário.

1. Nenhuma alteração no aplicativo frontend. Apenas alterações no registo do aplicativo de autenticação do back-end e no código-fonte do aplicativo de back-end.
2. Troque o token do usuário com escopo para API de back-end por um token para o serviço downstream que você deseja acessar.
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.

Próximos passos

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