> ## Documentation Index
> Fetch the complete documentation index at: https://auth0.com/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>;
};

<Warning>
  RulesとHooksのサポート終了（EOL）日は**2026年11月18日**であり、**2023年10月16**日の時点で作成された新しいテナントは使用できなくなります。Hooksが有効な既存のテナントは、サポート終了までHooksを利用できます。

  今後はActionsに移行して、Auth0の機能を拡張することを強くお勧めします。Actionsを使用すると、豊富な情報やインラインドキュメント、パブリック`npm`パッケージにアクセスして、外部統合を使って全体的な拡張エクスペリエンスを強化することができます。Actionsの詳細については、「[Auth0 Actionsの仕組みを理解する](/docs/ja-jp/customize/actions/actions-overview)」をお読みください。

  当社では、移行の参考資料として、[RulesからActionsへの移行](/docs/ja-jp/customize/actions/migrate/migrate-from-rules-to-actions)と[HooksからActionsへの移行](/docs/ja-jp/customize/actions/migrate/migrate-from-hooks-to-actions)に関するガイドを提供しています。また、専用の「[Actionsへの移行](https://auth0.com/extensibility/movetoactions)」ページでは、機能の比較や[Actionsのデモ](https://www.youtube.com/watch?v=UesFSY1klrI)、その他のリソースを掲載して、円滑な移行をサポートしています。

  RulesとHooksの廃止の詳細については、当社のブログ記事「[RulesとHooksの提供終了について](https://auth0.com/blog/preparing-for-rules-and-hooks-end-of-life/)」をお読みください。
</Warning>

<Warning>
  RulesとHooksの機能は2026年にサポートの終了を予定しているため、新しいルールやフックは、アクションへの移行をテストするためだけに、開発環境内で作成してください。

  RulesからActionsへの移行方法については、「[RulesからActionsに移行する](/docs/ja-jp/customize/actions/migrate/migrate-from-rules-to-actions)」をお読みください。HooksからActionsへの移行方法については、「[HooksからActionsに移行する](/docs/ja-jp/customize/actions/migrate/migrate-from-hooks-to-actions)」をお読みください。
</Warning>

[フック](/docs/ja-jp/customize/hooks)を追加することで、スコープを変更し、[クライアントの資格情報フロー](/docs/ja-jp/get-started/authentication-and-authorization-flow/client-credentials-flow)で発行されたトークンのカスタムクレームを追加することができます。

フックによって、Node.jsコードを使用したAuth0の動作をカスタマイズすることができます。Auth0プラットフォーム（クライアントの資格情報フローなど）の特定の拡張ポイントに関連付けられた、安全で自己完結型の関数です。Auth0は実行時にフックを呼び出して、カスタムロジックを実行します。

フックは、<Tooltip data-tooltip-id="react-containers-DefinitionTooltip-0" href="/docs/ja-jp/glossary?term=auth0-dashboard" tip="Auth0 Dashboard: サービスを構成するためのAuth0の主製品。" cta="用語集の表示">Auth0 Dashboard</Tooltip>または<Tooltip data-tooltip-id="react-containers-DefinitionTooltip-0" href="/docs/ja-jp/glossary?term=management-api" tip="Management API: 顧客が管理タスクを実行できるようにするための製品。" cta="用語集の表示">Management API</Tooltip>を使って管理できます。

<Warning>
  どの拡張ポイントにも複数のフックを作成できますが、1つの拡張ポイントで同時に有効にできるフックは1つに限られています。同じ拡張ポイントに対してその後作成するフックは、自動的に無効になるため、明示的に有効にしなければなりません。有効なフックは、すべてのアプリケーションとAPIに対して実行されます。
</Warning>

## 前提条件

このチュートリアルを始める前に：

* [APIをAuth0に登録する](/docs/ja-jp/get-started/auth0-overview/set-up-apis)

  * [適切なAPIのアクセス許可を追加](/docs/ja-jp/get-started/apis/add-api-permissions)
* [Auth0にM2Mアプリケーションを登録する](/docs/ja-jp/get-started/auth0-overview/create-applications/machine-to-machine-apps)

  * \*\*［Application Type（アプリケーションの種類）］**に**［Machine to Machine Applications（マシンツーマシンアプリケーション）］\*\*を選択します。
  * 以前に登録したAPIを選択します。
  * M2MアプリケーションがAPIを呼び出せるように認可します。

## ステップ

1. **フックを作成する**：トークンをカスタマイズするフックを作成します。
2. **フックをテストする**：クライアントの資格情報フローを実行し、アクセストークンをデコードすることで、新しいフックをテストします。

### フックを作成する

この例では以下を行います。

* 任意のクレーム（`https://foo.com/claim`）を[アクセストークン](/docs/ja-jp/secure/tokens/access-tokens)に追加する
* 追加の権限を構成済みAPIに追加する

トークンをカスタマイズするフックを作成します。拡張ポイントを選択するよう求められたら、`［Client Credentials Exchange（クライアントの認証情報の交換）］`を選択し、エディターに以下のコードを追加します。

```javascript lines theme={null}
module.exports = function(client, scope, audience, context, cb) {
  var access_token = {};
  access_token['https://foo.com/claim'] = 'bar';
  access_token.scope = scope;
  access_token.scope.push('extra');
  cb(null, access_token);
};
```

<Warning>
  Auth0は、プロファイル情報を[OpenID Connect（OIDC）仕様](https://openid.net/specs/openid-connect-core-1_0.html#StandardClaims)で定義されている構造化クレーム形式で返します。つまり、IDトークンまたはアクセストークンに追加するカスタムクレームは、衝突を避けるために[ガイドラインと制限に従わなければなりません](/docs/ja-jp/secure/tokens/json-web-tokens/create-custom-claims)。
</Warning>

### フックをテストする

作成したフックをテストするには、クライアントの資格情報の交換を実行し、アクセストークンを取得してデコードし、その内容を確認する必要があります。

#### トークンを取得する

トークンを取得するには、`POST`呼び出しを[クライアントの資格情報フローエンドポイント](/docs/api/authentication#client-credentials-flow)に対して行います。CLIENT\_ID、CLIENT\_SECRET、API\_IDENTIFIERの各プレースホルダーの値をアプリケーションのクライアントID、アプリケーションのクライアントシークレット、APIの識別子にそれぞれ、必ず置き換えてください。クライアントIDとクライアントシークレットは[アプリケーション](https://manage.auth0.com/#/applications)設定、API識別子は[API](https://manage.auth0.com/#/apis)設定でそれぞれ確認できます。

<AuthCodeGroup>
  ````bash cURL theme={null}
  curl --request POST \
  --url 'https://{yourDomain}/oauth/token' \
  --header 'content-type: application/x-www-form-urlencoded' \
  --data grant_type=client_credentials \
  --data 'client_id={yourClientId}' \
  --data client_secret={yourClientSecret} \
  --data audience=YOUR_API_IDENTIFIER
  ``` lines
  ```csharp C#
  var client = new RestClient("https://{yourDomain}/oauth/token");
  var request = new RestRequest(Method.POST);
  request.AddHeader("content-type", "application/x-www-form-urlencoded");
  request.AddParameter("application/x-www-form-urlencoded", "grant_type=client_credentials&client_id={yourClientId}&client_secret={yourClientSecret}&audience=YOUR_API_IDENTIFIER", 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}/oauth/token"
  payload := strings.NewReader("grant_type=client_credentials&client_id={yourClientId}&client_secret={yourClientSecret}&audience=YOUR_API_IDENTIFIER")
  req, _ := http.NewRequest("POST", url, payload)
  req.Header.Add("content-type", "application/x-www-form-urlencoded")
  res, _ := http.DefaultClient.Do(req)
  defer res.Body.Close()
  body, _ := ioutil.ReadAll(res.Body)
  fmt.Println(res)
  fmt.Println(string(body))
  }
  ``` lines
  ```java Java
  HttpResponse response = Unirest.post("https://{yourDomain}/oauth/token")
  .header("content-type", "application/x-www-form-urlencoded")
  .body("grant_type=client_credentials&client_id={yourClientId}&client_secret={yourClientSecret}&audience=YOUR_API_IDENTIFIER")
  .asString();
  ````

  ````javascript Node.JS theme={null}
  var axios = require("axios").default;
  var options = {
  method: 'POST',
  url: 'https://{yourDomain}/oauth/token',
  headers: {'content-type': 'application/x-www-form-urlencoded'},
  data: new URLSearchParams({
  grant_type: 'client_credentials',
  client_id: '{yourClientId}',
  client_secret: '{yourClientSecret}',
  audience: 'YOUR_API_IDENTIFIER'
  })
  };
  axios.request(options).then(function (response) {
  console.log(response.data);
  }).catch(function (error) {
  console.error(error);
  });
  ``` lines
  ```objc Obj-C
  #import 
  NSDictionary \*headers = @{ @"content-type": @"application/x-www-form-urlencoded" };
  NSMutableData \*postData = [[NSMutableData alloc] initWithData:[@"grant_type=client_credentials" dataUsingEncoding:NSUTF8StringEncoding]];
  [postData appendData:[@"&client_id={yourClientId}" dataUsingEncoding:NSUTF8StringEncoding]];
  [postData appendData:[@"&client_secret={yourClientSecret}" dataUsingEncoding:NSUTF8StringEncoding]];
  [postData appendData:[@"&audience=YOUR_API_IDENTIFIER" dataUsingEncoding:NSUTF8StringEncoding]];
  NSMutableURLRequest \*request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:@"https://{yourDomain}/oauth/token"]
  cachePolicy:NSURLRequestUseProtocolCachePolicy
  timeoutInterval:10.0];
  [request setHTTPMethod:@"POST"];
  [request setAllHTTPHeaderFields:headers];
  [request setHTTPBody:postData];
  NSURLSession \*session = [NSURLSession sharedSession];
  NSURLSessionDataTask \*dataTask = [session dataTaskWithRequest:request
  completionHandler:^(NSData \*data, NSURLResponse \*response, NSError \*error) {
  if (error) {
  NSLog(@"%@", error);
  } else {
  NSHTTPURLResponse \*httpResponse = (NSHTTPURLResponse \*) response;
  NSLog(@"%@", httpResponse);
  }
  }];
  [dataTask resume];
  ````

  ````php PHP theme={null}
  $curl = curl_init();
  curl_setopt_array($curl, [
  CURLOPT_URL => "https://{yourDomain}/oauth/token",
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_ENCODING => "",
  CURLOPT_MAXREDIRS => 10,
  CURLOPT_TIMEOUT => 30,
  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
  CURLOPT_CUSTOMREQUEST => "POST",
  CURLOPT_POSTFIELDS => "grant_type=client_credentials&client_id={yourClientId}&client_secret={yourClientSecret}&audience=YOUR_API_IDENTIFIER",
  CURLOPT_HTTPHEADER => [
  "content-type: application/x-www-form-urlencoded"
  ],
  ]);
  $response = curl_exec($curl);
  $err = curl_error($curl);
  curl_close($curl);
  if ($err) {
  echo "cURL Error #:" . $err;
  } else {
  echo $response;
  }
  ``` lines
  ```python Python
  import http.client
  conn = http.client.HTTPSConnection("")
  payload = "grant_type=client_credentials&client_id={yourClientId}&client_secret={yourClientSecret}&audience=YOUR_API_IDENTIFIER"
  headers = { 'content-type': "application/x-www-form-urlencoded" }
  conn.request("POST", "/{yourDomain}/oauth/token", 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}/oauth/token")
  http = Net::HTTP.new(url.host, url.port)
  http.use_ssl = true
  http.verify_mode = OpenSSL::SSL::VERIFY_NONE
  request = Net::HTTP::Post.new(url)
  request["content-type"] = 'application/x-www-form-urlencoded'
  request.body = "grant_type=client_credentials&client_id={yourClientId}&client_secret={yourClientSecret}&audience=YOUR_API_IDENTIFIER"
  response = http.request(request)
  puts response.read_body
  ``` lines
  ```swift Swift
  import Foundation
  let headers = ["content-type": "application/x-www-form-urlencoded"]
  let postData = NSMutableData(data: "grant_type=client_credentials".data(using: String.Encoding.utf8)!)
  postData.append("&client_id={yourClientId}".data(using: String.Encoding.utf8)!)
  postData.append("&client_secret={yourClientSecret}".data(using: String.Encoding.utf8)!)
  postData.append("&audience=YOUR_API_IDENTIFIER".data(using: String.Encoding.utf8)!)
  let request = NSMutableURLRequest(url: NSURL(string: "https://{yourDomain}/oauth/token")! as URL,
  cachePolicy: .useProtocolCachePolicy,
  timeoutInterval: 10.0)
  request.httpMethod = "POST"
  request.allHTTPHeaderFields = headers
  request.httpBody = postData as Data
  let session = URLSession.shared
  let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
  if (error != nil) {
  print(error)
  } else {
  let httpResponse = response as? HTTPURLResponse
  print(httpResponse)
  }
  })
  dataTask.resume()
  ````
