Tutorial: Autenticar e autorizar utilizadores ponto a ponto no Serviço de Aplicações do Azure

2025-04-09

O Serviço de Aplicações do Azure oferece um serviço de alojamento na Web altamente dimensionável e com correção automática. Além disso, o Serviço de Aplicações tem suporte incorporado para autenticação e autorização de utilizadores. Este tutorial mostra como proteger as suas aplicações com a autenticação e autorização do Serviço de Aplicações. Ele usa um frontend de Express.js com visualizações como exemplo. A autenticação e autorização do App Service suportam todos os ambientes de execução de linguagem, e você pode seguir o tutorial para aprender a aplicá-la na sua linguagem preferida.

O Serviço de Aplicativo do Azure fornece um serviço de hospedagem na Web altamente escalável e auto-corrigido usando o sistema operacional Linux. Além disso, o Serviço de Aplicações tem suporte incorporado para autenticação e autorização de utilizadores. Este tutorial mostra como proteger as suas aplicações com a autenticação e autorização do Serviço de Aplicações. Ele usa Express.js com visualizações. A autenticação e autorização do App Service suportam todos os ambientes de execução de linguagem, e você pode seguir o tutorial para aprender a aplicá-la na sua linguagem preferida.

No tutorial, você aprende:

Ativar a autenticação e autorização incorporadas
Proteger aplicações contra pedidos não autenticados
Usar o Microsoft Entra ID como o provedor de identidade
Aceder a uma aplicação remota em nome do utilizador autenticado
Proteger chamadas entre serviços com autenticação de tokens
Utilizar tokens de acesso a partir do código do servidor

Gorjeta

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

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

O diagrama conceitual mostra o fluxo de autenticação do utilizador da Web para a aplicação de front-end e depois para a aplicação de back-end.

Obter o perfil de utilizador

O aplicativo frontend está configurado para usar com segurança a API de back-end. O aplicativo frontend fornece um login 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 para concluir o cenário.

Antes de o código-fonte ser executado no frontend, o Serviço de Aplicativo injeta o autenticado accessToken a partir do cabeçalho do Serviço de Aplicativo x-ms-token-aad-access-token . Em seguida, o código-fonte do frontend acessa e envia o accessToken para o servidor back-end como o bearerToken para acessar com segurança a API de back-end. O servidor de back-end valida o bearerToken antes que ele seja passado para o código-fonte do back-end. Uma vez que seu código-fonte de back-end recebe o bearerToken, ele pode ser usado.

No próximo artigo 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.

Pré-requisitos

Se 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, consulte Introdução ao Azure Cloud Shell.
Se preferir executar comandos de referência da CLI localmente, instale a CLI do Azure. Se estiver a utilizar o Windows ou macOS, considere executar a CLI do Azure num contentor Docker. Para obter mais informações, consulte Como executar a CLI do Azure em um contêiner do Docker.
- Se estiver a utilizar uma instalação local, inicie sessão no CLI do Azure ao utilizar o comando az login. Para concluir o processo de autenticação, siga os passos apresentados no seu terminal. Para outras opções de entrada, consulte Autenticar no Azure usando a CLI do Azure.
- Quando solicitado, instale a extensão da CLI do Azure na primeira utilização. Para obter mais informações sobre extensões, consulte Usar e gerenciar extensões com a CLI do Azure.
- Execute o comando az version para localizar a versão e as bibliotecas dependentes instaladas. Para atualizar para a versão mais recente, execute o comando az upgrade.

1. Clone o aplicativo de amostra

No Azure Cloud Shell, execute o seguinte comando para clonar o repositório de exemplo.
```
git clone https://github.com/Azure-Samples/js-e2e-web-app-easy-auth-app-to-app
```

2. Criar e implantar aplicativos

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

