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

4 minutos

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 alcançar esse resultado.

Neste exercício, você vai concluir as seguintes etapas:

Adicionar regras à configuração de roteamento para desabilitar alguns provedores de autenticação.
Proteger a lista de produtos para que somente usuários autenticados possam acessá-la.
Implantar o aplicativo atualizado.
Testar se as restrições são efetivas.

Desabilitar os provedores de autenticação

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

Abra o projeto no Visual Studio Code.

Abra o arquivo a seguir.

angular-app/staticwebapp.config.json

react-app/staticwebapp.config.json

svelte-app/staticwebapp.config.json

vue-app/staticwebapp.config.json

Na raiz do objeto JSON, adicione a configuração de roteamento a seguir.
```
"routes": [
  {
    "route": "/.auth/login/aad",
    "statusCode": 404
  }
]
```
Ao adicionar essa regra de roteamento, impedimos que nossos usuários acessem o provedor de autenticação do Microsoft Entra.

Proteger o acesso à lista de produtos

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

Adicione a regra a seguir à parte superior da matriz routes.

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

Seu arquivo staticwebapp.config.json preenchido deve ficar da seguinte maneira:

{
  "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}"]
  }
}

Implantar suas alterações

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

No Visual Studio Code, abra a paleta de comandos pressionando F1.
Insira e selecione Git: confirmar tudo.
Insira Secure access como a mensagem de confirmação e pressione Enter.
Abra a paleta de comandos pressionando F1.
Insira 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 no aplicativo implantado depois disso.

Testar as novas restrições

Depois que o aplicativo for reimplantado, você poderá testar se as novas restrições estão em vigor.

Na janela do Explorador do Visual Studio Code, retorne para a seção Aplicativos Web Estáticos, clique com o botão direito do mouse em my-static-web-app-and-authn e selecione Navegar pelo Site para exibir o aplicativo no seu navegador.
Se você não estiver conectado, deverá ver a mensagem Não autorizado em vez da lista de produtos.
Selecione Microsoft Entra ID na lista de provedores de autenticação para fazer logon.

Deverá ser exibida uma página de erro 404 como a seguinte:
Pressione o botão Voltar do navegador para retornar ao aplicativo.
Selecione GitHub na lista de provedores de autenticação para fazer logon.
Insira suas credenciais do GitHub se solicitado e selecione Conceder Consentimento na página de consentimento do Azure.

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

Próximas etapas