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

Artigo
09/27/2022
19 minutos para ler

Serviço de Aplicações do Azure fornece um serviço de hospedagem web altamente escalável e auto-remendado. 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. Usa uma aplicação ASP.NET Core com uma Angular.js front end 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.

Serviço de Aplicações do Azure fornece um serviço de hospedagem web altamente escalável e auto-remendado utilizando o sistema operativo 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. Usa uma aplicação ASP.NET Core com uma Angular.js front end 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.

Autenticação e autorização simples

Também lhe mostra como proteger uma aplicação multicamadas ao aceder a uma API de back-end protegida em nome do utilizador autenticado, a partir de código do servidor e de código do browser.

Autenticação e autorização avançadas

Estes são apenas alguns dos cenários possíveis de autenticação e autorização no Serviço de Aplicações.

Eis uma lista mais completa do que vai aprender no tutorial:

Ativar a autenticação e autorização incorporadas
Proteger aplicações contra pedidos não autenticados
Utilizar o Azure Active Directory como o fornecedor 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)

Pode seguir os passos neste tutorial em macOS, Linux e Windows.

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

Pré-requisitos

Para concluir este tutorial:

Você pode usar o Azure Cloud Shell ou um Azure CLI local.

Azure Cloud Shell com o ambiente bash. Ou lançar o Cloud Shell aqui.
Azure CLI local, veja como instalar o Azure CLI. Se estiver a funcionar no Windows ou no macOS, considere executar o Azure CLI num recipiente Docker. Para mais informações, consulte Como executar o CLI Azure num contentor Docker.
- Inicie sessão no Azure CLI utilizando o comando de login az . Para concluir o processo de autenticação, siga os passos apresentados no seu terminal. Para outras opções de inscrição, consulte iniciar súmis com o CLI Azure.
- Quando utilizar pela primeira vez o Azure CLI, instale a extensão Azure CLI. 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.

Criar uma aplicação .NET Core local

Neste passo, vai configurar o projeto .NET Core local. Vai utilizar o mesmo projeto para implementar uma aplicação API de back-end e uma aplicação Web de front-end.

Clonar e executar a aplicação de exemplo

Execute os seguintes comandos para clonar o repositório de exemplo e executá-lo.

git clone https://github.com/Azure-Samples/dotnet-core-api
cd dotnet-core-api
dotnet run

Navegue para http://localhost:5000 e experimente adicionar, editar e remover itens de afazeres.
Para parar ASP.NET Core, pressione Ctrl+C no terminal.
Certifique-se de que o ramo predefinido está main.
```
git branch -m main
```
Dica

A mudança de nome não é exigida por Serviço de Aplicações. No entanto, uma vez que muitos repositórios estão a mudar o seu ramo padrão para main, este tutorial também mostra como implantar um repositório de main. Para obter mais informações, consulte o ramo de implantação Change.

Implementar aplicações no Azure

Neste passo, vai implementar o projeto em duas aplicações do Serviço de Aplicações. Uma é a aplicação de front-end e a outra é a de back-end.

Configurar um utilizador de implementação

A FTP e o Git local podem implementar para uma aplicação web Azure utilizando um utilizador de implementação. Uma vez configurar o utilizador de implementação, pode usá-lo para todas as suas implementações Azure. O nome de utilizador e palavra-passe de implementação ao nível da sua conta são diferentes das suas credenciais de subscrição Azure.

Para configurar o utilizador de implementação, executar o comando de conjunto de utilizadores de implementação az webapp em Azure Cloud Shell. Substitua <o nome> de utilizador e <a palavra-passe> por um nome de utilizador e palavra-passe do utilizador de implementação.

O nome de utilizador deve ser único dentro do Azure, e para os pushes git locais, não deve conter o símbolo '@'.
A palavra-passe deve ter pelo menos oito caracteres, com dois dos três elementos seguintes: letras, números e símbolos.

az webapp deployment user set --user-name <username> --password <password>

A saída JSON mostra a palavra-passe como null. Se obtiver o erro 'Conflict'. Details: 409, altere o nome de utilizador. Se obtiver o 'Bad Request'. Details: 400 erro, utilize uma palavra-passe mais forte.

