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

> 複数サイトのセッション管理をサポートする、auth0-spa-js SDK を使用したワークフローについて説明します。

# Auth0 SDK を使用した複数サイトのセッション管理

<div id="short-lived-sessions">
  ## 有効期間の短いセッション
</div>

このワークフローでは、複数サイトのセッション管理をサポートするために auth0-spa-js SDK をどのように実装すべきかを示します。このシナリオでは、テナントの <Tooltip tip="シングルサインオン（SSO）: ユーザーが 1 つのアプリケーションにログインすると、そのユーザーは自動的に他のアプリケーションにもログインされるサービス。" cta="用語集を表示" href="/docs/ja-jp/glossary?term=SSO">SSO</Tooltip> の非アクティブ タイムアウトが 300 秒に設定され、各 SPA アプリケーションの <Tooltip tip="ID トークン: リソースへのアクセスではなく、クライアント自体を対象とした資格情報。" cta="用語集を表示" href="/docs/ja-jp/glossary?term=ID+Token">ID トークン</Tooltip> の有効期限が 150 秒に設定されていることを前提としています。これは「有効期間の短い」セッションと見なされます。

<div id="sdk-features">
  ### SDKの機能
</div>

<div id="pkce-flow">
  #### PKCE フロー
</div>

ID トークンまたは<Tooltip tip="Access Token: API へのアクセスに使用される認可資格情報で、opaque な文字列または JWT の形式を取ります。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=Access+Token">アクセストークン</Tooltip>を取得するあらゆる方法で、SDK が Proof Key for Code Exchange ワークフローの複雑な処理をすべて担います。これを動作させるために、追加の作業や設定は必要ありません。

<div id="deep-linking">
  #### ディープリンク
</div>

ユーザー体験を向上させるため、SDK には `loginWithRedirect()` メソッド用の `appState` パラメーターが含まれています。現在のアプリに関する情報は、Auth サーバーへのリクエストの一部として渡され、認証が成功すると返されます。これにより、ユーザーは途中で中断することなく操作を続けられます。

Quickstart では、`PrivateRoute` コンポーネントが `targetUrl` という state パラメーターを設定し、`index.js` の `onRedirectCallback` 関数がこの値を取り出して、認証完了後にユーザーをリダイレクトします。

<div id="token-storage">
  #### トークンの保存
</div>

返されたトークンをできるだけ安全に保持するため、すべてのトークンはローカルキャッシュに保存されます。ID トークンとアクセストークンはペアで保存され、必要に応じてトークンを取得できるよう、<Tooltip tip="Audience: 発行されたトークンの対象となる受信先を一意に識別する値です。トークン内では aud という名前で表され、その値には、ID トークンの場合はアプリケーション（Client ID）、アクセストークンの場合は API（API 識別子）の ID が含まれます。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=audience">audience</Tooltip> と scope の値が使用されます。

さらに、ID トークンまたはアクセストークンのいずれかが期限切れになると、キャッシュ内のトークンは削除されます。したがって、トークンがキャッシュ内に存在する場合は、まだ有効であると見なせます。

<div id="call-apis">
  #### API を呼び出す
</div>

`getTokenSilently()` メソッドは、まずトークンキャッシュを利用し、キャッシュがない場合は非表示の iframe を使って新しいトークンを取得します。そのため、API へのすべてのリクエストでこのメソッドを使って Bearer トークン用のヘッダーを組み立てることができ、期限切れのトークンに対応するための追加ロジックは不要です。

Quickstart では、`ExternalService` ビューがこの機能を使って express API にリクエストを送信します。

<div id="warn-users-to-continue-their-sessions">
  #### ユーザーにセッションの継続を促す警告を表示する
</div>

ユーザーが Auth0 セッションの更新につながる操作を何も行っていない場合、Auth0 は、ユーザーに警告を表示し、明示的にセッションを継続するかどうかを選択させることを推奨しています。

この方法は、ユーザーがその場を離れている場合にはセッションを非アクティブにできる一方で、ユーザーがまだ操作中であれば、サイレントなトークン更新をトリガーして、資格情報の再入力を求められることなくセッションを継続できるようにするものです。

