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

> Apprenez à utiliser les métadonnées utilisateur pour modifier le champ picture d’un utilisateur ainsi que la photo par défaut de tous les utilisateurs.

# Modifier les photos de profil des utilisateurs

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) + "*****MASQUÉ*****";
          }
          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 normalise les propriétés de profil courantes dans le profil utilisateur, notamment les champs `name`, `picture` et d’autres. Le champ `picture` est renseigné soit à partir de la photo de profil du fournisseur social, soit à partir de l’image Gravatar associée à l’adresse courriel de l’utilisateur.

Par défaut, tous les utilisateurs de base de données auront une image de remplacement avec leurs initiales. Lorsque vous authentifiez l’utilisateur, ce champ `picture` est appelé `user.picture`.

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

L’attribut `user.picture` ne peut pas être modifié directement lorsqu’il est fourni par des <Tooltip tip="Fournisseur d’identité (IdP) : service qui stocke et gère les identités numériques." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=identity+providers">fournisseurs d’identité</Tooltip> autres qu’Auth0, comme Google, Facebook ou X. Pour modifier cet attribut, vous devez configurer la synchronisation de votre connexion avec Auth0 afin que les attributs de l’utilisateur soient mis à jour à partir du fournisseur d’identité uniquement lors de la création du profil utilisateur. Pour en savoir plus, consultez [Configurer la synchronisation de la connexion du fournisseur d’identité pour les mises à jour du profil utilisateur](/docs/fr-ca/manage-users/user-accounts/user-profiles/configure-connection-sync-with-auth0). Les attributs racine pourront ensuite être modifiés individuellement ou par importation en bloc à l’aide de la <Tooltip tip="Management API : API administrative qui permet aux clients d’effectuer des tâches de gestion." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=Management+API">Management API</Tooltip>. Pour en savoir plus, consultez [Importations en bloc d’utilisateurs](/docs/fr-ca/manage-users/user-migration/bulk-user-imports).

Vous pouvez également utiliser les métadonnées pour stocker l’attribut picture des utilisateurs. Par exemple, si votre application permet de téléverser des photos de profil, une fois la photo téléversée, vous pouvez définir l’URL de la photo dans `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_PEER

  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">
  ## Utiliser Actions
</div>

Pour vous assurer que l’image de `user_metadata` est renvoyée dans le <Tooltip tip="ID Token : justificatif destiné au client lui-même plutôt qu’à l’accès à une ressource." cta="Voir le glossaire" href="/docs/fr-ca/glossary?term=ID+Token">ID Token</Tooltip>, vous devrez [créer une nouvelle Action](/docs/fr-ca/customize/actions/write-your-first-action) pour vérifier si l’attribut `event.user.user_metadata.picture` est présent et, le cas échéant, remplacer l’attribut `user.picture` par cette valeur. Cela garantit que l’image de `user_metadata` est renvoyée dans le claim `picture` de l’ID Token.

1. Accédez à [Auth0 Dashboard > Actions > Library](https://manage.auth0.com/#/actions/library), puis sélectionnez **Build Custom**.

2. Saisissez un **Name** descriptif pour votre Action (par exemple, `Change user pictures`), sélectionnez le trigger `Login / Post Login`, puisque vous ajouterez l’Action au Login flow, puis sélectionnez **Create**.

3. Repérez le Actions Code Editor, copiez-y le code JavaScript suivant, puis sélectionnez **Save Draft** pour enregistrer vos modifications :

   ```js lines theme={null}
   exports.onExecutePostLogin = async (event, api) => {
     const { picture } = event.user.user_metadata;
     if (picture) {
       // Renvoie user_metadata.picture enregistrée dans l’ID Token
       api.idToken.setCustomClaim("picture", picture)
     }
   };
   ```

4. Dans la barre latérale du Actions Code Editor, sélectionnez Test (icône de lecture), puis sélectionnez **Run** pour [tester votre code](/docs/fr-ca/customize/actions/test-actions).

5. Lorsque vous êtes prêt à mettre l’Action en production, sélectionnez **Deploy**.

Enfin, ajoutez l’Action que vous avez créée au [Login Flow](https://manage.auth0.com/#/actions/flows/login/). Pour savoir comment attacher des Actions à des Flows, consultez la section « Attach the Action to a flow » dans [Write Your First Action](/docs/fr-ca/customize/actions/write-your-first-action).

<div id="change-default-picture-for-all-users">
  ## Changer la photo par défaut pour tous les utilisateurs
</div>

Pour changer la photo par défaut de tous les utilisateurs qui n’ont pas de photo de profil, vous pouvez utiliser une Action. Par exemple :

```js lines theme={null}
exports.onExecutePostLogin = async (event, api) => {
  const DEFAULT_PROFILE_IMAGE = '{yourDefaultImageUrl}';
  api.idToken.setCustomClaim("picture", {defaultProfileImage});
};
```

Dans cette Action, l’image de profil personnalisée est incluse dans le ID Token et remplace toute propriété `picture` pouvant provenir d’une connexion via un fournisseur d’identité externe, comme Google.

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

Le stockage de données Auth0 est limité et, pour éviter que les données de votre application ne dépassent les limites permises, nous vous recommandons d’utiliser une base de données externe pour stocker les images de profil des utilisateurs. Cela vous permet de limiter la taille de votre stockage de données Auth0 et d’utiliser une base de données externe plus efficace pour conserver les données supplémentaires. Pour en savoir plus, consultez [User Data Storage](/docs/fr-ca/secure/security-guidance/data-security/user-data-storage).

<div id="learn-more">
  ## En savoir plus
</div>

* [Structure du profil utilisateur](/docs/fr-ca/manage-users/user-accounts/user-profiles/user-profile-structure)
* [Attributs racine du profil utilisateur](/docs/fr-ca/manage-users/user-accounts/user-profiles/root-attributes)
* [Comprendre le fonctionnement des métadonnées dans les profils utilisateur](/docs/fr-ca/manage-users/user-accounts/metadata)
* [Gérer les métadonnées à l’aide de la Management API](/docs/fr-ca/manage-users/user-accounts/metadata/manage-metadata-api)
* [Gérer les métadonnées avec Rules](/docs/fr-ca/manage-users/user-accounts/metadata/manage-metadata-rules)
* [Importation en bloc d’utilisateurs](/docs/fr-ca/manage-users/user-migration/bulk-user-imports)