Grave o seu nome de utilizador e palavra-passe para usar para implementar as suas aplicações web.

Criar recursos do Azure

No Cloud Shell, executar os seguintes comandos para criar duas aplicações web do Windows. Substitua <o nome> de aplicações front-end e <o nome de aplicações traseiras> por dois nomes de aplicações globalmente únicos (caracteres válidos são a-z, 0-9e -). Para obter mais informações sobre cada comando, consulte a Host a RESTful API com CORS em Serviço de Aplicações do Azure.

az group create --name myAuthResourceGroup --location "West Europe"
az appservice plan create --name myAuthAppServicePlan --resource-group myAuthResourceGroup --sku FREE
az webapp create --resource-group myAuthResourceGroup --plan myAuthAppServicePlan --name <front-end-app-name> --deployment-local-git --query deploymentLocalGitUrl
az webapp create --resource-group myAuthResourceGroup --plan myAuthAppServicePlan --name <back-end-app-name> --deployment-local-git --query deploymentLocalGitUrl

No Cloud Shell, execute os seguintes comandos para criar duas aplicações Web. Substitua <o nome> de aplicações front-end e <o nome de aplicações traseiras> por dois nomes de aplicações globalmente únicos (caracteres válidos são a-z, 0-9e -). Para obter mais informações sobre cada comando, consulte Criar uma aplicação .NET Core em Serviço de Aplicações do Azure.

az group create --name myAuthResourceGroup --location "West Europe"
az appservice plan create --name myAuthAppServicePlan --resource-group myAuthResourceGroup --sku FREE --is-linux
az webapp create --resource-group myAuthResourceGroup --plan myAuthAppServicePlan --name <front-end-app-name> --runtime "DOTNETCORE|3.1" --deployment-local-git --query deploymentLocalGitUrl
az webapp create --resource-group myAuthResourceGroup --plan myAuthAppServicePlan --name <back-end-app-name> --runtime "DOTNETCORE|3.1" --deployment-local-git --query deploymentLocalGitUrl

Nota

Guarde os URLs das instâncias remotas do Git para as aplicações de front-end e back-end, que são apresentados na saída de az webapp create.

Enviar para o Azure a partir do Git

Uma vez que está a implantar o main ramo, precisa de definir o ramo de implementação predefinido para as suas duas aplicações Serviço de Aplicações (mainver alterar o ramo de implementação). No Cloud Shell, defina a definição da DEPLOYMENT_BRANCH aplicação com o az webapp config appsettings set comando.
```
az webapp config appsettings set --name <front-end-app-name> --resource-group myAuthResourceGroup --settings DEPLOYMENT_BRANCH=main
az webapp config appsettings set --name <back-end-app-name> --resource-group myAuthResourceGroup --settings DEPLOYMENT_BRANCH=main
```
Novamente na janela de terminal local, execute os seguintes comandos do Git para implementar na aplicação de back-end. Substitua a< aplicação> de final de implementaçãoLocalGitUrl-of-back-end por o URL do comando Git que guardou dos recursos create Azure. Quando solicitado para obter credenciais pelo Git Credential Manager, certifique-se de que introduz as suas credenciais de implantação, e não as credenciais que utiliza para iniciar sessão na portal do Azure.
```
git remote add backend <deploymentLocalGitUrl-of-back-end-app>
git push backend main
```
Na janela de terminal do local, execute os seguintes comandos do Git para implementar o mesmo código na aplicação de front-end. Substitua a< aplicação> DesaguisalGitUrl-of-front-end por URL do comando Git que guardou dos recursos Create Azure.
```
git remote add frontend <deploymentLocalGitUrl-of-front-end-app>
git push frontend main
```

Navegue pelas aplicações

Navegue para os seguintes URLs num browser e veja as duas aplicações a funcionar.

http://<back-end-app-name>.azurewebsites.net
http://<front-end-app-name>.azurewebsites.net

Screenshot de uma amostra de API rest Serviço de Aplicações do Azure numa janela do navegador, que mostra uma aplicação para fazer lista.

Nota