非アクティビティタイマーとタイムアウトモーダルの詳細については、[アプリケーション固有のログアウト URL](/docs/ja-jp/manage-users/sessions/configure-session-lifetime-settings) を参照してください。

<div id="example-workflow">
  ### ワークフローの例
</div>

1. 初回認証
2. Auth0 セッションの維持
3. シームレスな SSO
4. ユーザーにセッション延長を促す
5. ユーザーがアプリケーションから明示的にログアウトする
6. ログアウト後にユーザーが元のアプリケーションに戻る

<div id="initial-authentication">
  #### 初回認証
</div>

1. 新しいタブが開く
2. ログインが求められる
3. ユーザーが資格情報を入力する
4. SSO Cookie (有効期限付き) が設定される
5. トークン交換が行われる

<Frame>
  <img src="https://mintcdn.com/translations/Dcx0M11uuptU53TX/docs/images/cdy7uua7fh8z/2voC3vs36CJJlpDu4xl06Y/310fe5afe79ad7d083833baa2690dfa4/initial-authentication.png?fit=max&auto=format&n=Dcx0M11uuptU53TX&q=85&s=4f51098c0b8f844858d9c464393d96e3" alt="初回認証フローの図" width="1500" height="1346" data-path="docs/images/cdy7uua7fh8z/2voC3vs36CJJlpDu4xl06Y/310fe5afe79ad7d083833baa2690dfa4/initial-authentication.png" />
</Frame>

<div id="maintain-auth0-session">
  #### Auth0 セッションを維持する
</div>

1. ユーザーが保護されたリソースからデータを取得しようとする
2. `getTokenSilently()` が呼び出される
3. リソースが取得される
4. ユーザーが保護されたリソースのデータを更新する
5. `getTokenSilently()` が呼び出される

   1. iframe が開かれる
   2. トークン交換が行われる
6. リソースが更新される

<Frame>
  <img src="https://mintcdn.com/translations/c0RQ9V0YAcT0-8l5/docs/images/cdy7uua7fh8z/7CI29ouvhuJ4TFC1G2C5n8/4d2bd0c9372a6cc16e75fc76f438a0bd/maintain-auth0-session.png?fit=max&auto=format&n=c0RQ9V0YAcT0-8l5&q=85&s=0b4232fbfdf4359e2290b8100a72258e" alt="セッション維持の図" width="1500" height="1839" data-path="docs/images/cdy7uua7fh8z/7CI29ouvhuJ4TFC1G2C5n8/4d2bd0c9372a6cc16e75fc76f438a0bd/maintain-auth0-session.png" />
</Frame>

<div id="seamless-sso">
  #### シームレスな SSO
</div>

1. ユーザーが保護されたルートに移動する
2. `isAuthenticated()` で確認する
3. false の場合、`loginWithRedirect()` を実行する

<Frame>
  <img src="https://mintcdn.com/translations/3nS3prIggmJG9TUI/docs/images/cdy7uua7fh8z/38heJlnN0letWMVhpTtXad/4d4127150fb818522ea29eea28ccc00e/seamless-sso.png?fit=max&auto=format&n=3nS3prIggmJG9TUI&q=85&s=5be4dbdc1a3e26c45f8195c092ec3a59" alt="セッション向けシームレス SSO フローの図" width="1500" height="1633" data-path="docs/images/cdy7uua7fh8z/38heJlnN0letWMVhpTtXad/4d4127150fb818522ea29eea28ccc00e/seamless-sso.png" />
</Frame>

<div id="prompt-user-to-extend-session">
  #### ユーザーにセッション延長を促す
</div>

1. 240秒時点で、60秒間表示されるモーダルを表示し、セッションを維持するかどうかをユーザーに確認します
2. 維持を選択した場合は、`getTokenSilently()` を実行します

