> ## Documentation Index
> Fetch the complete documentation index at: https://auth0.generaltranslation.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Auth0 SDKでマルチサイトセッションを管理する

> マルチサイトセッション管理をサポートするためのauth0-spa-js SDKによるワークフローについて説明します。

<div id="short-lived-sessions">
  ## 短命セッション
</div>

このワークフローでは、マルチサイトセッション管理をサポートするためauth0-spa-js SDKをどのように実装するべきかを示します。このシナリオでは、テナント<Tooltip data-tooltip-id="react-containers-DefinitionTooltip-0" href="/docs/ja-JP/ja-jp/glossary?term=single-sign-on" tip="シングルサインオン（SSO）: ユーザーが1つのアプリケーションにログインした後、そのユーザーを他のアプリケーションに自動的にログインさせるサービス。" cta="用語集の表示">SSO</Tooltip>非アクティブタイムアウトは300秒に設定され、各SPAアプリケーションのIDトークン有効期限は150秒に設定されているものとします。これは「短命」セッションとみなされます。

<div id="sdk-features">
  ### SDKの特徴
</div>

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

IDトークンまたはアクセストークンを取得するすべての方法について、SDKはProof Key for Code Exchangeワークフローの複雑さをすべて管理します。この機能を利用するための追加の操作や設定はありません。

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

ユーザーエクスペリエンスを改善するため、SDKには`loginWithRedirect()`メソッドに`appState`パラメーターが含まれています。現在のアプリについての詳細は、認証の成功時に返されるAuthサーバーへの要求の部分としてパッケージ化されます。これは、ユーザージャーニーをシームレスに継続できるようにします。

クイックスタートでは、`PrivateRoute`コンポーネントが`targetUrl`の状態パラメーターを設定し、`index.js`の`onRedirectCallback`関数がこの値を解凍して、認証完了時にユーザーをリダイレクトします。

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

返されたトークンを可能な限り安全な方法で保管するため、すべてのトークンはローカルキャッシュに含められます。IDとアクセストークンは、必要に応じてトークンを取得するために使用されるオーディエンス値とスコープ値のペアとして保管されます。

また、IDトークンまたはアクセストークンのいずれかの有効期限が切れると、キャッシュトークンは削除されるため、キャッシュ内にあるトークンはまだ有効であると判断できます。

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

`getTokenSilently()`メソッドは、まずトークンキャッシュを活用するために使用され、トークンキャッシュがない場合には非表示のiframeを起動して、新しいトークンを取得します。この目的のため、APIへのすべての要求は、このメソッドを使用してベアラートークンヘッダーを構築できます。期限切れのトークンを処理するための追加ロジックを不要です。

クイックスタートでは、`ExternalService`ビューがこの機能を使用してExpress APIに要求を行います。

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

ユーザーがAuth0セッションを更新するアクションを行っていない場合、Auth0は、明示的にセッションの継続を選択するようユーザーに警告することを推奨します。

このアプローチの意図は、ユーザーが存在しなくなった場合にセッションが非アクティブになれるようにしつつ、それ以外の場合、資格情報をもう一度求めることなくセッションを継続できるようにサイレントトークンリフレッシュをトリガーする手段を提供することです。

