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.

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

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. 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.

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['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 Fetch1 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());

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.

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

Pasos siguientes