Se a aplicação se reiniciar, poderá ter reparado que os dados novos foram apagados. Este comportamento é predefinido, porque a aplicação ASP.NET Core de exemplo utiliza uma base de dados dentro da memória.

Chamar a API de back-end a partir do front-end

Neste passo, vai apontar o código do servidor da aplicação de front-end para aceder à API de back-end. Posteriormente, vai ativar o acesso autenticado do front-end para o back-end.

Modificar o código de front-end

No repositório local, abra Controllers/TodoController.cs. No início da TodoController aula, adicione as seguintes linhas e substitua <o nome> de aplicações de back-end com o nome da sua aplicação back-end:
```
private static readonly HttpClient _client = new HttpClient();
private static readonly string _remoteUrl = "https://<back-end-app-name>.azurewebsites.net";
```
Encontre o método decorado [HttpGet] e substitua o código dentro dos aparelhos encaracolados com:
```
var data = await _client.GetStringAsync($"{_remoteUrl}/api/Todo");
return JsonConvert.DeserializeObject<List<TodoItem>>(data);
```
A primeira linha faz uma chamada de GET /api/Todo para a aplicação API de back-end.
Em seguida, encontre o método decorado [HttpGet("{id}")] e substitua o código dentro dos aparelhos encaracolados com:
```
var data = await _client.GetStringAsync($"{_remoteUrl}/api/Todo/{id}");
return Content(data, "application/json");
```
A primeira linha faz uma chamada de GET /api/Todo/{id} para a aplicação API de back-end.
Em seguida, encontre o método decorado [HttpPost] e substitua o código dentro dos aparelhos encaracolados com:
```
var response = await _client.PostAsJsonAsync($"{_remoteUrl}/api/Todo", todoItem);
var data = await response.Content.ReadAsStringAsync();
return Content(data, "application/json");
```
A primeira linha faz uma chamada de POST /api/Todo para a aplicação API de back-end.
Em seguida, encontre o método decorado [HttpPut("{id}")] e substitua o código dentro dos aparelhos encaracolados com:
```
var res = await _client.PutAsJsonAsync($"{_remoteUrl}/api/Todo/{id}", todoItem);
return new NoContentResult();
```
A primeira linha faz uma chamada de PUT /api/Todo/{id} para a aplicação API de back-end.
Em seguida, encontre o método decorado [HttpDelete("{id}")] e substitua o código dentro dos aparelhos encaracolados com:
```
var res = await _client.DeleteAsync($"{_remoteUrl}/api/Todo/{id}");
return new NoContentResult();
```
A primeira linha faz uma chamada de DELETE /api/Todo/{id} para a aplicação API de back-end.
Guarde todas as alterações. Na janela de terminal do local, implemente as alterações na aplicação de front-end com os seguintes comandos do Git:
```
git add .
git commit -m "call back-end API"
git push frontend main
```

Verificar as alterações

Navegue para http://<front-end-app-name>.azurewebsites.net e adicione alguns itens, como from front end 1 e from front end 2.
Navegue para http://<back-end-app-name>.azurewebsites.net para ver os itens adicionados a partir da aplicação de front-end. Além disso, adicione alguns itens, como from back end 1 e from back end 2 e, depois, atualize a aplicação de front-end para ver se reflete as alterações.

Configurar a autenticação

Neste passo, vai ativar a autenticação e autorização para as duas aplicações. Também vai configurar a aplicação de front-end para gerar um token de acesso que pode utilizar para fazer chamadas autenticadas para a aplicação de back-end.

Vai utilizar o Azure Active Directory como o fornecedor de identidade. Para obter mais informações, veja Configure Azure Active Directory authentication for your App Services application (Configurar a autenticação do Azure Active Directory na sua aplicação dos Serviços de Aplicação).

Ativar a autenticação e autorização na aplicação de back-end

