Configurar o acesso para provedores e funções

2 minutos

Com a autenticação de usuário em vigor, seu aplicativo Web de lista de compras precisa de uma maneira de restringir o acesso a algumas páginas para usuários que não estão conectados e permitir o login apenas por meio de provedores específicos.

Examinaremos a configuração e as funções de roteamento nos Aplicativos Web Estáticos do Azure para ajustar o acesso do usuário ao nosso aplicativo Web.

Arquivo de configuração para Aplicativos Web Estáticos do Azure

A configuração dos Aplicativos Web Estáticos do Azure é definida no arquivo, que controla staticwebapp.config.json as seguintes configurações:

Encaminhamento
Autenticação
Autorização
Regras de fallback
Substituições de resposta HTTP
Definições globais de cabeçalho HTTP
Tipos MIME personalizados

O local recomendado para o staticwebapp.config.json está na pasta definida como a configuração que escolhemos durante a app_location implantação. No entanto, o arquivo pode ser colocado em qualquer local dentro da pasta de código-fonte do aplicativo.

Para o nosso caso de uso, analisaremos a configuração de roteamento para alcançar o que queremos.

Restringir provedores de autenticação

Em uma seção anterior, vimos que, por padrão, todos os provedores de autenticação estão habilitados. Podemos alterar isso adicionando regras de roteamento na configuração.

Por exemplo, para desativar o login por meio do provedor GitHub, você pode adicionar uma regra de roteamento como esta no staticwebapp.config.json arquivo.

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

Forçamos a rota /.auth/login/github usada para autenticar com o provedor GitHub a retornar um 404 erro (não encontrado), para que os usuários não possam acessá-lo. Você pode adicionar quantas regras de rotas quisermos desativar todos os provedores que você não deseja usar.

Rotas seguras com funções

As rotas são, por padrão, acessíveis a todos sem quaisquer restrições. Você pode proteger rotas adicionando um ou mais nomes de função à matriz de allowedRoles uma regra. Por padrão, cada usuário pertence à função interna anonymous e todos os usuários conectados são membros da authenticated função.

Isso significa que, para restringir uma rota apenas a usuários autenticados, você pode adicionar a função interna authenticated à allowedRoles matriz.

{
  "routes": [
    {
      "route": "/profile",
      "allowedRoles": ["authenticated"]
    }
  ]
}

Com essa configuração, se um usuário não autenticado tentar acessar a /profile rota, um erro 401 (não autorizado) será retornado.

Você também pode restringir métodos HTTP específicos para uma determinada rota, como os seguintes:

{
  "routes": [
    {
      "route": "/profile",
      "methods": ["PUT", "POST", "DELETE"],
      "allowedRoles": ["authenticated"]
    }
  ]
}

Neste exemplo, todos os usuários podem acessar o GET método na /profile rota, mas somente usuários autenticados podem usar PUT, POST ou DELETE.

Usar um curinga

Você pode usar um curinga no final da rota para corresponder a todas as rotas seguindo o padrão base. Por exemplo, para restringir todos os URLs começando com /api usuários autenticados, você pode escrever:

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

Próximos passos