Mude para o diretório do aplicativo web frontend.
```
cd js-e2e-web-app-easy-auth-app-to-app/frontend
```
Crie e implante o aplicativo Web frontend com az webapp up. Como o nome do aplicativo Web precisa ser globalmente exclusivo, substitua <front-end-app-name> por um nome exclusivo.
```
az webapp up --resource-group myAuthResourceGroup --name <front-end-app-name> --plan myPlan --sku FREE --os-type Windows --location "West Europe" --runtime "NODE:16LTS"
```
Entre no diretório da aplicação web de back-end.
```
cd ../backend
```
Implante o aplicativo Web de back-end no mesmo grupo de recursos e plano de aplicativo. Como o nome do aplicativo Web precisa ser globalmente exclusivo, substitua <back-end-app-name> por um conjunto exclusivo de iniciais ou números.
```
az webapp up --resource-group myAuthResourceGroup --name <back-end-app-name> --plan myPlan --os-type Windows --location "West Europe" --runtime "NODE:16LTS"
```

Mude para o diretório do aplicativo web frontend.
```
cd frontend
```
Crie e implante o aplicativo Web frontend com az webapp up. Como o nome do aplicativo Web precisa ser globalmente exclusivo, substitua <front-end-app-name> por um conjunto exclusivo de iniciais ou números.
```
az webapp up --resource-group myAuthResourceGroup --name <front-end-app-name> --plan myPlan --sku FREE --location "West Europe" --os-type Linux --runtime "NODE:16-lts"
```
Entre no diretório da aplicação web de back-end.
```
cd ../backend
```
Implante o aplicativo Web de back-end no mesmo grupo de recursos e plano de aplicativo. Como o nome do aplicativo Web precisa ser globalmente exclusivo, substitua <back-end-app-name> por um conjunto exclusivo de iniciais ou números.
```
az webapp up --resource-group myAuthResourceGroup --name <back-end-app-name> --plan myPlan --sku FREE --location "West Europe" --runtime "NODE:16-lts"
```

3. Configurar as definições da aplicação

O aplicativo frontend precisa conhecer a URL do aplicativo backend para solicitações de API. Use o seguinte comando da CLI do Azure para definir a configuração do aplicativo. O URL deve estar no formato de 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"

4. O frontend chama o backend

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

Abra o aplicativo Web frontend em um navegador, https://<front-end-app-name>.azurewebsites.net.
Selecione a ligação Get user's profile.
Veja o perfil falso retornado do aplicativo Web de back-end.

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

5. Configurar a autenticação

Nesta etapa, você habilita a autenticação e a autorização para os dois aplicativos Web. Este tutorial usa o Microsoft Entra ID como o provedor de identidade.

Você também configura o aplicativo frontend para:

Conceder ao aplicativo front-end acesso ao aplicativo back-end
Configurar o Serviço de Aplicações para devolver um token utilizável
Use o token em seu código.

Para obter mais informações, consulte Configurar a autenticação do Microsoft Entra para a sua aplicação nos Serviços de Aplicações.

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

No menu do portal do Azure, selecione Grupos de recursos ou procure e selecione Grupos de recursos em qualquer página.
Em Grupos de recursos, localize e selecione o seu grupo de recursos. Em Visão geral, selecione seu aplicativo de back-end.
No menu esquerdo do seu aplicativo de back-end, selecione Autenticação e, em seguida, selecione Adicionar provedor de identidade.
Na página Adicionar um provedor de identidade, selecione Microsoft como o provedor de identidade para entrar nas identidades Microsoft e Microsoft Entra.
Aceite as configurações padrão e selecione Adicionar.
A página Autenticação é aberta. Copie o ID do Cliente da aplicação Microsoft Entra para um editor de texto. Vai precisar deste valor mais à frente.

Se parares aqui, terás uma aplicação independente que já está protegida pela autenticação e autorização do Serviço de Aplicações. As seções restantes mostram como proteger uma solução de vários aplicativos "fluindo" o usuário autenticado do frontend para o backend.

Habilitar autenticação e autorização para aplicativo frontend

