Tutorial: Autenticar e autorizar usuários de ponta a ponta no Serviço de Aplicativo do Azure

eA autenticação nesse procedimento é fornecida na camada de plataforma de hospedagem pelo Serviço de Aplicativo do Azure. Você deve implantar o aplicativo front-end e back-end e configurar a autenticação para que esse aplicativo Web seja usado com êxito.

Depois de concluir esse cenário, prossiga para o próximo tutorial para saber como se conectar aos serviços do Azure como um usuário autenticado. Cenários comuns incluem acessar o Armazenamento do Azure ou um banco de dados como o usuário que tem habilidades específicas ou acessar tabelas ou arquivos específicos.

Neste tutorial, você:

Pré-requisitos

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

• Node.js (LTS)

• Use o ambiente Bash no Azure Cloud Shell. Para obter mais informações, confira Introdução ao Azure Cloud Shell.

  

• Se preferir executar os comandos de referência da CLI localmente, instale a CLI do Azure. Para execuções no Windows ou no macOS, considere executar a CLI do Azure em um contêiner do Docker. Para saber mais, confira Como executar a CLI do Azure em um contêiner do Docker.

  • Se estiver usando uma instalação local, entre com a CLI do Azure usando o comando az login. Para concluir o processo de autenticação, siga as etapas exibidas no terminal. Para obter outras opções de entrada, consulte Autenticar no Azure usando a CLI do Azure.

  • Quando solicitado, instale a extensão da CLI do Azure no primeiro uso. Para obter mais informações sobre extensões, confira Usar e gerenciar extensões com a CLI do Azure.

  • Execute az version para localizar a versão e as bibliotecas dependentes que estão instaladas. Para fazer a atualização para a versão mais recente, execute az upgrade.

Obter o perfil do usuário

O aplicativo front-end é configurado para usar com segurança a API de back-end. O aplicativo front-end fornece uma entrada da Microsoft para o usuário e, em seguida, permite que o usuário obtenha seu perfil falso do back-end. Este tutorial usa um perfil falso para simplificar as etapas a fim de concluir o cenário.

Antes que o código-fonte seja executado no front-end, o Serviço de Aplicativo injeta o autenticado accessToken do cabeçalho do Serviço de Aplicativo x-ms-token-aad-access-token. Então, o código-fonte do front-end acessa e envia o accessToken ao servidor de back-end. O servidor front-end envia o token como o bearerToken para acessar com segurança a API de back-end. O servidor de back-end valida o bearerToken antes de passá-lo para o código-fonte de back-end. Depois que o código-fonte de back-end receber o bearerToken, ele poderá ser usado.

No próximo tutorial desta série, o bearerToken é trocado por um token com um escopo para acessar a API do Microsoft Graph. A API do Microsoft Graph retorna as informações de perfil do usuário.

Clonar o aplicativo de exemplo

No Azure Cloud Shell, execute o comando a seguir para clonar o repositório de exemplo.

git clone https://github.com/Azure-Samples/js-e2e-web-app-easy-auth-app-to-app

Criar e implantar aplicativos

Crie o grupo de recursos, o plano do aplicativo Web e o aplicativo Web e, em seguida, implante em uma única etapa.

Definir a configuração do aplicativo

O aplicativo front-end precisa conhecer a URL do aplicativo de back-end para solicitações de API. Use o seguinte comando da CLI do Azure para definir a configuração de aplicativo. A URL deve ser https://<back-end-app-name>.azurewebsites.net.

az webapp config appsettings set --resource-group myAuthResourceGroup --name <front-end-app-name> --settings BACKEND_URL="https://<back-end-app-name>.azurewebsites.net"

O front-end chama o back-end

Navegue até o aplicativo front-end e retorne o perfil falso do back-end. Essa ação valida que o front-end está solicitando com êxito o perfil do back-end e o back-end está retornando o perfil.

1. Abra o aplicativo Web front-end em um navegador: https://<front-end-app-name>.azurewebsites.net.

   

2. Selecione o link Obter perfil do usuário .

3. Exiba o perfil falso retornado do aplicativo Web de back-end.

   

   O valor de withAuthentication igual a false indica que a autenticação ainda não está configurada.

Configurar autenticação

Nesta seção, habilite a autenticação e a autorização para os dois aplicativos Web. Esse tutorial usa o Microsoft Entra ID como provedor de identidade.

Você também configura o aplicativo front-end para:

• Conceder ao aplicativo de front-end acesso ao aplicativo de back-end
• Configurar o Serviço de Aplicativo para retornar um token utilizável
• Usar o token em seu código

Para obter mais informações, confira Configurar a autenticação do Microsoft Entra no seu aplicativo dos Serviços de Aplicativos.