非アクティブタイマーとタイムアウトのモーダルについては、「[アプリケーション特有のログアウトURL](/docs/ja-JP/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クッキー（有効期限あり）が設定されている
5. トークンの交換が実行される

<Frame>
  <img src="https://mintcdn.com/generaltranslationinc/fJ7FJkQ9-WdlT49P/docs/images/ja-jp/cdy7uua7fh8z/2voC3vs36CJJlpDu4xl06Y/2eca3cc5f8de0c5fd5d4acc92e41d7d1/initial-authentication.png?fit=max&auto=format&n=fJ7FJkQ9-WdlT49P&q=85&s=39cdff9d39bfd6291deaf01a99adda16" alt="Diagram of Initial Authentication flow" width="1500" height="1346" data-path="docs/images/ja-jp/cdy7uua7fh8z/2voC3vs36CJJlpDu4xl06Y/2eca3cc5f8de0c5fd5d4acc92e41d7d1/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/generaltranslationinc/tqPYu6gkIVBTtEtD/docs/images/ja-jp/cdy7uua7fh8z/7CI29ouvhuJ4TFC1G2C5n8/905ef7644f78abe0fd9d7163ac539a1d/maintain-auth0-session.png?fit=max&auto=format&n=tqPYu6gkIVBTtEtD&q=85&s=a88d7fd06bcc74e4f3f353cdfb6ebb17" alt="Diagram of maintaining a session" width="1500" height="1839" data-path="docs/images/ja-jp/cdy7uua7fh8z/7CI29ouvhuJ4TFC1G2C5n8/905ef7644f78abe0fd9d7163ac539a1d/maintain-auth0-session.png" />
</Frame>

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

1. ユーザーがプライベートルートに移動する
2. `isAuthenticated()`で確認する
3. falseの場合には`loginWithRedirect()`を呼び出す

<Frame>
  <img src="https://mintcdn.com/generaltranslationinc/fJ7FJkQ9-WdlT49P/docs/images/ja-jp/cdy7uua7fh8z/38heJlnN0letWMVhpTtXad/165460f8633fcc7d68ff70a1e56a80c7/seamless-sso.png?fit=max&auto=format&n=fJ7FJkQ9-WdlT49P&q=85&s=5a753ae88e30d1900797a89aa9fb6e41" alt="Diagram of seamless SSO flow for sessions" width="1500" height="1633" data-path="docs/images/ja-jp/cdy7uua7fh8z/38heJlnN0letWMVhpTtXad/165460f8633fcc7d68ff70a1e56a80c7/seamless-sso.png" />
</Frame>

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

1. 240秒後に、60秒間継続するモーダルでセッションをアクティブに維持するようユーザーに促す
2. セッションの維持を選択した場合には<>getTokenSilently()</>を呼び出す

<Frame>
  <img src="https://mintcdn.com/generaltranslationinc/tqPYu6gkIVBTtEtD/docs/images/ja-jp/cdy7uua7fh8z/6kH2G3oclCfSudwd0hJEUM/a02e4e1768e6f3965d9d52c80b75df4d/prompt-user-extend-session.png?fit=max&auto=format&n=tqPYu6gkIVBTtEtD&q=85&s=4ff39d31d6c7aee88e17d5ca97e56281" alt="Diagram of prompting a user to maintain a session" width="1500" height="1870" data-path="docs/images/ja-jp/cdy7uua7fh8z/6kH2G3oclCfSudwd0hJEUM/a02e4e1768e6f3965d9d52c80b75df4d/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/generaltranslationinc/TAtXfl0iCCUYtXZs/docs/images/ja-jp/cdy7uua7fh8z/4b55FKM2vZBoskXTPY4nxs/720cf919e6f959010606a88c08453fd4/user-explicitly-logs-out-of-app.png?fit=max&auto=format&n=TAtXfl0iCCUYtXZs&q=85&s=2684e18fd52998e9b45b4e8e9b458fb9" alt="Diagram of a user logging out" width="1500" height="1194" data-path="docs/images/ja-jp/cdy7uua7fh8z/4b55FKM2vZBoskXTPY4nxs/720cf919e6f959010606a88c08453fd4/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/generaltranslationinc/JoMgZsgQxj2_Gov3/docs/images/ja-jp/cdy7uua7fh8z/3geXGwsXkIgFkwopoGoLMx/a63a8c40888283492bc9d9ac57c787f1/user-returns-to-initial-app.png?fit=max&auto=format&n=JoMgZsgQxj2_Gov3&q=85&s=a8fd5d6cabcfae59d6bc3edc0a47727e" alt="Diagram of user returning to application after logging out" width="1500" height="1046" data-path="docs/images/ja-jp/cdy7uua7fh8z/3geXGwsXkIgFkwopoGoLMx/a63a8c40888283492bc9d9ac57c787f1/user-returns-to-initial-app.png" />
</Frame>

<div id="long-lived-sessions">
  ## 長寿命セッション
</div>

Auth0は、エンタープライズプラン向けの長寿命セッションをサポートしています。長寿命セッションセッションを使用すると、最長100日間の非アクティブ（アイドルタイムアウト）および最長1年間の合計期間（絶対タイムアウト）によるセッション制限を構成できます。四半期ごと、月ごと、またはその他のタイムラインがある場合、これによってエンドユーザーの負担を減らし、リスクの低いコンテンツと機能へのアクセスを提供できます。また、メディア企業は、コンテンツへのシームレスなアクセスを通じてユーザーエクスペリエンスを改善するため、長寿命セッションを活用できます。また、ユーザーエクスペリエンスとセキュリティに関する要件に基づき、長寿命セッションとパスワード認証のいずれかを選択することもできます。

ワークフローの詳しい内容は、[シングルサインオン（SSO）](/docs/ja-JP/ja-jp/authenticate/single-sign-on)セッションよりもアプリケーションセッションの方が短くなる長寿命セッションの場合には変わってきます。

詳細については、「[セッションライフタイムの制限を構成する](/docs/ja-JP/ja-jp/manage-users/sessions/configure-session-lifetime-settings)」と「[アクセストークンのライフタイムを更新する](/docs/ja-JP/ja-jp/secure/tokens/access-tokens/update-access-token-lifetime)」をお読みください。

##

<div id="learn-more">
  ## もっと詳しく
</div>

* [無効なトークンエラーのトラブルシューティング](/docs/ja-JP/ja-jp/troubleshoot/basic-issues/invalid-token-errors)
* [APIの呼び出しをチェックする](/docs/ja-JP/ja-jp/troubleshoot/authentication-issues/check-api-calls)