No menu portal do Azure, selecione grupos de recursos ou procure e selecione grupos de Recursos em qualquer página.
Em grupos de recursos, encontre e selecione o seu grupo de recursos. Em Visão Geral, selecione a página de gestão da sua aplicação back-end.
No menu esquerdo da sua aplicação back-end, selecione Autenticação e, em seguida, clique em Adicionar fornecedor de identidade.
Na página 'Adicionar um fornecedor de identidade', selecione a Microsoft como fornecedor de Identidade para iniciar símis e Azure AD identidades.
Aceite as definições predefinidos e clique em Adicionar.
A página de autenticação abre. Copie a identificação do Cliente da aplicação Azure AD para um bloco de notas. Vai precisar deste valor mais à frente.

Se parar aqui, tem uma aplicação independente que já está protegida pela Serviço de Aplicações autenticação e autorização. As restantes secções mostram como garantir uma solução multi-aplicações ao "fluir" o utilizador autenticado da parte frontal para a parte traseira.

Ativar a autenticação e autorização na aplicação de front-end

Siga os mesmos passos para a aplicação de front-end, mas ignore o último. Não precisa da identificação do cliente para a aplicação frontal. No entanto, permaneça na página autenticação para a aplicação frontal, pois irá usá-la no passo seguinte.

Se preferir, navegue para http://<front-end-app-name>.azurewebsites.net. Deve ser agora direcionado para uma página de início de sessão segura. Depois de iniciar seduca, ainda não consegue aceder aos dados a partir da aplicação back-end, porque a aplicação back-end agora requer o azure Ative Directory a partir da aplicação frontal. Tens de fazer três coisas:

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

Dica

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.

Conceder ao front-end acesso 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. Neste passo, vai conceder à aplicação de front-end as permissões para aceder ao back-end em nome do utilizador. (Tecnicamente, vai conceder à aplicação do AD de front-end as permissões para aceder à aplicação do AD de back-end em nome do utilizador.)

Na página autenticação para a aplicação frontal, selecione o nome da aplicação frontal no fornecedor de Identidade. Este registo de aplicações foi gerado automaticamente para si. Selecione permissões API no menu esquerdo.
Selecione Adicione uma permissão e, em seguida, selecione onome> de aplicação final das minhas APIs<>.
Na página de permissões da API do Pedido para a aplicação back-end, selecione permissões delegadas e user_impersonation e, em seguida, selecione permissões Adicionar.

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

A aplicação frontal tem agora as permissões necessárias para aceder à aplicação back-end como utilizador inscrito. Neste passo, vai configurar a autenticação e autorização do Serviço de Aplicações para lhe dar um token de acesso utilizável para aceder ao back-end. Para este passo, precisa do ID do cliente da parte de trás, que copiou a partir de Enable authentication e autorização para aplicação back-end.

No Cloud Shell, executar os seguintes comandos na aplicação frontal para adicionar o scope parâmetro à definição identityProviders.azureActiveDirectory.login.loginParametersde autenticação . Substitua <o nome> de aplicações frontais e <o id> do cliente de fundo.

