以下に、OIDC Front-Channel Logoutにおいてiframe技術を活用し、複数クライアントのログアウトを実現するためのサンプルコードを示します。このコードは、OIDCプロバイダ（IdP）のログアウトエンドポイントにユーザーがアクセスした際に、iframeを利用して複数クライアントにログアウト通知を送信する方法を示しています。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OIDC Front-Channel Logout</title>
</head>
<body>
<h1>Logging out...</h1>
<p>You will be logged out from all associated applications.</p>
<!-- Main logout process -->
<script>
// クライアントのログアウトエンドポイントリスト
const logoutEndpoints = [
'https://client1.example.com/logout',
'https://client2.example.com/logout',
'https://client3.example.com/logout'
];
// iframeを作成して各クライアントのログアウトエンドポイントにアクセス
logoutEndpoints.forEach((endpoint) => {
const iframe = document.createElement('iframe');
iframe.src = endpoint;
iframe.style.display = 'none'; // 表示されないように隠す
document.body.appendChild(iframe);
});
// すべてのiframeにログアウト通知が送信された後のリダイレクト
setTimeout(() => {
window.location.href = 'https://idp.example.com/post-logout-redirect';
}, 3000); // 必要に応じて遅延時間を調整
</script>
</body>
</html>
説明
-
iframeの生成:
logoutEndpoints配列に格納されたクライアントのログアウトエンドポイントに対して、iframeを生成してアクセスします。 -
iframeの非表示: iframeは
style.display = 'none'で非表示に設定され、ユーザーに見えない形でログアウトリクエストが送信されます。 -
リダイレクト: すべてのログアウトリクエストが送信された後、指定されたURL（OIDCプロバイダが定義する
post-logout-redirect）にリダイレクトされ、ユーザーはログアウト完了後のページに誘導されます。 -
時間設定:
setTimeout()関数で遅延を設定し、すべてのログアウトリクエストが処理される時間を確保します。
このサンプルコードにより、OIDC Front-Channel Logoutの実装イメージを掴むことができるでしょう。複数クライアントのセッション終了をブラウザを介して同時に行う方法が実現されます。