Gerenciar autenticação em aplicativos Web estáticos

2 minutos

Seu aplicativo Web de lista de compras precisa de uma maneira de identificar exclusivamente seus usuários e fornecer-lhes um espaço pessoal para armazenar os produtos.

A autenticação é a forma de verificar a identidade de um utilizador que está a tentar aceder a um sistema de informação. Agora examinaremos a autenticação e como você pode implementá-la nos Aplicativos Web Estáticos do Azure.

Fornecedores de identidade

Os Aplicativos Web Estáticos do Azure simplificam a experiência de autenticação gerenciando a autenticação com os seguintes provedores:

Microsoft Entra ID
GitHub
Twitter

Todos os provedores de autenticação são habilitados por padrão. Veremos mais adiante como você pode restringir um provedor de autenticação com uma regra de rota personalizada.

Pasta do sistema

A /.auth pasta do sistema fornece acesso a todas as APIs relacionadas à autenticação. Você pode usar esses pontos de extremidade para implementar um fluxo de trabalho de autenticação completo em seu aplicativo, incluindo login e check-out e acesso às informações do usuário.

A tabela a seguir lista a rota de login específica do provedor que você pode usar em seu aplicativo.

Fornecedor de identidade	Rota de login
Microsoft Entra ID	`/.auth/login/aad`
GitHub	`/.auth/login/github`
Twitter	`/.auth/login/twitter`

Por exemplo, para fazer login com o GitHub, você pode incluir um link de login em seu aplicativo Web com o seguinte trecho:

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

Se você quiser que um usuário retorne a uma página específica após o login, você também pode fornecer uma URL no post_login_redirect_uri parâmetro de cadeia de caracteres de consulta. Por exemplo:

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

Fim de Sessão

A /.auth/logout rota faz logout dos usuários do aplicativo Web. Você pode adicionar um link à navegação do site para permitir que o usuário efetue logout, conforme mostrado no exemplo a seguir.

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

Como no login, você pode fornecer uma URL para redirecionar depois de sair usando o post_logout_redirect_uri parâmetro query string:

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

Aceder às informações do utilizador

Você pode acessar informações de usuário relacionadas à autenticação por meio de um ponto de extremidade de acesso direto ou de um cabeçalho especial em funções de API.

Se você enviar uma GET solicitação para a /.auth/me rota, receberá um objeto JSON com os dados do usuário conectado no momento. Solicitações de usuários não autenticados retorna null.

O exemplo a seguir é um objeto de resposta de exemplo.

{
  "identityProvider": "github",
  "userId": "d75b260a64504067bfc5b2905e3b8182",
  "userDetails": "github-user-example",
  "userRoles": [ "anonymous", "authenticated" ]
}

Funções da API

Todas as funções de API disponíveis nos Aplicativos Web Estáticos do Azure têm acesso às mesmas informações do usuário que seu aplicativo cliente. Os dados do usuário são passados x-ms-client-principal para funções no cabeçalho HTTP. Os dados são serializados como um objeto JSON e codificados em Base64.

A função de exemplo a seguir mostra como ler e retornar informações do usuário.

module.exports = async function (context, req) {
  const header = req.headers["x-ms-client-principal"];
  const encoded = Buffer.from(header, "base64");
  const decoded = encoded.toString("ascii");

  context.res = {
    body: {
      userInfo: JSON.parse(decoded)
    }
  };
};

Próximos passos

Em seguida, implementaremos um fluxo de trabalho de autenticação completo em nosso aplicativo.

Verifique o seu conhecimento

Continuar