> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> Aprenda a usar los metadatos del usuario para cambiar el campo de imagen de un usuario y la imagen predeterminada de todos los usuarios.

# Cambiar las imágenes de los usuarios

export const AuthCodeGroup = ({children, dropdown}) => {
  const [processedChildren, setProcessedChildren] = useState(children);
  useEffect(() => {
    let unsubscribe = null;
    function init() {
      unsubscribe = window.autorun(() => {
        const processChildren = node => {
          if (typeof node === "string") {
            let processedNode = node;
            for (const [key, value] of window.rootStore.variableStore.values.entries()) {
              const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
              processedNode = processedNode.replaceAll(new RegExp(escapedKey, "g"), value);
            }
            return processedNode;
          } else if (Array.isArray(node)) {
            return node.map(processChildren);
          } else if (node && node.props && node.props.children) {
            return {
              ...node,
              props: {
                ...node.props,
                children: processChildren(node.props.children)
              }
            };
          }
          return node;
        };
        setProcessedChildren(processChildren(children));
      });
    }
    if (window.rootStore) {
      init();
    } else {
      window.addEventListener("adu:storeReady", init);
    }
    return () => {
      window.removeEventListener("adu:storeReady", init);
      unsubscribe?.();
    };
  }, [children]);
  return <CodeGroup dropdown={dropdown}>{processedChildren}</CodeGroup>;
};

export const AuthCodeBlock = ({filename, icon, language, highlight, children}) => {
  const [displayText, setDisplayText] = useState(children);
  const [copyText, setCopyText] = useState(children);
  const wrapperRef = React.useRef(null);
  useEffect(() => {
    let unsubscribe = null;
    function init() {
      if (!window.autorun || !window.rootStore) {
        return;
      }
      unsubscribe = window.autorun(() => {
        let processedChildrenForDisplay = children;
        let processedChildrenForCopy = children;
        for (const [key, value] of window.rootStore.variableStore.values.entries()) {
          const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
          let displayValue = value;
          if (key === "{yourClientSecret}" && value !== "{yourClientSecret}") {
            displayValue = value.substring(0, 3) + "*****ENMASCARADO*****";
          }
          processedChildrenForDisplay = processedChildrenForDisplay.replaceAll(new RegExp(escapedKey, "g"), displayValue);
          processedChildrenForCopy = processedChildrenForCopy.replaceAll(new RegExp(escapedKey, "g"), value);
        }
        setDisplayText(processedChildrenForDisplay);
        setCopyText(processedChildrenForCopy);
      });
    }
    if (window.rootStore) {
      init();
    } else {
      window.addEventListener("adu:storeReady", init);
    }
    return () => {
      window.removeEventListener("adu:storeReady", init);
      unsubscribe?.();
    };
  }, [children]);
  useEffect(() => {
    if (!wrapperRef.current) return;
    const originalWriteText = navigator.clipboard.writeText.bind(navigator.clipboard);
    let isOverriding = false;
    const handleClick = e => {
      const button = e.target.closest('[data-testid="copy-code-button"]');
      if (!button || !wrapperRef.current.contains(button)) return;
      isOverriding = true;
      navigator.clipboard.writeText = text => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
          return originalWriteText(copyText);
        }
        return originalWriteText(text);
      };
      setTimeout(() => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
        }
      }, 100);
    };
    const wrapper = wrapperRef.current;
    wrapper.addEventListener('click', handleClick, true);
    return () => {
      wrapper.removeEventListener('click', handleClick, true);
      if (navigator.clipboard.writeText !== originalWriteText) {
        navigator.clipboard.writeText = originalWriteText;
      }
    };
  }, [copyText]);
  return <div ref={wrapperRef}>
      <CodeBlock filename={filename} icon={icon} language={language} lines highlight={highlight}>
        {displayText}
      </CodeBlock>
    </div>;
};

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

<div id="use-the-management-api">
  ## Use la Management API
</div>