authSettings=$(az webapp auth show -g myAuthResourceGroup -n <front-end-app-name>)
authSettings=$(echo "$authSettings" | jq '.properties' | jq '.identityProviders.azureActiveDirectory.login += {"loginParameters":["scope=openid profile email 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 efetivamente uma loginParameters propriedade com âmbitos personalizados adicionais. Aqui está uma explicação dos âmbitos solicitados:

openid, profilee email já são solicitados por Serviço de Aplicações por defeito. Para obter informações, consulte Os Âmbitos de Ligação OpenID.
api://<back-end-client-id>/user_impersonation é uma API exposta no seu registo de aplicações back-end. É o âmbito que lhe dá um token JWT que inclui a aplicação back end como um público simbólico.
offline_access está incluído aqui por conveniência (caso queira refrescar fichas).

Dica

Para ver o api://<back-end-client-id>/user_impersonation âmbito no portal do Azure, vá à página autenticação para a aplicação back-end, clique no link no fornecedor Identidade e, em seguida, clique em Expor uma API no menu esquerdo.
Para configurar os âmbitos necessários utilizando uma interface web, consulte os passos da Microsoft em Fichas de Auth Refresh.
Alguns âmbitos requerem o consentimento da administração ou do utilizador. Este requisito faz com que a página de pedido de consentimento seja exibida quando um utilizador assina na aplicação frontal no navegador. Para evitar esta página de consentimento, adicione o registo da aplicação da frente como uma aplicação de cliente autorizada na página Expor uma API clicando em Adicionar uma aplicação ao cliente e fornecer o ID do cliente do registo da aplicação da frente.

Nota

Para aplicações Linux, existe um requisito temporário para configurar uma definição de versão para o registo de aplicações back-end. No Cloud Shell, configuure-o com os seguintes comandos. Certifique-se de substituir< o id> do cliente final pela identificação do cliente da sua parte de trás.

id=$(az ad app show --id <back-end-client-id> --query id --output tsv)
az rest --method PATCH --url https://graph.microsoft.com/v1.0/applications/$id --body "{'api':{'requestedAccessTokenVersion':2}}"

As suas aplicações estão agora configuradas. O front-end está agora pronto para aceder ao back-end com um token de acesso correto.

Para obter informações sobre como configurar o token de acesso a outros fornecedores, consulte tokens do fornecedor de identidade Refresh.

Chamar a API de forma segura a partir do código de servidor

Neste passo, vai ativar o código de servidor modificado anteriormente para fazer chamadas autenticadas para a API de back-end.

A sua aplicação frontal tem agora a permissão necessária e também adiciona o ID do cliente da parte de trás aos parâmetros de login. Por conseguinte, pode obter um token de acesso para a autenticação na aplicação de back-end. O Serviço de Aplicações fornece este token ao código de servidor mediante a injeção de um cabeçalho X-MS-TOKEN-AAD-ACCESS-TOKEN em cada pedido autenticado (veja Retrieve tokens in app code [Obter tokens no código da aplicação]).

Nota

Estes cabeçalhos são injetados em todas as linguagens suportadas. Pode aceder aos mesmos através da norma padrão de cada linguagem.

No repositório local, abra novamente Controllers/TodoController.cs. No construtor TodoController(TodoContext context), adicione o seguinte código:
```
public override void OnActionExecuting(ActionExecutingContext context)
{
    base.OnActionExecuting(context);

    _client.DefaultRequestHeaders.Accept.Clear();
    _client.DefaultRequestHeaders.Authorization =
        new AuthenticationHeaderValue("Bearer", Request.Headers["X-MS-TOKEN-AAD-ACCESS-TOKEN"]);
}
```
Este código adiciona o cabeçalho HTTP padrão Authorization: Bearer <access-token> a todas as chamadas à API remotas. No ASP.NET Core MVC solicitam o oleoduto de execução, OnActionExecuting executa pouco antes da respetiva ação, pelo que cada uma das suas chamadas de API cessantes apresenta agora o token de acesso.
Guarde todas as alterações. Na janela de terminal do local, implemente as alterações na aplicação de front-end com os seguintes comandos do Git:
```
git add .
git commit -m "add authorization header for server code"
git push frontend main
```
Volte a iniciar sessão em https://<front-end-app-name>.azurewebsites.net. Na página do contrato de utilização de dados do utilizador, clique em Aceitar.

Deverá ser agora capaz de criar, ler, atualizar e eliminar os dados da aplicação de back-end como antes. A única diferença é que agora ambas as aplicações estão protegidas através da autenticação e autorização do Serviço de Aplicações, incluindo as chamadas de serviço para serviço.

Parabéns! O código de servidor está agora a aceder aos dados do back-end em nome do utilizador autenticado.

Chamar a API de forma segura a partir do código do browser

Neste passo, vai apontar a aplicação Angular.js de front-end para a API de back-end. Desta forma, aprenderá a obter o token de acesso e a fazer chamadas à API para a aplicação de back-end com o mesmo.

Embora o código do servido tenha acesso aos cabeçalhos dos pedidos, o código do cliente pode aceder a GET /.auth/me para obter os mesmos tokens de acesso (veja Retrieve tokens in app code [Obter tokens no código da aplicação]).

Dica

Esta secção utiliza os métodos HTTP padrão para demonstrar as chamadas HTTP seguras. No entanto, pode utilizar a Microsoft Authentication Library para o JavaScript para ajudar a simplificar o padrão de aplicação Angular.js.

Configurar o CORS

No Cloud Shell, ative CORS no URL do seu cliente com o comando az webapp cors add. Substitua os <espaços reservados com o nome> da aplicação de pontae< o nome> da aplicação frontal.

az webapp cors add --resource-group myAuthResourceGroup --name <back-end-app-name> --allowed-origins 'https://<front-end-app-name>.azurewebsites.net'

Este passo não está relacionado com a autenticação e autorização. No entanto, tem de segui-lo para que o browser possa permitir as chamadas à API em vários domínios a partir da aplicação Angular.js. Para obter mais informações, veja Adicionar a funcionalidade CORS.

Apontar a aplicação Angular.js para a API de back-end

No repositório local, abra wwwroot/index.html.
Na Linha 51, desaprote a apiEndpoint variável para o URL HTTPS da sua aplicação back-end (https://<back-end-app-name>.azurewebsites.net). Substitua <o nome> da aplicação em final de casa pelo nome da sua aplicação em Serviço de Aplicações.
No repositório local, abra wwwroot/app/scripts/todoListSvc.js e verifique se apiEndpoint está anexado a todas as chamadas à API. A sua aplicação Angular.js está agora a chamar as APIs de back-end.

Adicionar o token de acesso às chamadas à API

Em wwwroot/app/scripts/todoListSvc.js, acima da lista de chamadas à API (em cima da linha getItems : function(){), adicione a seguinte função à lista:
```
setAuth: function (token) {
    $http.defaults.headers.common['Authorization'] = 'Bearer ' + token;
},
```
Esta função é chamada para definir o cabeçalho Authorization predefinido com o token de acesso. Vai chamá-la no próximo passo.

No repositório local, abra wwwroot/app/scripts/app.js e localize o seguinte código:

$routeProvider.when("/Home", {
    controller: "todoListCtrl",
    templateUrl: "/App/Views/TodoList.html",
}).otherwise({ redirectTo: "/Home" });

Substitua o bloco de código inteiro pelo código abaixo:

$routeProvider.when("/Home", {
    controller: "todoListCtrl",
    templateUrl: "/App/Views/TodoList.html",
    resolve: {
        token: ['$http', 'todoListSvc', function ($http, todoListSvc) {
            return $http.get('/.auth/me').then(function (response) {
                todoListSvc.setAuth(response.data[0].access_token);
                return response.data[0].access_token;
            });
        }]
    },
}).otherwise({ redirectTo: "/Home" });

A nova alteração adiciona o mapeamento resolve que chama /.auth/me e define o token de acesso. Confirma que tem o token de acesso antes de instanciar o controlador todoListCtrl. Dessa forma, todas as chamadas à API pelo controlador incluem o token.

Implementar as atualizações e testar

Guarde todas as alterações. Na janela de terminal do local, implemente as alterações na aplicação de front-end com os seguintes comandos do Git:
```
git add .
git commit -m "add authorization header for Angular"
git push frontend main
```
Navegue novamente até https://<front-end-app-name>.azurewebsites.net. Deverá ser agora capaz de criar, ler, atualizar e eliminar os dados da aplicação de back-end, diretamente na aplicação Angular.js.

Parabéns! O código do cliente está agora a aceder aos dados do back-end em nome do utilizador autenticado.

Quando o token de acesso expira

O token de acesso expira ao fim de algum tempo. Para obter informações sobre como atualizar os seus tokens de acesso sem exigir que os utilizadores reauttenárem com a sua aplicação, consulte os tokens do fornecedor de identidade Refresh.

Limpar os recursos

Nos passos anteriores, criou os recursos do Azure num grupo de recursos. Se achar que não vai precisar destes recursos no futuro, execute o seguinte comando no Cloud Shell para eliminar o grupo de recursos:

az group delete --name myAuthResourceGroup

Este comando pode demorar alguns minutos a ser executado.

Passos seguintes

O que aprendeu:

Ativar a autenticação e autorização incorporadas
Proteger aplicações contra pedidos não autenticados
Utilizar o Azure Active Directory como o fornecedor 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 aprender a mapear um nome DNS personalizado para a sua aplicação.

Mapeie um nome DNS personalizado existente para Serviço de Aplicações do Azure