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

  • Artigo

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 Serviço de Aplicações suportam todos os runtimes de linguagens e pode seguir o tutorial para aprender a aplicá-las 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 um Express.js com vistas. A autenticação e autorização do Serviço de Aplicações suportam todos os runtimes de linguagens e pode seguir o tutorial para aprender a aplicá-las 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 com sessão iniciada
  • Proteger chamadas de serviço para serviço com a autenticação de tokens
  • Utilizar tokens de acesso a partir do código de servidor
  • Utilizar tokens de acesso a partir do código de cliente (browser)

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 usuário da Web para o aplicativo de front-end para o aplicativo 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 subscrição do Azure, crie uma conta gratuita do Azure antes de começar.

  • Use o ambiente Bash no Azure Cloud Shell. Para obter mais informações, consulte Guia de início rápido para Bash no 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 Entrar com a CLI do Azure.

    • Quando solicitado, instale a extensão da CLI do Azure na primeira utilização. Para obter mais informações sobre as extensões, veja Utilizar extensões com o 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

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

  1. Mude para o diretório do aplicativo Web frontend.

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

  2. 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"

  3. Mude para o diretório do aplicativo Web de back-end.

    cd ../backend

  4. 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"

  1. Mude para o diretório do aplicativo Web frontend.

    cd frontend

  2. 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"

  3. Mude para o diretório do aplicativo Web de back-end.

    cd ../backend

  4. 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. Definir a definição 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. 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.

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

    Captura de tela do navegador da Web mostrando o aplicativo frontend depois de concluir a autenticação com êxito.

  2. Selecione a ligação Get user's profile.

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

    Screenshot do navegador com perfil falso devolvido do servidor.

    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 seu aplicativo dos Serviços de Aplicativo.

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

  1. No menu do portal do Azure, selecione Grupos de recursos ou procure e selecione Grupos de recursos em qualquer página.

  2. Em Grupos de recursos, localize e selecione o seu grupo de recursos. Em Visão geral, selecione seu aplicativo de back-end.

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

  4. Na página Adicionar um provedor de identidade, selecione Microsoft como o provedor de identidade para entrar nas identidades Microsoft e Microsoft Entra.

  5. Aceite as configurações padrão e selecione Adicionar.

    Captura de tela do menu esquerdo do aplicativo de back-end mostrando Autenticação/Autorização selecionada e configurações selecionadas no menu direito.

  6. A página Autenticação é aberta. Copie a ID do cliente do aplicativo Microsoft Entra para um bloco de notas. Vai precisar deste valor mais à frente.

    Captura de ecrã da janela Definições do Microsoft Entra a mostrar a Aplicação Microsoft Entra e a janela Aplicações Microsoft Entra a mostrar o ID do Cliente a copiar.

Se você parar por aqui, terá um aplicativo autônomo que já está protegido pela autenticação e autorização do Serviço de Aplicativo. 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

  1. No menu do portal do Azure, selecione Grupos de recursos ou procure e selecione Grupos de recursos em qualquer página.

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

  3. No menu esquerdo do seu aplicativo frontend, selecione Autenticação e, em seguida, selecione Adicionar provedor de identidade.

  4. Na página Adicionar um provedor de identidade, selecione Microsoft como o provedor de identidade para entrar nas identidades Microsoft e Microsoft Entra.

  5. Aceite as configurações padrão e selecione Adicionar.

  6. A página Autenticação é aberta. Copie a ID do cliente do aplicativo Microsoft Entra para um bloco de notas. 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.)

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

  2. Selecione Adicionar uma permissão e, em seguida, selecione My APIs><back-end-app-name.>

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

    Captura de tela da página Solicitar permissões da API mostrando Permissões delegadas, user_impersonation e o botão Adicionar permissão selecionado.

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> e <back-end-client-id>.<

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 token 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 Aplicativo de back-end para aceitar um token somente do Serviço de Aplicativo 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.

  1. Obtenha o appId do Serviço de Aplicativo frontend (você pode obtê-lo na folha "Autenticação" do Serviço de Aplicativo frontend).

  2. 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"

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

7. Frontend chama o backend autenticado

O aplicativo frontend 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.

Veja o código-fonte do aplicativo frontend:

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

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

  2. 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. Backend retorna perfil para 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

  1. Use o site frontend em um navegador. O URL está no formato de https://<front-end-app-name>.azurewebsites.net/.

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

    Captura de tela do pop-up de autenticação do navegador solicitando permissões.

  3. Após a conclusão da autenticação, o aplicativo frontend retorna a página inicial do aplicativo.

    Captura de tela do navegador da Web mostrando o aplicativo frontend depois de concluir a autenticação com êxito.

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

  5. O back-end responde com o nome de perfil falso codificado: John Doe.

    Screenshot do navegador web mostrando o aplicativo frontend depois de obter com sucesso perfil falso do aplicativo backend.

    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.

  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

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 o aplicativo frontend e back-end e a autenticação de configuração para cada um para usar a autenticação.

O aplicativo não está exibindo um perfil falso , como faço para depurá-lo?

Os aplicativos frontend e backend têm /debug rotas para ajudar a depurar a autenticação quando esse aplicativo não retorna o perfil falso . A rota de depuração de frontend fornece as partes 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 à direita 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 do aplicativo 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?

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

  2. Na nova guia do navegador, selecione Procurar diretório -> Site wwwroot.

  3. Verifique se o seguinte está no diretório:

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

  4. Verifique se a propriedade do name package.json é igual ao nome da Web, ou frontendbackend.

  5. Se você alterou o código-fonte e precisa reimplantar, use az webapp a partir 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 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.

  1. 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.
  2. Na nova guia do navegador, selecione Procurar diretório -> logs de implantação.
  3. Revise cada log para encontrar quaisquer problemas relatados.

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

Como o aplicativo frontend chama o aplicativo back-end do código-fonte do servidor, isso não é algo que você pode 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.

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 com sessão iniciada
  • Proteger chamadas de serviço para serviço com a autenticação de tokens
  • Utilizar tokens de acesso a partir do código de servidor
  • Utilizar tokens de acesso a partir do código de cliente (browser)

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