Habilitar autenticação e autorização para o aplicativo de back-end

1. No portal do Azure, pesquise e selecione grupos de recursos.

2. Clique em grupos de recursos e selecione o grupo de recursos. Em Visão geral, selecione seu aplicativo de back-end.

3. No menu esquerdo do aplicativo de back-end, selecione Configurações>Autenticação, e, em seguida, selecione Adicionar provedor de identidade.

4. Na página Adicionar um provedor de identidade , para o provedor de identidade, selecione a Microsoft para entrar usando as identidades da Microsoft e do Microsoft Entra.

5. Selecione um valor para a expiração do segredo do cliente.

   

6. Para os outros valores, aceite as configurações padrão e selecione Adicionar.

7. A página de Autenticação é aberta. Copie a ID do cliente do aplicativo Microsoft Entra para o Bloco de Notas. Você precisará desse valor mais tarde.

   

Se você parar por aqui, terá um aplicativo autônomo que a autenticação e a autorização do Serviço de Aplicativo protegem. As seções restantes mostram como proteger uma solução de vários aplicativos enviando o usuário autenticado do front-end para o back-end.

Habilitar autenticação e autorização para o aplicativo front-end

1. No portal do Azure, pesquise e selecione grupos de recursos.

2. Clique em grupos de recursos e selecione o grupo de recursos. Em Visão geral, selecione seu aplicativo front-end.

3. No menu esquerdo do aplicativo front-end, selecioneAutenticação de> e, em seguida, selecione Adicionar provedor de identidade.

4. Na página Adicionar um provedor de identidade , para o provedor de identidade, selecione a Microsoft para entrar usando as identidades da Microsoft e do Microsoft Entra.

5. Selecione um valor para a expiração do segredo do cliente. Para os outros valores, aceite as configurações padrão e selecione Adicionar.

6. A página de Autenticação é aberta. Copie a ID do cliente do aplicativo Microsoft Entra para o Bloco de Notas. Você precisará desse valor mais tarde.

Conceder acesso do aplicativo front-end ao aplicativo back-end

Você habilitou a autenticação e a autorização para ambos os aplicativos. Para concluir a autenticação, você precisa fazer três coisas:

• Expor o aplicativo de back-end como uma API definindo um escopo
• Conceder ao aplicativo de front-end acesso ao aplicativo de back-end
• Configurar o Serviço de Aplicativo para retornar um token utilizável
• Usar o token em seu código

Nesta seção, você concederá ao aplicativo front-end acesso ao aplicativo de back-end em nome do usuário. Tecnicamente, você concede ao aplicativo AD do front-end as permissões para acessar o aplicativo AD do back-end em nome do usuário.

1. Na página Autenticação do aplicativo front-end, em Provedor de identidade, selecione o nome do aplicativo front-end. Este registro de aplicativo foi gerado automaticamente para você.

2. Selecione Gerenciar>permissões de API no menu à esquerda.

3. Selecione Adicionar uma permissão e escolha Minhas APIs><nome-do-aplicativo-de-back-end>.

4. Na página Solicitar permissões de API para o aplicativo de back-end, selecione Permissões delegadas e user_impersonation e, em seguida, selecione Adicionar permissões.

   

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

O aplicativo de front-end agora tem as permissões necessárias para acessar o aplicativo de back-end como o usuário conectado. Nesta seção, configure a autenticação e a autorização do Serviço de Aplicativo para fornecer um token de acesso utilizável para acessar o back-end. Para esta etapa, você precisa da ID do cliente de back-end copiada de Habilitar autenticação e autorização para o aplicativo de back-end.

No Cloud Shell, execute os comandos a seguir no aplicativo front-end para adicionar o scope parâmetro à configuração identityProviders.azureActiveDirectory.login.loginParametersde autenticação. Substitua <nome-do-aplicativo-de-front-end> e <id-do-cliente-de-back-end>.

az extension add --name authV2
authSettings=$(az webapp auth show -g myAuthResourceGroup -n <front-end-app-name>)
authSettings=$(echo "$authSettings" | jq '.properties' | jq '.identityProviders.azureActiveDirectory.login += {"loginParameters":["scope=openid offline_access api://<back-end-client-id>/user_impersonation"]}')
az webapp auth set --resource-group myAuthResourceGroup --name <front-end-app-name> --body "$authSettings"

Os comandos adicionam uma loginParameters propriedade com outros escopos personalizados. Confira uma explicação dos escopos solicitados:

• openid já é solicitado pelo Serviço de Aplicativo por padrão. Para mais informações, consulte Permissões do OpenID Connect.
• offline_access está incluído aqui para sua conveniência, caso você queira atualizar os tokens.
• api://<back-end-client-id>/user_impersonation é uma API exposta no registro do aplicativo de back-end. É o escopo que fornece um JWT que inclui o aplicativo de back-end como um público-alvo do token.

