Acceso a la información del usuario en Azure Static Web Apps

Azure Static Web Apps proporciona información de usuario relacionada con la autenticación a través de un punto de conexión de acceso directo y funciones de API.

Muchas interfaces de usuario dependen en gran medida de los datos de autenticación del usuario. El punto de conexión de acceso directo es una API de utilidad que expone información de usuario sin necesidad de implementar una función personalizada. Además de ser práctico, el punto de conexión de acceso directo no está sujeto a retrasos por arranque en frío asociados a las arquitecturas sin servidor.

Datos de entidad de seguridad del cliente

El objeto de datos de la entidad de seguridad de cliente expone información de identificación del usuario a la aplicación. Las siguientes propiedades están incluidas en el objeto de entidad de seguridad de cliente:

Propiedad	Descripción
identityProvider	Nombre del proveedor de identidades.
userId	Identificador único específico de Azure Static Web Apps para el usuario. El valor es único para cada aplicación. Por ejemplo, el mismo usuario devuelve un valor userId diferente en un recurso de Static Web Apps diferente. El valor se conserva durante la duración de un usuario. Si elimina y vuelve a agregar el mismo usuario a la aplicación, se genera un nuevo userId.
userDetails	Nombre de usuario o dirección de correo electrónico del usuario. Algunos proveedores devuelven la dirección de correo electrónico del usuario, mientras que otros envían el identificador de usuario.
userRoles	Matriz de los roles asignados del usuario.
claims	Matriz de notificaciones devueltas por el proveedor de autenticación personalizado. Solo se puede acceder al punto de conexión de acceso directo.

El ejemplo siguiente es una muestra de un objeto de entidad de seguridad de cliente:

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

Punto de conexión de acceso directo

Puede enviar una solicitud GET a la ruta /.auth/me y recibir acceso directo a los datos de la entidad de seguridad del cliente. Cuando el estado de la vista dependa de los datos de autorización, use este método para obtener el mejor rendimiento.

En el caso de los usuarios que han iniciado sesión, la respuesta contiene un objeto JSON de entidad de seguridad de cliente. Las solicitudes de los usuarios sin autenticar devuelven null.

Con la API Fetch¹, puede tener acceso a los datos de la entidad de seguridad del cliente con la siguiente sintaxis.

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

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

Funciones de API

Las funciones de API disponibles en Static Web Apps a través del back-end de Azure Functions tienen acceso a la misma información de usuario que una aplicación cliente, con la excepción de la matriz claims. Aunque la API recibe información de identificación del usuario, no realiza sus propias comprobaciones si el usuario está autenticado o si coincide con un rol requerido. Las reglas de control de acceso se definen en el archivo staticwebapp.config.json.

JavaScript

Los datos de la entidad de seguridad del cliente se pasan a las funciones de API en el encabezado de solicitud x-ms-client-principal. Los datos de la entidad de seguridad del cliente se envían como una cadena con codificación Base64 que contiene un objeto JSON serializado.

En la función de ejemplo siguiente se muestra cómo leer y devolver la información del usuario.

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),
    },
  };
};

Suponiendo que la función anterior se denomine user, puede usar la API Fetch¹ del explorador para tener acceso a la respuesta de la API mediante la siguiente sintaxis.

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

console.log(await getUser());

C#

En una función de C#, la información de usuario está disponible en el encabezado x-ms-client-principal, que se puede deserializar en un objeto ClaimsPrincipal o en su propio tipo personalizado. En el código siguiente se muestra cómo desempaquetar el encabezado en un tipo intermediario, ClientPrincipal, que posteriormente se convierte en una instancia ClaimsPrincipal.

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);
  }
}

Cuando un usuario se registra, el encabezado x-ms-client-principal se agrega a las solicitudes de información de usuario a través de los nodos perimetrales de Static Web Apps.

Nota:

El x-ms-client-principal encabezado accesible en la función de API no contiene la claims matriz.

¹ La API Fetch y el operador Await no son compatibles con Internet Explorer.

Pasos siguientes

Configuración de aplicaciones