</AuthCodeGroup>

正常な応答に含まれるもの：

* `access_token`
* 有効期限（秒）（`expires_in`）
* `Bearer`として設定されたトークンのタイプ（`token_type`）
* `extra`権限（`scope`）（フックによって追加されたもの）

```lines theme={null}
HTTP/1.1 200 OK
Content-Type: application/json
{
  "access_token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6Ik5ESTFNa05DTVRGQlJrVTRORVF6UXpFMk1qZEVNVVEzT1VORk5ESTVSVU5GUXpnM1FrRTFNdyJ9.eyJpc3MiOiJodHRwczovL2RlbW8tYWNjb3VudC5hdXRoMC3jb20vIiwic3ViIjoic0FRSlFpQmYxREw0c2lqSVZCb2pFRUZvcmRoa0o4WUNAY2xpZW50cyIsImF1ZCI6ImRlbW8tYWNjb3VudC5hcGkiLCJleHAiOjE0ODc3NjU8NjYsImlhdCI6MTQ4NzY3OTI2Niwic2NvcGUiOiJyZWFkOmRhdGEgZXh0cmEiLCJodHRwczovL2Zvby5jb20vY2xhaW0iOiKoPXIifQ.da-48mHY_7esfLZpvHWWL8sIH1j_2mUYAB49c-B472lCdsNFvpaLoq6OKQyhnqk9_aW_Xhfkusos3FECTrLFvf-qwQK70QtwbkbVye_IuPSTAYdQ2T-XTzGDm9Nmmy5Iwl9rNYLxVs2OoCdfpVMyda0OaI0AfHBgEdKWluTP67OOnV_dF3KpuwtK3dPKWTCo2j9VCa7X1I4h0CNuM79DHhY2wO7sL8WBej7BSNA3N2TUsp_YTWWfrvsr_vVhJf-32G7w_12ms_PNFUwj2C30ZZIPWc-uEkDztyMLdI-lu9q9TLrLdr0dOhfrtfkdeJx4pUSiHdJHf42kg7UAVK6JcA",
  "expires_in": 86400,
  "scope": "extra",
  "token_type": "Bearer"
}
```

#### トークンをデコードする

アクセストークンをデコードし、その内容を確認するための最も簡単な方法は、[JWT.ioデバッガー](https://jwt.io/#debugger-io)を使用する方法です。

アクセストークンをコピーし、エディターに貼り付けます。<Tooltip data-tooltip-id="react-containers-DefinitionTooltip-3" href="/docs/ja-jp/glossary?term=json-web-token" tip="JSON Web Token（JWT）: 二者間のクレームを安全に表現するために使用される標準IDトークン形式（および多くの場合、アクセストークン形式）。" cta="用語集の表示">JWT</Tooltip>は自動的にデコードされ、その内容が表示されます。

**ペイロード**の最後の2項目は共に、フックによって設定されています。

* `"scope": "extra"`
* `"https://foo.com/claim": "bar"`

## もっと詳しく

* [Auth0のフック](/docs/ja-jp/customize/hooks)
* [クライアントの資格情報フロー](/docs/ja-jp/get-started/authentication-and-authorization-flow/client-credentials-flow)
* [クライアントの資格情報フローを使用してAPIを呼び出す](/docs/ja-jp/get-started/authentication-and-authorization-flow/client-credentials-flow/call-your-api-using-the-client-credentials-flow)
