Nota
O acesso a esta página requer autorização. Pode tentar iniciar sessão ou alterar os diretórios.
O acesso a esta página requer autorização. Pode tentar alterar os diretórios.
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.
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.
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 obearerToken
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 comohttps://<back-end-app-name>.azurewebsites.net
. Não inclua essa barra final ou a rota.
- O
- Cabeçalhos HTTP:
- Os
x-ms-token-*
cabeçalhos são injetados.
- Os
- 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 oslogin
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
oubackend
.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.