Anterior

Seguinte

Exercício - Configurar provedores de autenticação e acesso

Concluído

Seu aplicativo Web de lista de compras precisa proteger o acesso a algumas rotas e desabilitar provedores de autenticação específicos. Neste exercício, você atualizará a configuração de roteamento do seu aplicativo Web para obter esse resultado.

Neste exercício, irá seguir os seguintes passos:

1. Adicione regras à configuração de roteamento para desabilitar alguns provedores de autenticação.
2. Proteja a lista de produtos para que apenas usuários autenticados possam acessá-la.
3. Implante o aplicativo atualizado.
4. Teste se as restrições são eficazes.

Desabilitar provedores de autenticação

Atualizaremos a configuração de roteamento do nosso aplicativo para desabilitar o provedor de autenticação Microsoft Entra.

1. Abra o projeto no Visual Studio Code.

2. Abra o seguinte ficheiro.

   angular-app/staticwebapp.config.json
   

   react-app/staticwebapp.config.json
   

   svelte-app/staticwebapp.config.json
   

   vue-app/staticwebapp.config.json
   

3. Na raiz do objeto JSON, adicione a seguinte configuração de roteamento.

   "routes": [
     {
       "route": "/.auth/login/aad",
       "statusCode": 404
     }
   ]
   

   Ao adicionar essa regra de roteamento, impedimos que nossos usuários acessem o provedor de autenticação Microsoft Entra.

Proteger o acesso à lista de produtos

Em seguida, queremos proteger a lista de produtos para que apenas autenticados possam acessar a API. Para isso, adicionaremos outra regra de roteamento no staticwebapp.config.json arquivo de configuração.

1. Adicione a seguinte regra na parte superior da routes matriz.

   {
     "route": "/api/products/*",
     "allowedRoles": ["authenticated"]
   },
   

2. O ficheiro concluído staticwebapp.config.json deve ter o seguinte aspeto:

   {
     "routes": [
       {
         "route": "/api/products/*",
         "allowedRoles": ["authenticated"]
       },
       {
         "route": "/.auth/login/aad",
         "statusCode": 404
       }
     ],
     "navigationFallback": {
       "rewrite": "/index.html",
       "exclude": ["*.{css,scss,js,png,gif,ico,jpg,svg}"]
     }
   }
   

Implante suas alterações

Antes de testar o resultado dessa configuração, reimplantaremos nosso aplicativo.

1. No Visual Studio Code, abra a paleta de comandos pressionando F1.

2. Digite e selecione Git: Confirmar tudo.

3. Digite Secure access como a mensagem de confirmação e pressione Enter.

4. Abra a paleta de comandos ao premir F1.

5. Digite e selecione Git: Push e pressione Enter.

Depois de enviar as alterações, aguarde até que o processo de compilação e implantação seja executado. As alterações devem ficar visíveis em seu aplicativo implantado depois disso.

Testar as novas restrições

Depois que seu aplicativo for reimplantado, você poderá testar se as novas restrições são efetivas.

1. Na janela Visual Studio Code Explorer, retorne à seção Static Web Apps, clique com o botão direito do mouse em my-static-web-app-and-authn e selecione Procurar Site para exibir o aplicativo em seu navegador.

2. Se não tiver sessão iniciada, deverá ver a mensagem Não autorizado em vez da lista de produtos.

3. Selecione Microsoft Entra ID na lista de provedores de autenticação para fazer login.

   Você verá uma página de erro 404 como a seguinte:

   

4. Pressione o botão Voltar do navegador para voltar ao aplicativo.

5. Selecione GitHub na lista de provedores de autenticação para fazer login.

6. Insira suas credenciais do GitHub, se solicitado, e selecione Conceder Consentimento na página de consentimento do Azure.

Agora você está logado e deve ver a lista de produtos.

Próximos passos

Parabéns! Você implementou um fluxo de trabalho de autenticação completo em seu aplicativo Web estático!

Continuar