Partilhar via

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

  • Artigo

Saiba como criar e configurar um Serviço de Aplicativo de back-end para aceitar a credencial de usuário de um aplicativo frontend 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, irá aprender a:

  • Configurar o aplicativo de autenticação de back-end para fornecer um token com escopo para o serviço do Azure downstream
  • Use o código JavaScript para trocar o token de acesso do usuário conectado por um novo token para o serviço downstream.
  • Use o código JavaScript para acessar o serviço downstream.

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.

Architectural image of App Service connecting to App Service connecting to Microsoft Graph on behalf of a signed-in user.

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

Tutorial anterior abordado:

  1. Entre no usuário em um serviço de aplicativo frontend configurado para usar o Ative Directory como o provedor de identidade.
  2. O serviço de aplicativo frontend passa o token do usuário para o serviço de aplicativo 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 uma audiência para a API de back-end e o escopo do 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 código para ter token de troca de aplicativo back-end para novo token com escopo do serviço do Azure downstream, 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 o aplicativo back-end com az webapp upo .
  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 escopo do aplicativo de autenticação de back-end porque User.Read é adicionada por padrão a todos os aplicativos de autenticação.

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 na ID do Microsoft Entra 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.

    Screenshot of Azure portal authentication app with admin consent button highlighted.

  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 usuário conectado tem acesso à configuração de User.Read escopo porque esse é o escopo padrão com o qual o registro do aplicativo é criado.

    Screenshot of Azure portal authentication app with admin consent granted in status column.

2. Instale pacotes npm

No tutorial anterior, o aplicativo 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 usuário conectado para a API de back-end deve ser trocado por um token de acesso com o Microsoft Graph em seu escopo. Essa troca é concluída com duas bibliotecas porque essa troca não usa mais a autenticação do Serviço de Aplicativo, mas o Microsoft Entra ID e o MSAL.js diretamente.

  1. Abra o Azure Cloud Shell e altere para o aplicativo de back-end do diretório de exemplo:

    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ê. Use as etapas a seguir para incluí-lo.

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

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

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

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

    let graphProfile={};

  4. No mesmo arquivo, 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 o aplicativo de back-end está configurado com a Microsoft como o provedor de identidade, a ID do Locatário e vários outros valores necessários já estão nas configurações do aplicativo do Serviço de Aplicativo.

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 é analisado fora da variável com uma expressão regular.

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

  1. Ainda no ./backend/src/with-graph/auth.js arquivo, reveja a getGraphToken() função.

  2. Crie o objeto de configuração MSAL.js, use a configuração MSAL para criar clientCredentialAuthority. Configure a solicitação on-behalf-off. Em seguida, use acquireTokenOnBehalfOf para trocar o token de acesso à 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 a seringa ./backend/src/graph.js

  2. Na função, obtenha o getGraphProfile() token, em seguida, o cliente autenticado do token e, em seguida, 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. O URL está no formato de https://<front-end-app-name>.azurewebsites.net/. 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.

    Screenshot of web browser showing frontend application after successfully getting real profile from backend app.

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 a ID do Cliente dos aplicativos de autenticação, que você encontrou anteriormente e anotou nas Enable authentication and authorization seções para os aplicativos de back-end e front-end.

  3. Exclua registros de aplicativos para aplicativos frontend e back-end.

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

Perguntas mais frequentes

Recebi um erro 80049217, o que significa?

Esse erro, , CompactToken parsing failed with error code: 80049217significa 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 registro do aplicativo está faltando 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 resourcesignifica 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 downstream diferente do Azure 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 registro 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. Use 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