Passer au contenu principal
Auth0 normalise les propriétés de profil courantes dans le profil utilisateur, y compris les champs name, picture et d’autres encore. Le champ picture est renseigné à partir soit de la photo de profil du fournisseur social, soit de l’image Gravatar associée à l’adresse de courriel de l’utilisateur. Par défaut, tous les utilisateurs de la base de données auront une image de remplacement avec leurs initiales. Lorsque vous authentifiez l’utilisateur, ce champ est désigné par user.picture.

Utiliser la Management API

L’attribut user.picture ne peut pas être modifié directement lorsqu’il est fourni par des 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 une connexion de fournisseur d’identité pour les mises à jour du profil utilisateur. Les attributs racine pourront ensuite être modifiés individuellement ou au moyen d’une importation groupée à l’aide de la . Pour en savoir plus, consultez Importation groupée d’utilisateurs. Vous pouvez aussi utiliser les métadonnées pour stocker l’attribut picture des utilisateurs. Par exemple, si votre application permet de téléverser des pictures de profil, une fois la picture téléversée, vous pouvez définir l’URL de la picture dans user.user_metadata.picture :

Utiliser Actions

Pour vous assurer que la picture provenant de user_metadata est renvoyée dans le , vous devrez créer une nouvelle Action afin de 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 la picture provenant de user_metadata est renvoyée dans la revendication picture de l’ID Token.
  1. Accédez à Auth0 Dashboard > Actions > Library, puis sélectionnez Build Custom.
  2. Entrez un Name descriptif pour votre Action (par exemple, Change user pictures), sélectionnez le déclencheur Login / Post Login puisque vous ajouterez l’Action au flux de connexion, puis sélectionnez Create.
  3. Repérez l’éditeur de code Actions, 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) {
        // Return the persisted user_metadata.picture in the ID token
        api.idToken.setCustomClaim("picture", picture)
      }
    };
    
  4. Dans la barre latérale de l’éditeur de code Actions, sélectionnez Test (icône de lecture), puis sélectionnez Run pour tester votre code.
  5. Lorsque vous êtes prêt à déployer l’Action, sélectionnez Deploy.
Enfin, ajoutez l’Action que vous avez créée au Login Flow. Pour savoir comment associer des Actions à des Flows, consultez la section « Attacher l’Action à un flux » dans Créer votre première Action.

Modifier la picture par défaut pour tous les utilisateurs

Pour modifier la picture par défaut de tous les utilisateurs qui n’ont pas défini 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, la picture personnalisée est renvoyée dans l’ID Token et remplace toute propriété picture pouvant provenir d’une connexion via un fournisseur d’identité externe, comme Google.

Limites

L’espace de stockage de données d’Auth0 est limité. Pour éviter que les données de votre application ne dépassent ces limites, nous vous recommandons d’utiliser une base de données externe pour stocker les photos des utilisateurs. Vous pourrez ainsi limiter l’espace de stockage de données dans Auth0 et utiliser une base de données externe plus efficace pour stocker les données supplémentaires. Pour en savoir plus, consultez Stockage des données utilisateur.

En savoir plus