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

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

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

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) + "*****MASKED*****";
          }
          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 は、ユーザープロファイル内の一般的なプロファイル属性を正規化します。これには、`name`、`picture` フィールドなどが含まれます。`picture` フィールドには、social provider のプロフィール画像、またはユーザーのメールアドレスに関連付けられた Gravatar 画像が設定されます。

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

<div id="use-the-management-api">
  ## Management API を使用する
</div>

`user.picture` 属性は、Google、Facebook、X など、Auth0 以外の<Tooltip tip="Identity Provider (IdP): デジタルアイデンティティを保存および管理するサービス。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=identity+providers">アイデンティティプロバイダー</Tooltip>から提供される場合、直接編集することはできません。この属性を編集するには、ユーザー属性がユーザープロファイルの作成時にのみアイデンティティプロバイダーから更新されるよう、Auth0 との接続同期を設定する必要があります。詳しくは、[Configure Identity Provider Connection for User Profile Updates](/docs/ja-jp/manage-users/user-accounts/user-profiles/configure-connection-sync-with-auth0) をお読みください。これにより、ルート属性を個別に編集したり、<Tooltip tip="Management API: お客様が管理タスクを実行できるようにする製品。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=Management+API">Management API</Tooltip> を使用した一括インポートで編集したりできるようになります。詳しくは、[Bulk User Imports](/docs/ja-jp/manage-users/user-migration/bulk-user-imports) をお読みください。

また、ユーザーのプロフィール画像属性を保存するためにメタデータを使用することもできます。たとえば、アプリでプロフィール画像をアップロードできる場合は、画像のアップロード後にその URL を `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">
  ## Actions を使用する
</div>

`user_metadata` のプロフィール画像が <Tooltip tip="ID トークン: リソースへのアクセスではなく、クライアント自体のための資格情報です。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=ID+Token">ID トークン</Tooltip> に含まれて返されるようにするには、`event.user.user_metadata.picture` 属性が存在するかどうかを確認し、存在する場合は `user.picture` 属性をその値に置き換える[新しい Action を作成](/docs/ja-jp/customize/actions/write-your-first-action)する必要があります。これにより、`user_metadata` のプロフィール画像が ID トークンの `picture` クレームで返されるようになります。

1. [Auth0 Dashboard > Actions > Library](https://manage.auth0.com/#/actions/library) に移動し、**Build Custom** を選択します。

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

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

   ```js lines theme={null}
   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** を選択して[コードをテスト](/docs/ja-jp/customize/actions/test-actions)します。

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

最後に、作成した Action を [Login Flow](https://manage.auth0.com/#/actions/flows/login/) に追加します。Actions を Flows に関連付ける方法については、[Write Your First Action](/docs/ja-jp/customize/actions/write-your-first-action) の「Attach the Action to a flow」セクションを参照してください。

<div id="change-default-picture-for-all-users">
  ## プロファイル画像を設定していないすべてのユーザーのデフォルトのプロフィール画像を変更する
</div>

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

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

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

<div id="limitations">
  ## 制限事項
</div>

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

<div id="learn-more">
  ## 詳しくはこちら
</div>

* [ユーザープロファイルの構造](/docs/ja-jp/manage-users/user-accounts/user-profiles/user-profile-structure)
* [ユーザープロファイルのルート属性](/docs/ja-jp/manage-users/user-accounts/user-profiles/root-attributes)
* [ユーザープロファイルにおけるメタデータの仕組み](/docs/ja-jp/manage-users/user-accounts/metadata)
* [Management API を使用してメタデータを管理する](/docs/ja-jp/manage-users/user-accounts/metadata/manage-metadata-api)
* [ルールを使用してメタデータを管理する](/docs/ja-jp/manage-users/user-accounts/metadata/manage-metadata-rules)
* [ユーザーの一括インポート](/docs/ja-jp/manage-users/user-migration/bulk-user-imports)