El atributo `user.picture` no se puede editar directamente cuando lo proporcionan <Tooltip tip="Proveedor de identidad (IdP): servicio que almacena y administra identidades digitales." cta="Ver glosario" href="/es/docs/glossary?term=identity+providers">proveedores de identidad</Tooltip> 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](/es/docs/manage-users/user-accounts/user-profiles/configure-connection-sync-with-auth0). Después, los atributos raíz se podrán editar individualmente o mediante importación masiva con la <Tooltip tip="Management API: un producto que permite a los clientes realizar tareas administrativas." cta="Ver glosario" href="/es/docs/glossary?term=Management+API">Management API</Tooltip>. Para obtener más información, consulte [Bulk User Imports](/es/docs/manage-users/user-migration/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`:

<AuthCodeGroup>
  ```bash cURL theme={null}
  curl --request PATCH \
    --url 'https://{yourDomain}/api/v2/users/USER_ID' \
    --header 'authorization: Bearer MGMT_API_ACCESS_TOKEN' \
    --header 'content-type: application/json' \
    --data '{"user_metadata": {"picture": "https://example.com/some-image.png"}}'
  ```

  ```csharp C# theme={null}
  var client = new RestClient("https://{yourDomain}/api/v2/users/USER_ID");
  var request = new RestRequest(Method.PATCH);
  request.AddHeader("authorization", "Bearer MGMT_API_ACCESS_TOKEN");
  request.AddHeader("content-type", "application/json");
  request.AddParameter("application/json", "{"user_metadata": {"picture": "https://example.com/some-image.png"}}", ParameterType.RequestBody);
  IRestResponse response = client.Execute(request);
  ```

  ```go Go theme={null}
  package main

  import (
  	"fmt"
  	"strings"
  	"net/http"
  	"io/ioutil"
  )

  func main() {

  	url := "https://{yourDomain}/api/v2/users/USER_ID"

  	payload := strings.NewReader("{"user_metadata": {"picture": "https://example.com/some-image.png"}}")

  	req, _ := http.NewRequest("PATCH", url, payload)

  	req.Header.Add("authorization", "Bearer MGMT_API_ACCESS_TOKEN")
  	req.Header.Add("content-type", "application/json")

  	res, _ := http.DefaultClient.Do(req)

  	defer res.Body.Close()
  	body, _ := ioutil.ReadAll(res.Body)

  	fmt.Println(res)
  	fmt.Println(string(body))

  }
  ```

  ```java Java theme={null}
  HttpResponse<String> response = Unirest.patch("https://{yourDomain}/api/v2/users/USER_ID")
    .header("authorization", "Bearer MGMT_API_ACCESS_TOKEN")
    .header("content-type", "application/json")
    .body("{"user_metadata": {"picture": "https://example.com/some-image.png"}}")
    .asString();
  ```

  ```javascript Node.JS theme={null}
  var axios = require("axios").default;

  var options = {
    method: 'PATCH',
    url: 'https://{yourDomain}/api/v2/users/USER_ID',
    headers: {
      authorization: 'Bearer MGMT_API_ACCESS_TOKEN',
      'content-type': 'application/json'
    },
    data: {user_metadata: {picture: 'https://example.com/some-image.png'}}
  };

  axios.request(options).then(function (response) {
    console.log(response.data);
  }).catch(function (error) {
    console.error(error);
  });
  ```

  ```php PHP theme={null}
  $curl = curl_init();

  curl_setopt_array($curl, [
    CURLOPT_URL => "https://{yourDomain}/api/v2/users/USER_ID",
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_ENCODING => "",
    CURLOPT_MAXREDIRS => 10,
    CURLOPT_TIMEOUT => 30,
    CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
    CURLOPT_CUSTOMREQUEST => "PATCH",
    CURLOPT_POSTFIELDS => "{"user_metadata": {"picture": "https://example.com/some-image.png"}}",
    CURLOPT_HTTPHEADER => [
      "authorization: Bearer MGMT_API_ACCESS_TOKEN",
      "content-type: application/json"
    ],
  ]);

  $response = curl_exec($curl);
  $err = curl_error($curl);

  curl_close($curl);

  if ($err) {
    echo "cURL Error #:" . $err;
  } else {
    echo $response;
  }
  ```

  ```python Python theme={null}
  import http.client

  conn = http.client.HTTPSConnection("")

  payload = "{"user_metadata": {"picture": "https://example.com/some-image.png"}}"

  headers = {
      'authorization': "Bearer MGMT_API_ACCESS_TOKEN",
      'content-type': "application/json"
      }

  conn.request("PATCH", "/{yourDomain}/api/v2/users/USER_ID", payload, headers)

  res = conn.getresponse()
  data = res.read()

  print(data.decode("utf-8"))
  ```

  ```ruby Ruby theme={null}
  require 'uri'
  require 'net/http'
  require 'openssl'

  url = URI("https://{yourDomain}/api/v2/users/USER_ID")

  http = Net::HTTP.new(url.host, url.port)
  http.use_ssl = true
  http.verify_mode = OpenSSL::SSL::VERIFY_NONE

  request = Net::HTTP::Patch.new(url)
  request["authorization"] = 'Bearer MGMT_API_ACCESS_TOKEN'
  request["content-type"] = 'application/json'
  request.body = "{"user_metadata": {"picture": "https://example.com/some-image.png"}}"

  response = http.request(request)
  puts response.read_body
  ```
</AuthCodeGroup>

<div id="use-actions">
  ## Usar Actions
</div>

Para garantizar que la imagen de `user_metadata` se devuelva en el <Tooltip tip="ID Token: Credencial destinada al propio cliente, en lugar de para acceder a un recurso." cta="Ver glosario" href="/es/docs/glossary?term=ID+Token">ID Token</Tooltip>, necesitaremos [crear una nueva Action](/es/docs/customize/actions/write-your-first-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](https://manage.auth0.com/#/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:

   ```js lines theme={null}
   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](/es/docs/customize/actions/test-actions).

5. Cuando quieras publicar la Action, selecciona **Deploy**.

Por último, añade la Action que creaste al [flujo de inicio de sesión](https://manage.auth0.com/#/actions/flows/login/). 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](/es/docs/customize/actions/write-your-first-action).

<div id="change-default-picture-for-all-users">
  ## Cambiar la imagen predeterminada de todos los usuarios
</div>

Para cambiar la imagen predeterminada de los usuarios que no hayan establecido una foto de perfil, puede usar una Action. Por ejemplo:

```js lines theme={null}
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.

<div id="limitations">
  ## Limitaciones
</div>

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](/es/docs/secure/security-guidance/data-security/user-data-storage).

<div id="learn-more">
  ## Más información
</div>

* [Estructura del perfil del usuario](/es/docs/manage-users/user-accounts/user-profiles/user-profile-structure)
* [Atributos raíz del perfil del usuario](/es/docs/manage-users/user-accounts/user-profiles/root-attributes)
* [Comprenda cómo funcionan los metadatos en los perfiles de usuario](/es/docs/manage-users/user-accounts/metadata)
* [Administre metadatos mediante la Management API](/es/docs/manage-users/user-accounts/metadata/manage-metadata-api)
* [Administre metadatos con Rules](/es/docs/manage-users/user-accounts/metadata/manage-metadata-rules)
* [Importación masiva de usuarios](/es/docs/manage-users/user-migration/bulk-user-imports)