No menu do portal do Azure, selecione Grupos de recursos ou procure e selecione Grupos de recursos em qualquer página.
Em Grupos de recursos, localize e selecione o seu grupo de recursos. Em Visão geral, selecione a página de gerenciamento do seu aplicativo frontend.
No menu esquerdo do seu aplicativo frontend, selecione Autenticação e, em seguida, selecione Adicionar provedor de identidade.
Na página Adicionar um provedor de identidade, selecione Microsoft como o provedor de identidade para entrar nas identidades Microsoft e Microsoft Entra.
Aceite as configurações padrão e selecione Adicionar.
A página Autenticação é aberta. Copie o ID do Cliente da aplicação Microsoft Entra para um editor de texto. Vai precisar deste valor mais à frente.

Conceder acesso ao aplicativo frontend ao back-end

Agora que ativou a autenticação e autorização em ambas as suas aplicações, cada uma destas está associada a uma aplicação do AD. Para concluir a autenticação, você precisa fazer três coisas:

Conceder ao aplicativo front-end acesso ao aplicativo back-end
Configurar o Serviço de Aplicações para devolver um token utilizável
Use o token em seu código.

Gorjeta

Se se deparar com erros e reconfigurar as definições de autenticação/autorização da sua aplicação, os tokens no arquivo de tokens poderão não ser regenerados a partir das definições novas. Para garantir que os tokens são regenerados, tem de terminar sessão e reiniciá-la na aplicação. Uma forma fácil de fazê-lo é utilizar o browser no modo privado e fechá-lo e reabri-lo no modo privado depois de alterar as definições nas suas aplicações.

Nesta etapa, você concede ao aplicativo front-end acesso ao aplicativo back-end em nome do usuário. (Tecnicamente, você dá o frontend Aplicativo AD as permissões para acessar o aplicativo AD do back-end em nome do usuário.)

Na página Autenticação do aplicativo frontend, selecione o nome do aplicativo frontend em Provedor de identidade. Este registro de aplicativo foi gerado automaticamente para você. Selecione Permissões de API no menu à esquerda.
Selecione Adicionar uma permissão e, em seguida, selecione
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 Aplicações para devolver um token de acesso utilizável

O aplicativo frontend agora tem as permissões necessárias para acessar o aplicativo back-end como o usuário conectado. Nesta etapa, você configura 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 do back-end, que você copiou de Habilitar autenticação e autorização para aplicativo de back-end.

No Cloud Shell, execute os seguintes comandos no aplicativo frontend para adicionar o scope parâmetro à configuração de autenticação identityProviders.azureActiveDirectory.login.loginParameters. Substitua front-end-app-name<>

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 efetivamente adicionam uma loginParameters propriedade com escopos personalizados adicionais. Aqui está uma explicação dos escopos solicitados:

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

Gorjeta

Para exibir o api://<back-end-client-id>/user_impersonation escopo no portal do Azure, vá para a página Autenticação do aplicativo de back-end, clique no link em Provedor de identidade e clique em Expor uma API no menu à esquerda.
Para configurar os escopos necessários usando uma interface da Web, consulte as etapas da Microsoft em Atualizar tokens de autenticação.
Alguns escopos exigem o consentimento do administrador ou do usuário. Esse requisito faz com que a página de solicitação de consentimento seja exibida quando um usuário entra no aplicativo frontend no navegador. Para evitar essa página de consentimento, adicione o registro do aplicativo do frontend como um aplicativo cliente autorizado na página Expor uma API clicando em Adicionar um aplicativo cliente e fornecendo a ID do cliente do registro do aplicativo do frontend.

As suas aplicações estão agora configuradas. O frontend agora está pronto para acessar o backend com um token de acesso adequado.

Para obter informações sobre como configurar o token de acesso para outros provedores, consulte Atualizar tokens de provedor de identidade.

6. Configure o serviço de aplicações de back-end para aceitar um token somente do serviço de aplicações 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 de front-end. Não fazer isso pode resultar em um "403: Erro proibido" quando você passa o token do frontend para o backend.