<Frame>
  <img src="https://mintcdn.com/translations/6GE5Z24GDCZehiJ9/docs/images/cdy7uua7fh8z/6kH2G3oclCfSudwd0hJEUM/70651da37771c9945c5a34dcad409d9f/prompt-user-extend-session.png?fit=max&auto=format&n=6GE5Z24GDCZehiJ9&q=85&s=82396b75a3239be57569f04f465b2d6f" alt="ユーザーにセッション維持を促す図" width="1500" height="1870" data-path="docs/images/cdy7uua7fh8z/6kH2G3oclCfSudwd0hJEUM/70651da37771c9945c5a34dcad409d9f/prompt-user-extend-session.png" />
</Frame>

<div id="user-explicitly-logs-out-of-application">
  #### ユーザーがアプリケーションから明示的にログアウトする
</div>

1. ユーザーがログアウトを選択する
2. `logout()` が呼び出される

   1. トークンキャッシュをクリアする
   2. `/oidc/logout` を呼び出す
   3. SSO Cookie をクリアし、セッションデータを削除する
   4. ユーザーをログアウトページにリダイレクトする

<Frame>
  <img src="https://mintcdn.com/translations/pvjQqAy3EB2TK6NP/docs/images/cdy7uua7fh8z/4b55FKM2vZBoskXTPY4nxs/1a9e69437677f2cfac9a3d8e6bff7ffe/user-explicitly-logs-out-of-app.png?fit=max&auto=format&n=pvjQqAy3EB2TK6NP&q=85&s=c91d63541b687a25cc827afb2c6fa003" alt="ユーザーがログアウトする際の図" width="1500" height="1194" data-path="docs/images/cdy7uua7fh8z/4b55FKM2vZBoskXTPY4nxs/1a9e69437677f2cfac9a3d8e6bff7ffe/user-explicitly-logs-out-of-app.png" />
</Frame>

<div id="user-returns-to-initial-application-after-logging-out">
  #### ログアウト後にユーザーが元のアプリケーションに戻る
</div>

1. ユーザーが保護されたリソースにデータをリクエストする
2. `getTokenSilently()` が呼び出される
3. アプリケーションごとに動作が異なる

<Frame>
  <img src="https://mintcdn.com/translations/3nS3prIggmJG9TUI/docs/images/cdy7uua7fh8z/3geXGwsXkIgFkwopoGoLMx/01685b6b8e8473c6ce6f26e59b402cf3/user-returns-to-initial-app.png?fit=max&auto=format&n=3nS3prIggmJG9TUI&q=85&s=dc23f4e3b518b9b980cfd37daa05f34e" alt="ログアウト後にユーザーが元のアプリケーションに戻る図" width="1500" height="1046" data-path="docs/images/cdy7uua7fh8z/3geXGwsXkIgFkwopoGoLMx/01685b6b8e8473c6ce6f26e59b402cf3/user-returns-to-initial-app.png" />
</Frame>

<div id="long-lived-sessions">
  ## 長期間のセッション
</div>

Auth0 はエンタープライズプランで長期間のセッションをサポートしています。長期間のセッションでは、非アクティブ状態の許容期間を最大 100 日間 (アイドルタイムアウト) 、セッション全体の継続期間を最大 1 年間 (絶対タイムアウト) まで設定できます。四半期ごとや月ごとなどのサイクルがある場合、これによりエンドユーザーの負担を軽減し、リスクの低いコンテンツや機能へのアクセスを提供できます。さらに、メディア企業は、コンテンツへシームレスにアクセスできるようにすることで、ユーザーエクスペリエンスの向上に長期間のセッションを活用できます。また、ユーザーエクスペリエンスとセキュリティに関する要件に応じて、長期間のセッションとパスワードのバリデーションのどちらを採用するか選択することもできます。

長期間のセッションでは、ワークフローの詳細が変わります。この場合、アプリケーションセッションは [シングルサインオン (SSO) ](/docs/ja-jp/authenticate/single-sign-on) セッションより短くなる可能性が高くなります。

詳細については、[Configure Session Lifetime Limits](/docs/ja-jp/manage-users/sessions/configure-session-lifetime-settings) と [Access Token Lifetime を更新する](/docs/ja-jp/secure/tokens/access-tokens/update-access-token-lifetime) を参照してください。