セッション監視

概要

セッション変更にリアルタイムで反応する必要があるアプリケーション（IdPセッション終了時のログアウト、ブラウザタブ間の認証状態同期など）のために、@authrim/web はいくつかの監視メカニズムを提供します。

機能	目的	ブラウザ対応
Tab Sync	ブラウザタブ間の認証状態同期	すべてのモダンブラウザ
Session Monitor	定期的なセッション検証ポーリング	すべてのブラウザ
Front-Channel Logout	iframeでログアウト通知を受信	制限あり（注記参照）
Check Session Iframe	postMessageでIdPセッション変更を検知	制限あり（注記参照）

Tab Sync

Tab Syncは BroadcastChannel APIを使ってブラウザタブ間の認証状態を同期します。ユーザーがあるタブでログインまたはログアウトすると、他のすべてのタブが状態を更新します。

使い方

import { TabSyncManager } from '@authrim/web';

const tabSync = new TabSyncManager({
  channelName: 'authrim-sync',  // デフォルト
  onLogin: (payload) => {
    console.log('ログイン（別のタブから）:', payload.user);
    // UIを更新して認証済み状態を表示
    refreshPage();
  },
  onLogout: () => {
    console.log('ログアウト（別のタブから）');
    // UIをクリアしてログインを表示
    window.location.href = '/login';
  },
});

// 監視開始
tabSync.start();

// イベントのブロードキャスト（認証状態変更時にSDKが自動的に呼び出し）
tabSync.broadcastLogin({ user, session });
tabSync.broadcastLogout();

// 監視停止
tabSync.stop();

動作原理

sequenceDiagram
    participant Tab1 as タブ1
    participant BC as BroadcastChannel
    participant Tab2 as タブ2
    participant Tab3 as タブ3

    Tab1->>BC: broadcastLogin({ user, session })
    BC->>Tab2: onLogin({ user, session })
    BC->>Tab3: onLogin({ user, session })
    Tab2->>Tab2: UI更新
    Tab3->>Tab3: UI更新

パラメータ

パラメータ	型	デフォルト	説明
channelName	string	'authrim-sync'	BroadcastChannel名
onLogin	(payload) => void	—	別タブでログイン検知時のコールバック
onLogout	() => void	—	別タブでログアウト検知時のコールバック

ノート

BroadcastChannel はすべてのモダンブラウザでサポートされています。古いブラウザの場合、SDKは localStorage イベントにフォールバックします。

Session Monitor

Session Monitorは定期的にAuthrimサーバーに対してセッションを検証します。Check Session Iframe（IdPレベルのセッション状態を確認）とは異なり、アプリレベルのセッションを検証します。

使い方

import { SessionMonitor } from '@authrim/web';

const monitor = new SessionMonitor({
  auth,  // Authrimクライアントインスタンス
  interval: 60000,  // 60秒ごとにチェック
  onExpired: () => {
    console.log('セッション期限切れ');
    window.location.href = '/login';
  },
  onError: (error) => {
    console.warn('セッションチェック失敗:', error);
  },
});

// 監視開始
monitor.start();

// 監視停止
monitor.stop();

パラメータ

パラメータ	型	デフォルト	説明
auth	Authrim	—	SDKクライアントインスタンス
interval	number	60000	ポーリング間隔（ミリ秒）
onExpired	() => void	—	セッションが無効になった時のコールバック
onError	(error) => void	—	チェック失敗時のコールバック

Front-Channel Logout

Front-Channel Logoutにより、IdPはユーザーがログアウトした際にアプリケーションに通知できます。IdPがアプリのログアウトエンドポイントを指す隠しiframeを読み込み、ローカルセッションをクリアします。

ブラウザ互換性

Front-Channel LogoutはIdPからの隠しiframeの読み込みに依存しています。サードパーティCookieやiframeストレージアクセスを制限するブラウザ（Safari ITP、サードパーティCookie制限のあるChrome）では、このメカニズムは安定して動作しない可能性があります。ほとんどのアプリケーションには、Tab Sync と Session Monitor の組み合わせがより信頼性の高いセッション管理を提供します。

