ユーザー画像を変更する

ユーザーメタデータを使用してユーザーの picture フィールドを変更する方法と、すべてのユーザーに対するデフォルトの画像を変更する方法を説明します。

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

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

​

Management API を使用する

user.picture 属性は、Google、Facebook、X など、Auth0 以外の IDプロバイダー によって提供される場合、直接編集することはできません。この属性を編集するには、ユーザー属性がユーザープロフィールの作成時にのみ IDプロバイダーから更新されるように、Auth0 との接続同期を設定する必要があります。詳しくは、ユーザープロフィール更新のための IDプロバイダー接続の設定 を参照してください。そうすると、ルート属性を個別に編集したり、Management API を使用して一括インポートで編集したりできるようになります。詳しくは、ユーザーの一括インポート を参照してください。

また、ユーザーの picture 属性を保存するために metadata を使用することもできます。たとえば、アプリでプロフィール画像をアップロードできる場合は、画像のアップロード後に、その 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 のわかりやすい 名前 (たとえば Change user pictures) を入力し、Action を Login フローに追加するために Login / Post Login トリガーを選択して、Create を選択します。

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

   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. Actions Code Editor のサイドバーで Test (再生アイコン) を選択し、Run を選択して コードをテスト します。

5. Action を本番で有効にする準備ができたら、Deploy を選択します。

最後に、作成した Action を Login フロー に追加します。Actions をフローにアタッチする方法については、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 などの外部 IDプロバイダーによるログインから取得される可能性のある picture プロパティを上書きします。

​

制限事項

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

​

詳細情報

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