ユーザーのプロフィール画像を変更する

ユーザーのメタデータを使ってユーザーのプロフィール画像フィールドを変更する方法と、すべてのユーザーのデフォルトのプロフィール画像を変更する方法を学びます。

Auth0 は、ユーザープロファイル内の一般的なプロファイル属性を正規化します。これには、name、picture フィールドなどが含まれます。picture フィールドには、social provider のプロフィール画像、またはユーザーのメールアドレスに関連付けられた Gravatar 画像が設定されます。

既定では、すべての Database ユーザーに、イニシャル入りのプレースホルダー画像が設定されます。ユーザーを認証すると、この picture フィールドは user.picture として参照されます。

​

Management API を使用する

user.picture 属性は、Google、Facebook、X など、Auth0 以外のアイデンティティプロバイダーから提供される場合、直接編集することはできません。この属性を編集するには、ユーザー属性がユーザープロファイルの作成時にのみアイデンティティプロバイダーから更新されるよう、Auth0 との接続同期を設定する必要があります。詳しくは、Configure Identity Provider Connection for User Profile Updates をお読みください。これにより、ルート属性を個別に編集したり、Management API を使用した一括インポートで編集したりできるようになります。詳しくは、Bulk User Imports をお読みください。

また、ユーザーのプロフィール画像属性を保存するためにメタデータを使用することもできます。たとえば、アプリでプロフィール画像をアップロードできる場合は、画像のアップロード後にその URL を user.user_metadata.picture に設定できます。

​

Actions を使用する

user_metadata のプロフィール画像が ID トークン に含まれて返されるようにするには、event.user.user_metadata.picture 属性が存在するかどうかを確認し、存在する場合は user.picture 属性をその値に置き換える新しい Action を作成する必要があります。これにより、user_metadata のプロフィール画像が ID トークンの picture クレームで返されるようになります。

1. Auth0 Dashboard > Actions > Library に移動し、Build Custom を選択します。

2. Action のわかりやすい Name を入力し (たとえば Change user pictures) 、Action をログインフローに追加するため Login / Post Login トリガーを選択して、Create を選択します。

3. Actions Code Editor を開き、次の JavaScript コードをコピーして貼り付け、変更を保存するために Save Draft を選択します。

   exports.onExecutePostLogin = async (event, api) => {
     const { picture } = event.user.user_metadata;
     if (picture) {
       // 永続化された user_metadata.picture を ID トークンで返す
       api.idToken.setCustomClaim("picture", picture)
     }
   };
   

4. Actions Code Editor のサイドバーで Test (再生アイコン) を選択し、続けて Run を選択してコードをテストします。

5. Action を本番環境に反映する準備ができたら、Deploy を選択します。

最後に、作成した Action を Login Flow に追加します。Actions を Flows に関連付ける方法については、Write Your First Action の「Attach the Action to a flow」セクションを参照してください。

​

プロファイル画像を設定していないすべてのユーザーのデフォルトのプロフィール画像を変更する

プロファイル画像を設定していないすべてのユーザーのデフォルトのプロフィール画像を変更するには、Action を使用できます。たとえば、次のようにします。

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

この Action では、カスタムのプロフィール画像が ID トークンに含まれて返され、Google などの外部アイデンティティプロバイダーでのログイン時に渡される可能性のある picture プロパティよりも優先されます。

​

制限事項

Auth0 のデータストアには制限があるため、アプリケーションのデータが上限を超えないよう、ユーザーのプロフィール画像は外部データベースに保存することをお勧めします。これにより、Auth0 のデータストアを最小限に抑えつつ、追加データの保存にはより効率的な外部データベースを利用できます。詳しくは、ユーザーデータの保存を参照してください。

​

詳しくはこちら

• ユーザープロファイルの構造
• ユーザープロファイルのルート属性
• ユーザープロファイルにおけるメタデータの仕組み
• Management API を使用してメタデータを管理する
• ルールを使用してメタデータを管理する
• ユーザーの一括インポート