Modifier les photos de profil des utilisateurs

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.

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.

​

Utiliser la Management API

L’attribut user.picture ne peut pas être modifié directement lorsqu’il est fourni par des fournisseurs d’identité 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. Les attributs racine pourront ensuite être modifiés individuellement ou par importation en bloc à l’aide de la Management API. Pour en savoir plus, consultez Importations en bloc d’utilisateurs.

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 :

​

Utiliser Actions

Pour vous assurer que l’image de user_metadata est renvoyée dans le ID Token, vous devrez créer une nouvelle 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, 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 :

   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.

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. Pour savoir comment attacher des Actions à des Flows, consultez la section « Attach the Action to a flow » dans Write Your First Action.

​

Changer la photo par défaut pour tous les utilisateurs

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 :

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.

​

Limitations

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.

​

En savoir plus

• Structure du profil utilisateur
• Attributs racine du profil utilisateur
• Comprendre le fonctionnement des métadonnées dans les profils utilisateur
• Gérer les métadonnées à l’aide de la Management API
• Gérer les métadonnées avec Rules
• Importation en bloc d’utilisateurs