Autenticar e autorizar Aplicativos Web Estáticos

Aviso

Devido a mudanças na política da API do X (anteriormente Twitter), não podemos mais continuar a oferecer suporte como parte dos provedores pré-configurados para o seu aplicativo. Se você deseja continuar usando o X (anteriormente Twitter) para autenticação/autorização com seu aplicativo, atualize a configuração do seu aplicativo para registrar um provedor personalizado.

Os Aplicativos Web Estáticos do Azure fornecem uma experiência de autenticação simplificada na qual nenhuma outra ação ou configuração é necessária para usar o GitHub e o Microsoft Entra ID para autenticação.

Neste artigo, saiba mais sobre o comportamento padrão, como configurar a entrada e a saída, como bloquear um provedor de autenticação e muito mais.

É possível registrar um provedor personalizado, que desabilita todos os provedores pré-configurados.

Pré-requisitos

Tenha em mente os seguintes padrões e recursos para autenticação e autorização com Aplicativos Web Estáticos do Azure.

Padrões:

  • 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 a entrada, os usuários pertencerão às funções anonymous e authenticated. Para saber mais sobre as funções, confira Gerenciar funções

Recursos:

Configurar credenciais

O serviço Aplicativos Web Estáticos do Azure usam a pasta do sistema /.auth para fornecer acesso a APIs relacionadas à autorização. Em vez de expor qualquer uma das rotas na pasta /.auth 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 Rota de entrada
Microsoft Entra ID /.auth/login/aad
GitHub /.auth/login/github

Por exemplo, para entrar com o GitHub, você pode incluir algo semelhante ao link a seguir.

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

Se você optar por dar suporte a mais de um provedor, exponha um link específico do provedor para cada provedor no 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 após a entrada

Retorne 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 consulta post_login_redirect_uri, como no exemplo a seguir.

<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 configure this behavior, 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 saída

A rota /.auth/logout desconecta os usuários do site. Você pode adicionar um link para a 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 após a saída

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

Bloquear um provedor de autenticação

Talvez você queira impedir que seu aplicativo use um provedor de autenticação, já que todos os provedores de autenticação estão habilitados. Por exemplo, seu aplicativo pode querer padronizar apenas para provedores que expõem endereços de email.

Para bloquear um provedor, você pode criar regras de rota para retornar um código de status 404 para solicitações para a rota específica do provedor bloqueado. Por exemplo, para restringir o Twitter como provedor, adicione a regra de rota a seguir.

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

Remover dados pessoais

Quando você dá consentimento a um aplicativo como um usuário final, o aplicativo tem acesso ao seu endereço de email ou nome de usuário, dependendo do provedor de identidade. Depois que essas informações são fornecidas, o proprietário do aplicativo poderá decidir como gerenciar dados pessoais.

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

Para remover dados pessoais da plataforma de Aplicativos Web Estáticos do Azure 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óxima etapa