Editar

Partilhar via

Autenticar e autorizar aplicativos Web estáticos

  • Procedimentos

Os Aplicativos Web Estáticos do Azure fornecem uma experiência de autenticação simplificada, onde nenhuma configuração extra é necessária para usar o GitHub e a ID do Microsoft Entra para autenticação. Todos os recursos listados neste artigo estão disponíveis em todos os planos de aplicativos Web estáticos.

Neste artigo, saiba mais sobre o comportamento padrão, como configurar entrada e saída, como bloquear um provedor de autenticação e muito mais. Para ler os detalhes de autenticação para um uso específico, consulte Acessar informações do usuário.

Você pode registrar um provedor personalizado, que desativa todos os provedores pré-configurados.

Aviso

Devido a alterações na política da API X (anteriormente Twitter), o suporte não está disponível como parte dos provedores pré-configurados para seu aplicativo. Se você quiser continuar a usar o X (anteriormente Twitter) para autenticação/autorização com seu aplicativo, atualize a configuração do aplicativo para registrar um provedor personalizado.

Pré-requisitos

Esteja ciente dos seguintes padrões e recursos para autenticação e autorização com os Aplicativos Web Estáticos do Azure.

Incumprimento:

  • Qualquer usuário pode se autenticar com um provedor pré-configurado
    • GitHub
    • Microsoft Entra ID
    • Para restringir um provedor de autenticação, bloqueie o acesso com uma regra de rota personalizada
  • Após o login, os usuários pertencem às anonymous funções e authenticated . Para obter mais informações sobre funções, consulte Gerenciar funções

Recursos:

  • Definir regras no arquivo de staticwebapp.config.json para que usuários autorizados obtenham acesso a rotas restritas
  • Atribuir funções personalizadas aos usuários usando o sistema de convites interno
  • Atribua programaticamente aos usuários funções personalizadas no início de sessão com uma função de API
  • Entenda que a autenticação e a autorização se sobrepõem significativamente aos conceitos de roteamento, que são detalhados no Guia de configuração do aplicativo
  • Restrinja o início de sessão a um inquilino específico do Microsoft Entra ID configurando um fornecedor personalizado do Microsoft Entra ID. O provedor de ID do Microsoft Entra pré-configurado permite que qualquer conta da Microsoft entre.

Configurar o início de sessão

Os Aplicativos Web Estáticos do Azure usam a pasta do /.auth sistema para fornecer acesso a APIs relacionadas à autorização. Em vez de expor qualquer uma das rotas na /.auth pasta diretamente aos usuários finais, crie regras de roteamento para URLs amigáveis.

Use a tabela a seguir para localizar a rota específica do provedor.

Provedor de autorização Iniciar sessão no percurso
Microsoft Entra ID /.auth/login/aad
GitHub /.auth/login/github

Por exemplo, para entrar com o GitHub, você pode usar uma URL semelhante ao exemplo a seguir.

<a href="/.auth/login/github">Login</a>

Se você optar por oferecer suporte a mais de um provedor, use um link específico para cada provedor em seu site. Use uma regra de rota para mapear um provedor padrão para uma rota amigável como /login.

{
  "route": "/login",
  "redirect": "/.auth/login/github"
}

Configurar o redirecionamento pós-início de sessão

Você pode retornar um usuário a uma página específica depois que ele entrar fornecendo uma URL totalmente qualificada no parâmetro de cadeia de caracteres de post_login_redirect_uri consulta.

<a href="/.auth/login/github?post_login_redirect_uri=https://zealous-water.azurestaticapps.net/success">Login</a>

You can also redirect unauthenticated users back to the referring page after they sign in. To add this redirect, create a response override rule that sets post_login_redirect_uri to .referrer, like in the following example.

{
  "responseOverrides": {
    "401": {
      "redirect": "/.auth/login/github?post_login_redirect_uri=.referrer",
      "statusCode": 302
    }
  }
}

Configurar a inscrição

A /.auth/logout rota faz com que os usuários saiam do site. Você pode adicionar um link à navegação do site para permitir que o usuário saia, como no exemplo a seguir.

<a href="/.auth/logout">Log out</a>

Use uma regra de rota para mapear uma rota amigável como /logout.

{
  "route": "/logout",
  "redirect": "/.auth/logout"
}

Configurar o redirecionamento pós-saída

Para retornar um usuário a uma página específica depois que ele sair, forneça uma URL no post_logout_redirect_uri parâmetro de cadeia de caracteres de consulta.

Bloquear um provedor de autenticação

Por padrão, todos os provedores de autenticação estão habilitados, mas você pode querer restringir seu aplicativo de usar um provedor. Por exemplo, seu aplicativo pode querer usar apenas provedores que expõem endereços de email.

Para bloquear um provedor, crie uma regra de rota para retornar um código de 404 status para solicitações para a rota específica do provedor bloqueado. Por exemplo, para restringir o provedor Entra ID (anteriormente Azure Ative Directory, conhecido como "aad"), adicione a seguinte regra de rota.

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

Remover dados pessoais

Quando você concede consentimento para um aplicativo como usuário final, o aplicativo tem acesso ao seu endereço de e-mail ou nome de usuário, dependendo do provedor de identidade. Uma vez que essas informações são fornecidas, o proprietário do aplicativo pode decidir como gerenciar os dados pessoais.

Os usuários finais precisam entrar em contato com administradores de aplicativos Web individuais para revogar essas informações de seus sistemas.

Para remover dados pessoais da plataforma Azure Static Web Apps e impedir que a plataforma forneça essas informações em solicitações futuras, envie uma solicitação usando a seguinte URL:

https://identity.azurestaticapps.net/.auth/purge/<AUTHENTICATION_PROVIDER_NAME>

To prevent the platform from providing this information on future requests to individual apps, submit a request using the following URL:

https://<WEB_APP_DOMAIN_NAME>/.auth/purge/<AUTHENTICATION_PROVIDER_NAME>

If you're using Microsoft Entra ID, use aad as the value for the <AUTHENTICATION_PROVIDER_NAME> placeholder.

Tip

For information about general restrictions and limitations, see Quotas.

Próximo passo

Usar rotas para definir funções permitidas para controlar o acesso à página