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

> トークンベースの認証で使用されるトークンを、どこにどのように保存するかを学びます。

# トークンの保存

<Card title="概要">
  重要なポイント

  * トークンの保存方法の選択は、悪意のある攻撃からアプリケーションを守るうえで非常に重要です。
  * アプリケーションの種類ごとのシナリオを確認します。
  * 使用している技術に最も適した方法を選びます。
</Card>

API 呼び出しを行う SPA の保護には、特有の注意点があります。トークンやその他の機密データが [クロスサイトスクリプティング](https://owasp.org/www-community/attacks/xss/) (XSS) の影響を受けず、悪意のある JavaScript に読み取られないようにする必要があります。

詳しくは、[JWT Handbook](https://auth0.com/resources/ebooks/jwt-handbook) および [The Ultimate Guide to Next.js Authentication with Auth0](https://auth0.com/blog/ultimate-guide-nextjs-authentication-auth0/?utm_source=twitter\&utm_medium=sc\&utm_campaign=nextjs_authn_guide) を参照してください。

<div id="nextjs-static-site-scenarios">
  #### Next.js 静的サイトのシナリオ
</div>

Next.js アプリケーションを構築する際、次のような場合に認証が必要になることがあります。

1. ページにアクセスするとき
2. API ルートにアクセスするとき
3. アプリケーションがユーザーに代わって、Next.js アプリケーションの外部でホストされている API を呼び出すとき

サーバーを利用できる場合、アプリで Auth0 とのやり取りを処理してセッションを作成できますが、このモデルにはバックエンドがありません。すべての処理はフロントエンドで行われます。

1. ユーザーは Auth0 にリダイレクトされます。
2. ユーザーが正常にサインインすると、アプリケーションにリダイレクトされます。
3. クライアント側で Auth0 とのコード交換を完了し、ユーザーの `id_token` と `access_token` を取得してメモリに保存します。

   <Frame>
     <img src="https://mintcdn.com/translations/6GE5Z24GDCZehiJ9/docs/images/cdy7uua7fh8z/6a4aA0TH8PJQpvhkLaGSIp/e38aae00318515f2a0efa0dfce24dca2/in-memory-token-storage.png?fit=max&auto=format&n=6GE5Z24GDCZehiJ9&q=85&s=a355d66bcb483b20eaede4a54bbd36bd" alt="トークン保存のベストプラクティス メモリ内保存の図" width="600" height="462" data-path="docs/images/cdy7uua7fh8z/6a4aA0TH8PJQpvhkLaGSIp/e38aae00318515f2a0efa0dfce24dca2/in-memory-token-storage.png" />
   </Frame>

<Tabs>
  <Tab title="従来型のウェブアプリ">
    アプリで API 呼び出しを必要としないサインインのシナリオを使用する場合、必要なのは IDトークンのみです。これを保存する必要はありません。検証したうえで、必要なデータをそこから取得できます。

    アプリがユーザーに代わって API を呼び出す必要がある場合は、アクセストークンと、必要に応じてリフレッシュトークンが必要です。これらはサーバー側またはセッションクッキーに保存できます。クッキーは暗号化されている必要があり、最大サイズは 4 KB です。保存するデータが大きい場合、セッションクッキーにトークンを保存する方法は現実的ではありません。

    これらのシナリオでは、次のフロータイプを使用します。

    * [認可コードフロー](/docs/ja-jp/get-started/authentication-and-authorization-flow/authorization-code-flow)
    * [Regular Web App Quickstarts](/docs/ja-jp/quickstart/webapp)
  </Tab>

  <Tab title="ネイティブ/モバイルアプリ">
    OS が提供する安全な保存領域にトークンを保存し、その保存領域へのアクセスを制限します。たとえば、Android では KeyStore、iOS では KeyChain を活用します。

    これらのシナリオでは、次のフロータイプを使用します。

    * [Proof Key for Code Exchange を使用する認可コードフロー](/docs/ja-jp/get-started/authentication-and-authorization-flow/authorization-code-flow-with-pkce)
    * [Swift でトークンを保存および更新する](/docs/ja-jp/libraries/auth0-swift/auth0-swift-save-and-renew-tokens)
    * [Native/Mobile Apps Quickstarts](/docs/ja-jp/quickstart/native)
  </Tab>

  <Tab title="シングルページアプリ">
    トークンの保存、セッション管理、その他の処理を行うには、[Auth0 SPA SDK](/docs/ja-jp/libraries/auth0-single-page-app-sdk) の使用を推奨します。

    SPA が、SPA のドメインとクッキーを共有できるドメインで提供される API だけを呼び出す場合、トークンは不要です。OAuth は追加の価値をもたらさない一方で攻撃ベクトルを増やすため、従来のクッキーベースのアプローチを優先し、使用は避けるべきです。

    SPA が別のドメインに存在する複数の API を呼び出す場合は、アクセストークンと、必要に応じてリフレッシュトークンが必要です。

    * SPA のバックエンドが API 呼び出しを処理できる場合は、次を使用してサーバー側でトークンを処理する従来型のウェブアプリケーションと同様に機能します。

      * [認可コードフロー](/docs/ja-jp/get-started/authentication-and-authorization-flow/authorization-code-flow)
      * [Proof Key for Code Exchange を使用する認可コードフロー](/docs/ja-jp/get-started/authentication-and-authorization-flow/authorization-code-flow-with-pkce)
    * SPA のバックエンドが API 呼び出しを処理できない場合は、トークンを SPA バックエンドに保存するモバイルアプリケーションと同様に機能しますが、API へのリクエストを実行するには、SPA がバックエンドからトークンを取得する必要があります。バックエンドから SPA へトークンを安全に転送できるようにするため、バックエンドと SPA の間でプロトコルを確立する必要があります。
    * 対応するバックエンドサーバーが**ない** SPA の場合、SPA はログイン時に新しいトークンをリクエストし、永続化せずにメモリに保存する必要があります。その後 API 呼び出しを行う際は、SPA はメモリ内のトークンのコピーを使用します。

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      OAuth2 の仕様に準拠し、ブラウザーが /token エンドポイントにリフレッシュトークンをリクエストした場合、Auth0 はそのクライアントで [Refresh Token Rotation](/docs/ja-jp/secure/tokens/refresh-tokens/refresh-token-rotation) が有効になっているときにのみリフレッシュトークンを返します。
    </Callout>

    詳細については、[Auth0 SPA SDK in GitHub](https://github.com/auth0/auth0-spa-js) を参照してください。
  </Tab>
</Tabs>

<div id="browser-in-memory-scenarios">
  ### ブラウザーでインメモリー保存を使用する場合
</div>

Auth0 では、最も安全な方法として、ブラウザーのメモリーにトークンを保存することを推奨しています。トークンの送受信と保存の処理に [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) を使用するのが、トークンを保護する最善の方法です。Web Workers は、アプリケーションの他の部分とは分離されたグローバルスコープで実行されるためです。デフォルトの保存オプションとして、Web Workers を活用したインメモリー保存を採用している Auth0 SPA SDK を使用してください。

Web Workers を使用できない場合は、代替手段として、[JavaScript クロージャ](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures#emulating_private_methods_with_closures) を使ってプライベートメソッドを擬似的に実現することを Auth0 では推奨しています。

トークンの種類に応じて Web Workers と JavaScript クロージャの両方を活用するには、デフォルトの保存オプションがインメモリー保存である Auth0 SPA SDK を使用してください。

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  ブラウザーでのインメモリー保存方式では、ページを再読み込みした場合や、ブラウザーのタブをまたいだ場合の永続性は**ありません**。
</Callout>

<div id="browser-local-storage-scenarios">
  ### ブラウザーのローカルストレージのシナリオ
</div>

ブラウザーのローカルストレージの使用は、iframe から <Tooltip tip="アクセストークン: API へのアクセスに使用される、オペーク文字列または JWT の形式をした認可クレデンシャル。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=access+token">アクセストークン</Tooltip> を取得する必要がある仕組みや、ブラウザーの制限 (たとえば ITP2) によって利用できない場合のドメインをまたぐ Cookie ベースの認証に代わる、現実的な選択肢となることがあります。

<Warning>
  ブラウザーのローカルストレージにトークンを保存すると、ページの再読み込み後や別のブラウザータブでも保持できますが、攻撃者がクロスサイトスクリプティング (XSS) 攻撃によって SPA 上で JavaScript を実行できる場合、ローカルストレージに保存されたトークンを取得されるおそれがあります。XSS 攻撃を成立させる脆弱性は、SPA のソースコード内にある場合もあれば、SPA に含まれているサードパーティの JavaScript コード (Bootstrap、jQuery、Google Analytics など) 内にある場合もあります。
</Warning>

SPA で implicit フローまたは hybrid フローを使用している場合は (代わりに PKCE を使用した Authorization Code フローの使用を推奨します) 、セキュリティリスクを軽減するために、トークンの絶対有効期限を短くできます。これにより、反射型 XSS 攻撃の影響は軽減されます (ただし、持続型 XSS 攻撃には効果がありません) 。有効期限を短くするには、**Auth0 Dashboard > APIs > Settings > Token Expiration For Browser Flows (Seconds)** に移動します。

ドメイン外のソースから読み込むサードパーティの JavaScript コードは、必要最小限 (jQuery、Bootstrap、Google Analytics などへのリンクなど) に抑えてください。サードパーティの JS コードを減らすことで、XSS 脆弱性が生じる可能性を低減できます。また、取得したリソースが予期しない改変を受けずに配信されていることを確認するため、可能な場合はサードパーティのスクリプトに対して [Subresource Integrity (SRI)](https://developer.mozilla.org/en-US/docs/Web/Security/Defenses/Subresource_Integrity) チェックを実施することも、セキュリティ向上につながります。

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

* [IDトークン](/docs/ja-jp/secure/tokens/id-tokens)
* [アクセストークン](/docs/ja-jp/secure/tokens/access-tokens)
* [リフレッシュトークン](/docs/ja-jp/secure/tokens/refresh-tokens)
* [トークンのベストプラクティス](/docs/ja-jp/secure/tokens/token-best-practices)