Você pode definir isso por meio do mesmo processo da CLI do Azure usado na etapa anterior.

Obtenha o appId do Serviço de Aplicativo frontal (pode obtê-lo na seção "Autenticação" do Serviço de Aplicativo frontal).
Execute a seguinte CLI do Azure, substituindo o <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"

7. Frontend chama o backend autenticado

A aplicação frontend precisa passar a autenticação do utilizador com o escopo correto user_impersonation para o back-end. As etapas a seguir revisam o código fornecido no exemplo para essa funcionalidade.

Veja o código-fonte do aplicativo frontend:

Utilize o cabeçalho injetado x-ms-token-aad-access-token do serviço de aplicação do frontend para obter programaticamente o token de acesso do utilizador.
```
// ./src/server.js
const accessToken = req.headers['x-ms-token-aad-access-token'];
```

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

// ./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.

7. O backend devolve o perfil para o frontend

Se a solicitação do frontend não for autorizada, o serviço de aplicativo back-end rejeitará a solicitação com um código de erro HTTP 401 antes que a solicitação chegue ao código do aplicativo. Quando o código de back-end for atingido (porque inclui um token autorizado), extraia o bearerToken para obter o accessToken.

Veja 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
    }
}

8. Navegue até as aplicações

Use o site frontend em um navegador. O URL está no formato de https://<front-end-app-name>.azurewebsites.net/.
O navegador solicita sua autenticação para o aplicativo Web. Conclua a autenticação.
Após a conclusão da autenticação, o aplicativo frontend retorna a página inicial do aplicativo.
Selecione Get user's profile. Isso passa sua autenticação no token do portador para o back-end.
O backend responde com o nome de perfil falso, codificado de forma estática: John Doe.

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