Os aplicativos estão configurados. O front-end agora está pronto para acessar o back-end com um token de acesso adequado.

Para saber mais sobre como configurar o token de acesso para outros provedores, confira Atualizar tokens do provedor de identidade.

Configurar o serviço de aplicação de back-end para aceitar um token somente do serviço de aplicação de front-end

Você também deve configurar o Serviço de Aplicativo de back-end para aceitar apenas um token do Serviço de Aplicativo front-end. Não fazer essa configuração resulta em um erro 403: proibido quando você passa o token do front-end para o back-end.

Você pode implementar essa abordagem usando o mesmo processo da CLI do Azure usado na etapa anterior.

1. Obtenha o appId do serviço de aplicativo front-end. Você pode obter esse valor na página Autenticação do Serviço de Aplicativo de front-end.

2. Execute a seguinte CLI do Azure, substituindo <back-end-app-name> e <front-end-app-id>.

authSettings=$(az webapp auth show -g myAuthResourceGroup -n <back-end-app-name>)
authSettings=$(echo "$authSettings" | jq '.properties' | jq '.identityProviders.azureActiveDirectory.validation.defaultAuthorizationPolicy.allowedApplications += ["<front-end-app-id>"]')
az webapp auth set --resource-group myAuthResourceGroup --name <back-end-app-name> --body "$authSettings"

O front-end chama o back-end autenticado

O aplicativo de front-end precisa passar a autenticação do usuário com o escopo correto user_impersonation para o back-end. As etapas a seguir revisam o código fornecido no exemplo para essa funcionalidade.

Exiba o código-fonte do aplicativo front-end:

1. Use o cabeçalho injetado x-ms-token-aad-access-token do Serviço de Aplicativo do front-end para obter programaticamente o accessToken do usuário.

   // ./src/server.js
   const accessToken = req.headers['x-ms-token-aad-access-token'];
   

2. Use accessToken no cabeçalho Authentication como o valor bearerToken.

   // ./src/remoteProfile.js
   // Get profile from backend
   const response = await fetch(remoteUrl, {
       cache: "no-store", // no caching -- for demo purposes only
       method: 'GET',
       headers: {
           'Authorization': `Bearer ${accessToken}`
       }
   });
   if (response.ok) {
       const { profile } = await response.json();
       console.log(`profile: ${profile}`);
   } else {
       // error handling
   }
   

   Este tutorial retorna um perfil falso para simplificar o cenário. O próximo tutorial desta série demonstra como trocar o back-end bearerToken por um novo token com o escopo de um serviço downstream do Azure, como o Microsoft Graph.

O back-end retorna o perfil para o front-end

Se a solicitação do front-end não estiver autorizada, o Serviço de Aplicativo de back-end rejeitará a solicitação com um código de erro HTTP 401 antes que a solicitação atinja o código do aplicativo. Quando o código de back-end for atingido, porque ele inclui um token autorizado, extraia o bearerToken para obter o accessToken.

Visualize o código-fonte do aplicativo de back-end.

// ./src/server.js
const bearerToken = req.headers['Authorization'] || req.headers['authorization'];

if (bearerToken) {
    const accessToken = bearerToken.split(' ')[1];
    console.log(`backend server.js accessToken: ${!!accessToken ? 'found' : 'not found'}`);

    // TODO: get profile from Graph API
    // provided in next article in this series
    // return await getProfileFromMicrosoftGraph(accessToken)

    // return fake profile for this tutorial
    return {
        "displayName": "John Doe",
        "withAuthentication": !!accessToken ? true : false
    }
}

Navegue pelos aplicativos

1. Use o site front-end em um navegador. A URL é https://<front-end-app-name>.azurewebsites.net/.

2. O navegador solicita sua autenticação para o aplicativo Web. Conclua a autenticação.

   

3. Após a conclusão da autenticação, o aplicativo front-end retorna a home page do aplicativo.

   

4. Selecione Obter o perfil do usuário. Esta ação envia sua autenticação no bearer token para o backend.

5. O back-end responde com o nome do perfil falso embutido em código falso: John Doe.

   

   O withAuthentication valor de true indica que a autenticação está configurada agora.

Limpar os recursos

Nas etapas anteriores, você criou os recursos do Azure em um grupo de recursos.

1. Exclua o grupo de recursos executando o comando a seguir no Cloud Shell. Esse comando pode demorar um pouco para ser executado.

   az group delete --name myAuthResourceGroup
   

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

3. Exclua os registros de aplicativo de front-end e de back-end.

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

Perguntas frequentes

Como testar essa autenticação no computador de desenvolvimento local?

