> ## 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="/ja/docs/glossary?term=SSO">SSO</Tooltip> の非アクティビティタイムアウトが 300 秒に設定され、各 SPA アプリケーションの <Tooltip tip="IDトークン: リソースへのアクセスではなく、クライアント自体を対象とする資格情報。" cta="用語集を表示" href="/ja/docs/glossary?term=ID+Token">IDトークン</Tooltip> の有効期限が 150 秒に設定されていることを前提としています。これは「有効期間の短い」セッションと見なされます。

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

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

IDトークンまたは<Tooltip tip="アクセストークン: API へのアクセスに使用される、不透明な文字列または JWT の形式の認可クレデンシャル。" cta="用語集を表示" href="/ja/docs/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="対象者: 発行されたトークンの対象者を示す一意の識別子。トークン内では aud という名前で、その値には IDトークンの場合はアプリケーション（クライアントID）の ID、アクセストークンの場合は API（API Identifier）の ID が含まれます。" cta="用語集を見る" href="/ja/docs/glossary?term=audience">オーディエンス</Tooltip> とスコープの値をキーにしたペアとして保存されます。

また、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](/ja/docs/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 クッキー (有効期限付き) が設定される
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="Auth0 セッション維持の図" 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 クッキーをクリアし、セッションデータを削除する
   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) ](/ja/docs/authenticate/single-sign-on) セッションより短くなるため、ワークフローの詳細は変わります。

詳しくは、[セッションの有効期間制限を設定する](/ja/docs/manage-users/sessions/configure-session-lifetime-settings) と [アクセストークンの有効期間を更新する](/ja/docs/secure/tokens/access-tokens/update-access-token-lifetime) を参照してください。