9. Limpar os recursos

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

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
```
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.

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 <client-id>

Perguntas mais frequentes

Como faço para testar essa autenticação na minha máquina de desenvolvimento local?

A autenticação neste procedimento é fornecida na camada da plataforma de hospedagem pelo Serviço de Aplicativo do Azure. Não há emulador equivalente. Você deve implantar as aplicações frontend e backend e configurar a autenticação de cada uma para poder usar a autenticação.

A aplicação não está exibindo um perfil falso, como posso depurá-lo?

As aplicações frontend e backend têm /debug rotas para ajudar a depurar a autenticação quando esta aplicação não retorna o perfil falso. A rota de depuração do frontend fornece as informações críticas para validar:

Variáveis de ambiente:
- O BACKEND_URL está configurado corretamente como https://<back-end-app-name>.azurewebsites.net. Não inclua essa barra final ou a rota.
Cabeçalhos HTTP:
- Os x-ms-token-* cabeçalhos são injetados.
O nome do perfil do Microsoft Graph para usuário conectado é exibido.
O escopo da aplicação Frontend para o token tem user_impersonation. Se o seu escopo não incluir isso, pode ser uma questão de tempo. Verifique os login parâmetros do seu aplicativo frontend nos recursos do Azure. Aguarde alguns minutos para a replicação da autenticação.

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

No portal do Azure para a aplicação Web, selecione Ferramentas de Desenvolvimento -> Ferramentas Avançadas e, em seguida, selecione Ir ->. Isso abre uma nova guia ou janela do navegador.
Na nova guia do navegador, selecione Procurar diretório -> Site wwwroot.
Verifique se o seguinte está no diretório:
- package.json
- node_modules.tar.gz
- /src/index.js
Verifique se a propriedade do name no package.json é igual ao nome da web, frontend ou backend.
Se alteraste o código-fonte e precisas desdobrar novamente, usa az webapp up a partir do diretório que tem o ficheiro package.json para essa aplicação.

A aplicação iniciou corretamente?

Ambas as aplicações web devem retornar algo quando a página inicial for solicitada. Se você não conseguir acessar /debug em um aplicativo Web, o aplicativo não foi iniciado corretamente. Revise os logs de erro desse aplicativo Web.

No portal do Azure para a aplicação Web, selecione Ferramentas de Desenvolvimento -> Ferramentas Avançadas e, em seguida, selecione Ir ->. Isso abre uma nova guia ou janela do navegador.
Na nova guia do navegador, selecione Procurar diretório -> logs de implantação.
Revise cada log para encontrar quaisquer problemas relatados.

O aplicativo frontend é capaz de falar com o aplicativo backend?

Como a aplicação frontend chama a aplicação back-end a partir do código-fonte do servidor, isto não é algo que consiga ver no tráfego de rede do navegador. Use a lista a seguir para determinar o sucesso da solicitação de perfil de back-end:

O aplicativo Web back-end retorna quaisquer erros para o aplicativo front-end se ele tiver sido atingido. Se não tiver sido alcançado, o aplicativo frontend informará o código de status e a mensagem.
- 401: O usuário não passou a autenticação corretamente. Isso pode indicar que o escopo não está definido corretamente.
- 404: O URL para o servidor não corresponde a uma rota que o servidor tem
Use os logs de streaming do aplicativo de back-end para assistir enquanto você faz a solicitação de frontend para o perfil do usuário. Há informações de depuração no código-fonte com console.log as quais ajudam a determinar onde a falha aconteceu.

O que acontece quando o token de frontend expira?

O token de acesso expira ao fim de algum tempo. Para obter informações sobre como atualizar seus tokens de acesso sem exigir que os usuários se autentiquem novamente com seu aplicativo, consulte Atualizar tokens de provedor de identidade.

Se eu tiver um aplicativo baseado em navegador no aplicativo front-end, ele pode falar diretamente com o back-end?

Essa abordagem requer 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 é uma abordagem recomendada. Atualmente, o padrão Backend-para-Frontend é recomendado. Se aplicado ao exemplo neste tutorial, o código do navegador na app front-end faria chamadas de API numa sessão autenticada para o seu código de servidor, atuando como intermediário, e o código do servidor na app front-end faria, por sua vez, chamadas de API para a app back-end utilizando o valor do cabeçalho x-ms-token-aad-access-token como token portador. Todas as chamadas do código do seu navegador para o código do servidor já estariam protegidas pela sessão autenticada.

Próximos passos

O que aprendeu:

Ativar a autenticação e autorização incorporadas
Proteger aplicações contra pedidos não autenticados
Usar o Microsoft Entra ID como o provedor de identidade
Aceder a uma aplicação remota em nome do utilizador autenticado
Proteger chamadas entre serviços com autenticação de tokens
Utilizar tokens de acesso a partir do código do servidor

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

Criar um aplicativo seguro de n camadas no Serviço de Aplicativo do Azure

Partilhar via

Tutorial: Autenticar e autorizar utilizadores ponto a ponto no Serviço de Aplicações do Azure

Obter o perfil de utilizador

Pré-requisitos

1. Clone o aplicativo de amostra

2. Criar e implantar aplicativos

3. Configurar as definições da aplicação

4. O frontend chama o backend

5. Configurar a autenticação

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

Habilitar autenticação e autorização para aplicativo frontend

Conceder acesso ao aplicativo frontend ao back-end

Configurar o Serviço de Aplicações para devolver um token de acesso utilizável

6. Configure o serviço de aplicações de back-end para aceitar um token somente do serviço de aplicações de front-end

7. Frontend chama o backend autenticado

7. O backend devolve o perfil para o frontend

8. Navegue até as aplicações

9. Limpar os recursos

Perguntas mais frequentes

Como faço para testar essa autenticação na minha máquina de desenvolvimento local?

A aplicação não está exibindo um perfil falso, como posso depurá-lo?

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

A aplicação iniciou corretamente?

O aplicativo frontend é capaz de falar com o aplicativo backend?

O que acontece quando o token de frontend expira?

Se eu tiver um aplicativo baseado em navegador no aplicativo front-end, ele pode falar diretamente com o back-end?

Próximos passos

Comentários

Recursos adicionais