セットアップ

Authrim管理パネルでfront-channelログアウトURIを登録します：

設定	値
Front-Channel Logout URI	https://myapp.com/logout
Front-Channel Logout Session Required	true（推奨）

ハンドラー

import { FrontChannelLogoutHandler } from '@authrim/web';

const handler = new FrontChannelLogoutHandler({
  auth,  // Authrimクライアントインスタンス
  onLogout: () => {
    console.log('IdPからログアウトされました');
    window.location.href = '/';
  },
});

// 初期化（ログアウトiframeのロードを監視）
handler.init();

動作原理

1. ユーザーがIdP（または別のアプリ）でログアウト
2. IdPがfront-channelログアウトURI（隠しiframe内）にGETリクエストを送信
3. ページの FrontChannelLogoutHandler が通知を受信
4. ローカルセッションがクリアされ、onLogout コールバックが呼び出される

Check Session Iframe

Check Session Iframeは、ユーザーのIdPセッションが変更されたとき（例：別のアプリでログアウトした、IdPでセッションが期限切れになった）を検知します。

IdPの check_session_iframe エンドポイントから隠しiframeを読み込み、postMessage でメッセージを交換して動作します。

ブラウザ互換性

Check Session IframeはOIDC Session Management仕様に基づいていますが、Safari（ITP）やサードパーティCookieをブロックするブラウザでは動作しません。ほとんどのアプリケーションには、代わりに Session Monitor（ポーリング）と Tab Sync の組み合わせを推奨します。この機能は主に、ブラウザ制限が管理されているOIDC準拠のエンタープライズ環境で有用です。

動作原理

sequenceDiagram
    participant App as アプリ
    participant Iframe as Check Session Iframe
    participant IdP as Authrim IdP

    App->>Iframe: 監視開始
    loop N秒ごと
        Iframe->>IdP: postMessage(client_id + session_state)
        IdP-->>Iframe: "changed" | "unchanged"
        alt セッション変更
            Iframe->>App: コールバック: セッション変更
            App->>App: 再認証またはログアウト
        end
    end

使い方

import { CheckSessionIframeManager } from '@authrim/web';

const manager = new CheckSessionIframeManager({
  clientId: 'my-app',
  checkSessionIframeUri: 'https://auth.example.com/check-session',
  interval: 5000,  // 5秒ごとにチェック（デフォルト: 3000）
});

// 監視開始
manager.start({
  sessionState: currentSessionState,
  onChanged: () => {
    console.log('IdPセッションが変更されました — 再認証中...');
    // サイレント認証を試行またはログインにリダイレクト
  },
});

// 監視停止（例：ページアンマウント時）
manager.stop();

パラメータ

パラメータ	型	デフォルト	説明
clientId	string	—	OAuthクライアントID
checkSessionIframeUri	string	—	IdPのcheck_session_iframe URL
interval	number	3000	ポーリング間隔（ミリ秒）

監視の組み合わせ

本番環境向けの堅牢なセットアップでは、Tab Sync と Session Monitor を組み合わせます：

const auth = await createAuthrim({
  issuer: 'https://auth.example.com',
  clientId: 'my-app',
  enableOAuth: true,
});

// 1. Tab Sync — 即座のクロスタブ更新
const tabSync = new TabSyncManager({
  onLogin: () => location.reload(),
  onLogout: () => { window.location.href = '/login'; },
});
tabSync.start();

// 2. Session Monitor — 定期的なサーバー側検証
const monitor = new SessionMonitor({
  auth,
  interval: 60000,
  onExpired: () => { window.location.href = '/login'; },
});
monitor.start();

// ページアンロード時にクリーンアップ
window.addEventListener('beforeunload', () => {
  tabSync.stop();
  monitor.stop();
});

次のステップ

• セッション管理 — 基本的なセッション操作
• イベント — SDKイベントシステム
• クロスドメインSSO — 複数ドメイン間のSSO