Gerenciar autenticação em Aplicativos Web Estáticos
Seu aplicativo Web de lista de compras precisa de uma forma de identificar exclusivamente os usuários e fornecer a eles um espaço pessoal para armazenar os produtos.
A autenticação é a maneira como você verificará a identidade de um usuário que está tentando acessar um sistema de informações. Agora vamos examinar a autenticação e como você pode implementá-la em Aplicativos Web Estáticos do Azure.
Provedores de identidade
O serviço Aplicativos Web Estáticos do Azure simplifica a experiência de autenticação gerenciando esta com os seguintes provedores:
- Microsoft Entra ID
- GitHub
- X
Todos os provedores de autenticação são habilitados por padrão. Veremos mais tarde como você pode restringir um provedor de autenticação com uma regra de rota personalizada.
Pasta do sistema
A pasta do sistema /.auth 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 logon e logoff e acesso às informações do usuário.
Logon
A tabela a seguir lista a rota de logon específica do provedor que você pode usar em seu aplicativo.
| Provedor de identidade | Rota de logon |
|---|---|
| Microsoft Entra ID | /.auth/login/aad |
| GitHub | /.auth/login/github |
| X | /.auth/login/x |
Por exemplo, para entrar com o GitHub, você pode incluir um link de logon em seu aplicativo Web com o seguinte snippet de código:
<a href="/.auth/login/github">Login</a>
Se quiser que o usuário retorne a uma página específica após o logon, você poderá fornecer uma URL no parâmetro de cadeia de caracteres de consulta post_login_redirect_uri. Por exemplo:
<a href="/.auth/login/github?post_login_redirect_uri=/products">Login</a>
Logout
A rota /.auth/logout registra os usuários do aplicativo Web. Você pode adicionar um link para a navegação do site para permitir que o usuário faça logoff, conforme mostrado no exemplo a seguir.
<a href="/.auth/logout">Log out</a>
Assim como com o logon, você pode fornecer uma URL para redirecionamento depois de fazer logoff usando o parâmetro de cadeia de caracteres de consulta post_logout_redirect_uri:
<a href="/.auth/logout?post_logout_redirect_uri=/home">Log out</a>
Acessar informações do usuário
Você pode acessar informações de usuário relacionadas à autenticação por meio de um ponto de extremidade de acesso direto ou um cabeçalho especial em funções de API.
Se você enviar uma solicitação GET para a rota /.auth/me, receberá um objeto JSON com os dados para o usuário conectado no momento. As solicitações de usuários não autenticados retornam null.
Confira a seguir um exemplo de objeto de resposta.
{
"identityProvider": "github",
"userId": "d75b260a64504067bfc5b2905e3b8182",
"userDetails": "github-user-example",
"userRoles": [ "anonymous", "authenticated" ]
}
Funções da API
Todas as funções de API disponíveis em Aplicativos Web Estáticos do Azure têm acesso às mesmas informações de usuário que o aplicativo cliente. Os dados do usuário são passados para funções no cabeçalho HTTP x-ms-client-principal. 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óximas etapas
A seguir, implementaremos um fluxo de trabalho de autenticação completo em nosso aplicativo.