eA autenticação nesse procedimento é fornecida na camada de plataforma de hospedagem pelo Serviço de Aplicativo do Azure. Não há nenhum emulador equivalente. Você deve implantar o aplicativo front-end e back-end e configurar a autenticação para cada um usar a autenticação.

O aplicativo não está exibindo perfis falsos, como posso depurar isso?

Os aplicativos de front-end e de back-end têm rotas /debug para ajudar a depurar a autenticação quando o perfil falso não é retornado. A rota de depuração front-end fornece as partes críticas para validar:

• Variáveis de ambiente:

  • O BACKEND_URL é configurado corretamente como https://<back-end-app-name>.azurewebsites.net. Não inclua essa barra à direita nem a rota.

• Cabeçalhos HTTP:

  • Os cabeçalhos x-ms-token-* são injetados.

• O nome do perfil do Microsoft Graph do usuário conectado é exibido.

• O escopo do aplicativo de front-end do token tem user_impersonation. Se o escopo não incluir esse valor, pode ser um problema de tempo. Verifique os parâmetros do aplicativo front-end nos recursos do loginAzure. Aguarde alguns minutos para a replicação da autenticação.

O código-fonte do aplicativo foi implantado corretamente em cada aplicativo Web?

1. No portal do Azure para o aplicativo web, selecione Ferramentas de Desenvolvimento>Ferramentas Avançadas, em seguida, selecione Ir. Essa ação abre uma nova guia ou janela do navegador.

2. Na nova guia do navegador, selecione Navegar no Diretório>Site wwwroot.

3. Verifique se os seguintes itens estão no diretório:

   • package.json
   • node_modules.tar.gz
   • /src/index.js

4. Verifique se a propriedade package.jsonname é igual ao nome da Web ou frontendbackend.

5. Se você alterou o código-fonte e precisa reimplantar, use o comando az webapp up do diretório que tem o arquivo package.json para esse aplicativo.

O aplicativo foi iniciado corretamente?

Ambos os aplicativos Web devem retornar algo quando a home page é solicitada. Se você não consegue acessar /debug em um aplicativo Web, o aplicativo não foi iniciado corretamente. Examine os logs de erros desse aplicativo Web.

1. No portal do Azure para o aplicativo web, selecione Ferramentas de Desenvolvimento>Ferramentas Avançadas, em seguida, selecione Ir. Essa ação abre uma nova guia ou janela do navegador.
2. Na nova guia do navegador, selecione Procurar Diretório>Logs de Implantação.
3. Examine cada log para encontrar os problemas relatados.

O aplicativo front-end é capaz de conversar com o aplicativo back-end?

Como o aplicativo front-end chama o aplicativo de back-end do código-fonte do servidor, esse comportamento não é algo que você pode ver no tráfego de rede do navegador. Use a lista a seguir para determinar o êxito da solicitação de perfil de back-end:

• O aplicativo Web de back-end retorna qualquer erro para o aplicativo front-end se ele foi atingido. Se não tiver sido atingido, o aplicativo front-end relatará o código de status e a mensagem.

  • 401: o usuário não passou a autenticação corretamente. Essa mensagem pode indicar que o escopo não está definido corretamente.
  • 404: a URL do servidor não corresponde a uma rota que o servidor tem

• Use os logs de streaming do aplicativo de back-end para assistir à medida que você faz a solicitação de front-end para o perfil do usuário. Há informações de depuração no código-fonte com console.log, que ajudam a determinar onde a falha aconteceu.

O que acontece quando o token front-end expira?

O token de acesso expira após algum tempo. Para obter informações sobre como atualizar seus tokens de acesso sem exigir que os usuários autentiquem novamente no aplicativo, confira Atualizar tokens do provedor de identidade.

Se eu tiver um aplicativo baseado em navegador no aplicativo front-end, ele poderá se comunicar diretamente com o back-end?

Essa abordagem exige que o código do servidor passe o token de acesso para o código JavaScript em execução no navegador do cliente. Como não há como proteger o token de acesso no navegador, não recomendamos essa abordagem. Atualmente, recomendamos o padrão Backend-for-Frontend.

Se aplicado ao exemplo neste tutorial, o código JavaScript do navegador no aplicativo front-end realizaria chamadas à API em uma sessão autenticada, utilizando o código de servidor como intermediário. O código do servidor na aplicação front-end faria as chamadas à API para a aplicação de back-end, usando o valor do cabeçalho x-ms-token-aad-access-token como token de autenticação. Todas as chamadas do código do navegador para o código do servidor são protegidas pela sessão autenticada.

Próxima etapa

Avance para o próximo tutorial para saber como usar a identidade desse usuário a fim de acessar um serviço do Azure.