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

> 認可コードフローを使用して、従来型の Web アプリケーションにログイン機能を追加する方法を学びます。

# 認可コードフローを使用してログインを追加する

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>;
};

認可コードフローを使用すると、通常の Web アプリケーションにログインを追加できます。フローの仕組みと、これを使用すべき理由については、[Authorization Code Flow](/docs/ja-jp/get-started/authentication-and-authorization-flow/authorization-code-flow) をご覧ください。通常の Web アプリから API を呼び出す方法については、[Call Your API Using the Authorization Code Flow](/docs/ja-jp/get-started/authentication-and-authorization-flow/authorization-code-flow/call-your-api-using-the-authorization-code-flow) をご覧ください。

認可コードフローを実装するために、Auth0 では次のリソースを提供しています。

* [Regular Web App Quickstarts](/docs/ja-jp/quickstart/webapp): フローを実装する最も簡単な方法です。
* [Authentication API](https://auth0.com/docs/api/authentication): 独自のソリューションを構築したい場合は、このまま読み進めて API を直接呼び出す方法をご確認ください。

ログインに成功すると、アプリケーションはユーザーの <Tooltip tip="ID トークン: リソースにアクセスするためではなく、クライアント自体のための認証情報です。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=ID+token">ID トークン</Tooltip> と <Tooltip tip="ID トークン: リソースにアクセスするためではなく、クライアント自体のための認証情報です。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=access+token">アクセストークン</Tooltip> を利用できるようになります。ID トークンには基本的なユーザープロファイル情報が含まれており、アクセストークンは Auth0 の `/userinfo` エンドポイントまたは独自の保護された API の呼び出しに使用できます。ID トークンの詳細については、[ID Tokens](/docs/ja-jp/secure/tokens/id-tokens) をご覧ください。アクセストークンの詳細については、[Access Tokens](/docs/ja-jp/secure/tokens/access-tokens) をご覧ください。

ユーザーの認可をリクエストし、`authorization_code` を付けてアプリにリダイレクトします。次に、そのコードをトークンと交換します。

<div id="prerequisites">
  ## 事前準備
</div>

Auth0 にアプリケーションを登録します。詳しくは、[従来型Webアプリケーションを登録する](/docs/ja-jp/get-started/auth0-overview/create-applications/regular-web-apps)をご覧ください。

* **Application Type** で **Regular Web App** を選択します。
* **Allowed Callback URL** に `{https://yourApp/callback}` を追加します。
* アプリケーションの **グラントタイプ** に **認可コード** が含まれていることを確認します。詳しくは、[グラントタイプを更新する](/docs/ja-jp/get-started/applications/update-grant-types)をご覧ください。

<div id="authorize-user">
  ## ユーザーを認可する
</div>

フローを開始するには、ユーザーの認可を得る必要があります。この手順には、次のプロセスのうち1つ以上が含まれる場合があります。

* ユーザーを認証する。
* 認証を行うために、ユーザーを<Tooltip tip="IDプロバイダー（IdP）: デジタルアイデンティティを保存および管理するサービス。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=Identity+Provider">IDプロバイダー</Tooltip>にリダイレクトする。
* 以前に同意を得ていない場合は、要求された権限レベルに対するユーザーの同意を取得する。

ユーザーを認可するには、アプリからユーザーを[認可URL](https://auth0.com/docs/api/authentication#authorization-code-flow)に送信する必要があります。

<div id="authorization-url-example">
  ### 認可 URL の例
</div>

export const codeExample1 = `https://{yourDomain}/authorize?
    response_type=code&
    client_id={yourClientId}&
    redirect_uri={https://yourApp/callback}&
    scope={scope}&
    state={state}`;

<AuthCodeBlock children={codeExample1} language="http" />

### パラメータ

| パラメータ名          | 説明                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `response_type` | Auth0 が返す資格情報の種類 (`code` または `token`) を示します。このフローでは、値は `code` である必要があります。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| `client_id`     | アプリケーションの Client ID です。この値は [アプリケーション設定](https://manage.auth0.com/#/Applications/\{yourClientId}/settings) で確認できます。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| `redirect_uri`  | ユーザーが認可すると、Auth0 がブラウザーをリダイレクトする先の URL です。認可コードは URL パラメータ `code` で受け取れます。この URL は、[アプリケーション設定](https://manage.auth0.com/#/Applications/\{yourClientId}/settings) で有効な callback URL として指定する必要があります。<br /><br />**警告:** [OAuth 2.0 Specification](https://tools.ietf.org/html/rfc6749#section-3.1.2) に従い、Auth0 はハッシュ以降の内容をすべて削除し、フラグメントは *一切* 処理しません。                                                                                                                                                                                                                                                                                                                                                                                                                        |
| `scope`         | 認可をリクエストする [scopes](/docs/ja-jp/get-started/apis/scopes) を指定します。これにより、返されるクレーム (またはユーザー属性) が決まります。複数指定する場合はスペースで区切る必要があります。レスポンスで ID トークンを取得するには、少なくとも `openid` の scope を指定する必要があります。ユーザーの完全なプロファイルを返したい場合は、`openid profile` をリクエストできます。`email` など、ユーザーに関する [standard OpenID Connect (OIDC) scopes](https://openid.net/specs/openid-connect-core-1_0.html#StandardClaims) や、[namespaced format](/docs/ja-jp/secure/tokens/json-web-tokens/create-custom-claims) に準拠した [custom claims](/docs/ja-jp/secure/tokens/json-web-tokens/json-web-token-claims#custom-claims) をリクエストできます。[リフレッシュトークン](/docs/ja-jp/glossary?term=Refresh+Token) を取得するには `offline_access` を含めます ([アプリケーション設定](https://manage.auth0.com/#/applications) で **オフラインアクセスの許可** フィールドが有効になっていることを確認してください) 。 |
| `state`         | (推奨) アプリが最初の request に追加する、不透明な任意の英数字文字列です。Auth0 はアプリケーションにリダイレクトする際、この値を含めます。この値を使ってクロスサイトリクエストフォージェリ (CSRF) 攻撃を防ぐ方法については、[Mitigate CSRF Attacks With State Parameters](/docs/ja-jp/secure/attack-protection/state-parameters) を参照してください。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| `connection`    | (任意) ユーザーに特定の接続でのサインインを強制します。たとえば、`github` を渡すと、ユーザーは GitHub アカウントでログインするため直接 GitHub に移動します。指定しない場合、ユーザーには設定済みのすべての接続を含む Auth0 Lock 画面が表示されます。設定済みの接続の一覧は、アプリケーションの **接続** タブで確認できます。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| `organization`  | (任意) ユーザーの認証時に使用する organization の ID です。指定しない場合、アプリケーションで **Display Organization Prompt** が設定されていれば、ユーザーは認証時に organization名 を入力できます。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| `invitation`    | (任意) organization 招待のチケット ID です。[Organizations にメンバーを招待する](/docs/ja-jp/manage-users/organizations/configure-organizations/invite-members) 場合、ユーザーが招待を承諾するときに、アプリケーションは `invitation` と `organization` のキーと値のペアを転送して、招待の承諾を処理する必要があります。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| `login_hint`    | (任意) Auth0 へリダイレクトする際に、ログインまたはサインアップページのユーザー名/メール フィールドを自動入力します。Universal Login エクスペリエンスでサポートされています。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |

例として、アプリにログインを追加する際の認可 URL 用 HTML スニペットは次のようになります。

export const codeExample2 = `<a href="https://{yourDomain}/authorize?
  response_type=code&
  client_id={yourClientId}&
  redirect_uri={https://yourApp/callback}&
  scope=openid%20profile&
  state=xyzABC123">
  サインイン
</a>`;

<AuthCodeBlock children={codeExample2} language="html" />

<div id="response">
  ### レスポンス
</div>

問題なく進めば、`HTTP 302`レスポンスが返されます。認可コードはURLの末尾に含まれます。

```http lines theme={null}
HTTP/1.1 302 Found
Location: {https://yourApp/callback}?code={authorizationCode}&state=xyzABC123
```

<div id="request-tokens">
  ## トークンをリクエストする
</div>

認可コードを取得したら、それをトークンと交換する必要があります。前のステップで取得した認可コード (`code`) を使って、[トークンURL](https://auth0.com/docs/api/authentication#authorization-code) に `POST` します。

<div id="post-to-token-url-example">
  ### トークン URL にPOSTする例
</div>

<AuthCodeGroup>
  ```bash cURL theme={null}
  curl --request POST \
    --url 'https://{yourDomain}/oauth/token' \
    --header 'content-type: application/x-www-form-urlencoded' \
    --data grant_type=authorization_code \
    --data 'client_id={yourClientId}' \
    --data 'client_secret={yourClientSecret}' \
    --data 'code=yourAuthorizationCode}' \
    --data 'redirect_uri={https://yourApp/callback}'
  ```

  ```csharp C# theme={null}
  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=authorization_code&client_id={yourClientId}&client_secret=%7ByourClientSecret%7D&code=yourAuthorizationCode%7D&redirect_uri={https://yourApp/callback}", 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=authorization_code&client_id={yourClientId}&client_secret=%7ByourClientSecret%7D&code=yourAuthorizationCode%7D&redirect_uri={https://yourApp/callback}")

  	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))

  }
  ```

  ```java Java theme={null}
  HttpResponse response = Unirest.post("https://{yourDomain}/oauth/token")
    .header("content-type", "application/x-www-form-urlencoded")
    .body("grant_type=authorization_code&client_id={yourClientId}&client_secret=%7ByourClientSecret%7D&code=yourAuthorizationCode%7D&redirect_uri={https://yourApp/callback}")
    .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: 'authorization_code',
      client_id: '{yourClientId}',
      client_secret: '{yourClientSecret}',
      code: 'yourAuthorizationCode}',
      redirect_uri: '{https://yourApp/callback}'
    })
  };

  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}/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=authorization_code&client_id={yourClientId}&client_secret=%7ByourClientSecret%7D&code=yourAuthorizationCode%7D&redirect_uri={https://yourApp/callback}",
    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;
  }
  ```

  ```python Python theme={null}
  import http.client

  conn = http.client.HTTPSConnection("")

  payload = "grant_type=authorization_code&client_id={yourClientId}&client_secret=%7ByourClientSecret%7D&code=yourAuthorizationCode%7D&redirect_uri={https://yourApp/callback}"

  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_PEER

  request = Net::HTTP::Post.new(url)
  request["content-type"] = 'application/x-www-form-urlencoded'
  request.body = "grant_type=authorization_code&client_id={yourClientId}&client_secret=%7ByourClientSecret%7D&code=yourAuthorizationCode%7D&redirect_uri={https://yourApp/callback}"

  response = http.request(request)
  puts response.read_body
  ```
</AuthCodeGroup>

<div id="parameters">
  ### パラメーター
</div>

| パラメーター名         | 説明                                                                                                                                                                                                                                 |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `grant_type`    | `authorization_code` に設定します。                                                                                                                                                                                                       |
| `code`          | このチュートリアルの前の手順で取得した `authorization_code` です。                                                                                                                                                                                       |
| `client_id`     | アプリケーションの Client ID です。この値は [アプリケーション設定](https://manage.auth0.com/#/Applications/\{yourClientId}/settings) で確認できます。                                                                                                                |
| `client_secret` | アプリケーションの Client Secret です。この値は [アプリケーション設定](https://manage.auth0.com/#/Applications/\{yourClientId}/settings) で確認できます。利用可能なアプリケーションの認証方法について詳しくは、[Application Credentials](/docs/ja-jp/secure/application-credentials) を参照してください。 |
| `redirect_uri`  | アプリケーション設定で指定した有効な callback URL です。これは、このチュートリアルの前の手順で認可 URL に渡した `redirect_uri` と完全に一致している必要があります。なお、URL エンコードが必要です。                                                                                                              |

<div id="response">
  ### レスポンス
</div>

問題なく完了すると、`access_token`、`refresh_token`、`id_token`、`token_type` の値を含むペイロードを含む HTTP 200 レスポンスが返されます。

```json lines theme={null}
{
  "access_token": "eyJz93a...k4laUWw",
  "refresh_token": "GEbRxBN...edjnXbL",
  "id_token": "eyJ0XAi...4faeEoQ",
  "token_type": "Bearer"
}
```

<Warning>
  保存する前に、トークンを検証してください。方法については、[ID トークンを検証する](/docs/ja-jp/secure/tokens/id-tokens/validate-id-tokens) と [アクセストークンを検証する](/docs/ja-jp/secure/tokens/access-tokens/validate-access-tokens) を参照してください。
</Warning>

[ID トークン](/docs/ja-jp/secure/tokens/id-tokens) には、デコードして抽出する必要があるユーザー情報が含まれています。

[アクセストークン](/docs/ja-jp/secure/tokens/access-tokens) は、[Auth0 Authentication API の /userinfo エンドポイント](https://auth0.com/docs/api/authentication#get-user-info) または別の API を呼び出すために使用されます。独自の API を呼び出す場合は、まず API 側で [アクセストークンを検証する](/docs/ja-jp/secure/tokens/access-tokens/validate-access-tokens) 必要があります。

[リフレッシュトークン](/docs/ja-jp/secure/tokens/refresh-tokens) は、以前のアクセストークンまたは ID トークンの有効期限が切れた後に、新しいアクセストークンまたは ID トークンを取得するために使用されます。`refresh_token` は、`offline_access` スコープを含め、Auth0 Dashboard でその API に対して **オフラインアクセスの許可** を有効にした場合にのみレスポンスに含まれます。

<Warning>
  リフレッシュトークンを使用すると、実質的に無期限にユーザーの認証状態を維持できるため、安全に保管する必要があります。
</Warning>

<div id="use-cases">
  ## ユースケース
</div>

<div id="basic-authentication-request">
  ### 基本的な認証リクエスト
</div>

この例では、ステップ1でユーザーを認証する際に送信できる、最も基本的なリクエストを示します。Auth0のログイン画面が表示され、ユーザーは設定済みの任意の接続を使ってサインインできます。

export const codeExample13 = `https://{yourDomain}/authorize?
    response_type=code&
    client_id={yourClientId}&
    redirect_uri={https://yourApp/callback}&
    scope=openid`;

<AuthCodeBlock children={codeExample13} language="http" />

ここでトークンをリクエストすると、ID トークンには最も基本的なクレームが含まれます。ID トークンをデコードすると、以下のようになります。

```json lines theme={null}
{
  "iss": "https://auth0pnp.auth0.com/",
  "sub": "auth0|581...",
  "aud": "xvt9...",
  "exp": 1478112929,
  "iat": 1478076929
}
```

<div id="request-users-name-and-profile-picture">
  ### ユーザーの名前とプロフィール画像をリクエストする
</div>

通常のユーザー認証に加えて、この例では、名前やプロフィール画像などの追加のユーザー情報をリクエストする方法を紹介します。

ユーザーの名前とプロフィール画像をリクエストするには、ユーザーを認可する際に適切な scopes を追加する必要があります。

export const codeExample14 = `https://{yourDomain}/authorize?
    response_type=code&
    client_id={yourClientId}&
    redirect_uri={https://yourApp/callback}&
    scope=openid%20name%20picture&
    state={state}`;

<AuthCodeBlock children={codeExample14} language="http" />

これで、トークンをリクエストすると、ID トークンに要求した `name` クレームと `picture` クレームが含まれるようになります。ID トークンをデコードすると、次のようになります。

```json lines theme={null}
{
  "name": "jerrie@...",
  "picture": "https://s.gravatar.com/avatar/6222081fd7dcea7dfb193788d138c457?s=480&r=pg&d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Fje.png",
  "iss": "https://auth0pnp.auth0.com/",
  "sub": "auth0|581...",
  "aud": "xvt...",
  "exp": 1478113129,
  "iat": 1478077129
}
```

<div id="request-user-log-in-with-github">
  ### GitHub でユーザーをログインさせる
</div>

通常のユーザー認証に加えて、この例では GitHub などのソーシャルアイデンティティプロバイダーにユーザーを直接送る方法を紹介します。まず、[Auth0 Dashboard > Authentication > Social](https://manage.auth0.com/#/connections/social) で適切な接続を設定し、**設定** タブから接続名を取得する必要があります。

ユーザーを GitHub のログイン画面に直接送るには、手順 1 でユーザーの認証を開始する際に、`connection` パラメーターを渡し、その値を接続名 (この場合は `github`) に設定する必要があります。

export const codeExample15 = `https://{yourDomain}/authorize?
    response_type=code&
    client_id={yourClientId}&
    redirect_uri={https://yourApp/callback}&
    scope=openid%20name%20picture&
    state={state}&
    connection=github`;

<AuthCodeBlock children={codeExample15} language="http" />

トークンをリクエストすると、ID トークンには GitHub から返されたユーザー固有の ID が `sub` クレームに含まれます。ID トークンをデコードすると、次のようになります。

```json lines theme={null}
{
  "name": "Jerrie Pelser",
  "nickname": "jerriep",
  "picture": "https://avatars.githubusercontent.com/u/1006420?v=3",
  "iss": "https://auth0pnp.auth0.com/",
  "sub": "github|100...",
  "aud": "xvt...",
  "exp": 1478114742,
  "iat": 1478078742
}
```

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

* [OAuth 2.0 認可フレームワーク](/docs/ja-jp/authenticate/protocols/oauth)
* [OpenID Connect プロトコル](/docs/ja-jp/authenticate/protocols/openid-connect-protocol)
* [トークン](/docs/ja-jp/secure/tokens)
* [従来型Webアプリケーションを登録する](/docs/ja-jp/get-started/auth0-overview/create-applications/regular-web-apps)
* [グラントタイプを更新する](/docs/ja-jp/get-started/applications/update-grant-types)