Saltar al contenido principal
Auth0 normaliza las propiedades comunes del perfil en el perfil de usuario; esto incluye el campo name, el campo picture y otros más. El campo de imagen se rellena con la foto de perfil del proveedor social o con la imagen de Gravatar asociada al correo electrónico del usuario. De forma predeterminada, todos los usuarios de base de datos tendrán una imagen provisional con sus iniciales. Cuando autenticas al usuario, se hace referencia a este campo de imagen como user.picture.

​
Use la Management API

El atributo user.picture no se puede editar directamente cuando lo proporcionan distintos de Auth0, como Google, Facebook o X. Para editar este atributo, debe configurar la sincronización de su conexión con Auth0 para que los atributos del usuario se actualicen desde el proveedor de identidad solo al crear el perfil del usuario. Para obtener más información, consulte Configure Identity Provider Connection for User Profile Updates. Después, los atributos raíz se podrán editar individualmente o mediante importación masiva con la . Para obtener más información, consulte Bulk User Imports. Como alternativa, puede usar metadatos para almacenar el atributo de imagen de los usuarios. Por ejemplo, si su aplicación ofrece una forma de cargar fotos de perfil, una vez cargada la imagen, puede establecer la URL de la imagen en user.user_metadata.picture:

​
Usar Actions

Para garantizar que la imagen de user_metadata se devuelva en el , necesitaremos crear una nueva Action para comprobar si el atributo event.user.user_metadata.picture está presente y, de ser así, sustituir el atributo user.picture por ese valor. Esto garantiza que la imagen de user_metadata se devuelva en el claim picture del ID Token.
  1. Ve a Auth0 Dashboard > Actions > Library y selecciona Build Custom.
  2. Introduce un Nombre descriptivo para tu Action (por ejemplo, Change user pictures), selecciona el activador Login / Post Login porque vas a añadir la Action al flujo de inicio de sesión y, a continuación, selecciona Create.
  3. Busca el editor de código de Actions, copia en él el siguiente código JavaScript y selecciona Save Draft para guardar los cambios: 
    exports.onExecutePostLogin = async (event, api) => {
  const { picture } = event.user.user_metadata;
  if (picture) {
    // Devuelve el valor persistido de user_metadata.picture en el ID token
    api.idToken.setCustomClaim("picture", picture)
  }
};
  4. En la barra lateral del editor de código de Actions, selecciona Test (icono de reproducción) y luego selecciona Run para probar tu código.
  5. Cuando quieras publicar la Action, selecciona Deploy.
Por último, añade la Action que creaste al flujo de inicio de sesión. Para obtener más información sobre cómo adjuntar Actions a los flujos, lee la sección “Adjuntar la Action a un flujo” en Write Your First Action.

​
Cambiar la imagen predeterminada de todos los usuarios

Para cambiar la imagen predeterminada de los usuarios que no hayan establecido una foto de perfil, puede usar una Action. Por ejemplo: 
exports.onExecutePostLogin = async (event, api) => {
  const DEFAULT_PROFILE_IMAGE = '{yourDefaultImageUrl}';
  api.idToken.setCustomClaim("picture", {defaultProfileImage});
};
En esta Action, la imagen personalizada se devuelve en el ID Token y sobrescribe cualquier propiedad picture que pueda provenir del inicio de sesión con un Proveedor de identidad externo, como Google.

​
Limitaciones

El almacén de datos de Auth0 tiene capacidad limitada y, para evitar que los datos de su aplicación superen esos límites, le recomendamos que utilice una base de datos externa para almacenar las imágenes de los usuarios. De este modo, puede mantener reducido el almacén de datos de Auth0 y utilizar una base de datos externa más eficiente para almacenar los datos adicionales. Para obtener más información, lea Almacenamiento de datos de usuario.

​
Más información