Aceder às informações do utilizador nas Aplicações Web Estáticas do Azure

Os Aplicativos Web Estáticos do Azure fornecem informações de usuário relacionadas à autenticação por meio de um ponto de extremidade de acesso direto e para funções de API.

Muitas interfaces de usuário dependem muito de dados de autenticação do usuário. O ponto de extremidade de acesso direto é uma API de utilitário que expõe informações do usuário sem ter que implementar uma função personalizada. Além da conveniência, o ponto de extremidade de acesso direto não está sujeito a atrasos de inicialização a frio associados à arquitetura sem servidor.

Dados principais do cliente

O objeto de dados principal do cliente expõe informações identificáveis pelo usuário ao seu aplicativo. As seguintes propriedades são apresentadas no objeto principal do cliente:

Property	Description
identityProvider	O nome do provedor de identidade.
userId	Um identificador exclusivo específico dos Aplicativos Web Estáticos do Azure para o usuário. O valor é exclusivo por aplicativo. Por exemplo, o mesmo usuário retorna um valor diferente userId em um recurso diferente de Aplicativos Web estáticos. O valor persiste durante o tempo de vida de um usuário. Se você excluir e adicionar o mesmo usuário de volta ao aplicativo, um novo userId será gerado.
userDetails	Nome de usuário ou endereço de e-mail do usuário. Alguns provedores retornam o endereço de e-mail do usuário, enquanto outros enviam o identificador do usuário.
userRoles	Uma matriz das funções atribuídas ao usuário.
claims	Uma matriz de declarações retornadas pelo seu provedor de autenticação personalizado. Acessível apenas no ponto de extremidade de acesso direto.

O exemplo a seguir é um objeto principal de cliente de exemplo:

{
  "identityProvider": "github",
  "userId": "abcd12345abcd012345abcdef0123450",
  "userDetails": "username",
  "userRoles": ["anonymous", "authenticated"],
  "claims": [{
    "typ": "name",
    "val": "Azure Static Web Apps"
  }]
}

Ponto de extremidade de acesso direto

Você pode enviar uma GET solicitação para a /.auth/me rota e receber acesso direto aos dados principais do cliente. Quando o estado da sua exibição depender de dados de autorização, use essa abordagem para obter o melhor desempenho.

Para usuários conectados, a resposta contém um objeto JSON principal do cliente. Solicitações de usuários não autenticados retorna null.

Usando a API de busca¹ , você pode acessar os dados principais do cliente usando a sintaxe a seguir.

async function getUserInfo() {
  const response = await fetch('/.auth/me');
  const payload = await response.json();
  const { clientPrincipal } = payload;
  return clientPrincipal;
}

(async () => {
console.log(await getUserInfo());
})();

Funções da API

As funções de API disponíveis em Aplicativos Web Estáticos por meio do back-end do Azure Functions têm acesso às mesmas informações do usuário que um aplicativo cliente, com exceção da claims matriz. Embora a API receba informações identificáveis pelo usuário, ela não executa suas próprias verificações se o usuário estiver autenticado ou se corresponder a uma função necessária. As regras de staticwebapp.config.json controle de acesso são definidas no arquivo.

JavaScript

Os dados principais do cliente são passados para funções de API no cabeçalho da x-ms-client-principal solicitação. Os dados principais do cliente são enviados como uma cadeia de caracteres codificada em Base64 contendo um objeto JSON serializado.

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.get('x-ms-client-principal');
  const encoded = Buffer.from(header, 'base64');
  const decoded = encoded.toString('ascii');

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

Supondo que a função acima seja nomeada user, você pode usar a API do navegador de busca¹ para acessar a resposta da API usando a sintaxe a seguir.

async function getUser() {
  const response = await fetch('/api/user');
  const payload = await response.json();
  const { clientPrincipal } = payload;
  return clientPrincipal;
}

console.log(await getUser());

C#

Em uma função C#, as informações do usuário estão disponíveis a x-ms-client-principal partir do cabeçalho que seu aplicativo pode desserializar em um ClaimsPrincipal objeto ou seu próprio tipo personalizado. O código a seguir demonstra como descompactar o cabeçalho em um tipo intermediário, ClientPrincipal, que é então transformado em uma ClaimsPrincipal instância.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Security.Claims;
using System.Text;
using System.Text.Json;
using Microsoft.AspNetCore.Http;

public static class StaticWebAppsAuth
{
  private class ClientPrincipal
  {
      public string IdentityProvider { get; set; }
      public string UserId { get; set; }
      public string UserDetails { get; set; }
      public IEnumerable<string> UserRoles { get; set; }
  }

  public static ClaimsPrincipal Parse(HttpRequest req)
  {
      var principal = new ClientPrincipal();

      if (req.Headers.TryGetValue("x-ms-client-principal", out var header))
      {
          var data = header[0];
          var decoded = Convert.FromBase64String(data);
          var json = Encoding.UTF8.GetString(decoded);
          principal = JsonSerializer.Deserialize<ClientPrincipal>(json, new JsonSerializerOptions { PropertyNameCaseInsensitive = true });
      }

      principal.UserRoles = principal.UserRoles?.Except(new string[] { "anonymous" }, StringComparer.CurrentCultureIgnoreCase);

      if (!principal.UserRoles?.Any() ?? true)
      {
          return new ClaimsPrincipal();
      }

      var identity = new ClaimsIdentity(principal.IdentityProvider);
      identity.AddClaim(new Claim(ClaimTypes.NameIdentifier, principal.UserId));
      identity.AddClaim(new Claim(ClaimTypes.Name, principal.UserDetails));
      identity.AddClaims(principal.UserRoles.Select(r => new Claim(ClaimTypes.Role, r)));

      return new ClaimsPrincipal(identity);
  }
}

Quando um usuário está conectado, o x-ms-client-principal cabeçalho é adicionado às solicitações de informações do usuário por meio dos nós de borda dos Aplicativos Web estáticos.

Nota

O x-ms-client-principal cabeçalho acessível na função API não contém a claims matriz.

1 A API de busca e o operador await não são suportados no Internet Explorer.

Próximos passos

Definir definições da aplicação