Okta Browser Pluginを使用してカスタムエンドユーザーポータルを構成する
カスタムポータルでOkta End-User Dashboardとまったく同じように動作するように、Okta Browser Pluginを構成できます。
プラグインを構成すると、その存在がカスタムポータルに伝えられます。プラグインがインストールされていない場合に検出するようにカスタムポータルを構成して、プラグインのインストールをエンドユーザーに促すことができます。
このプラグインでは、状態を更新するためにOktaに対して次のAPI呼び出しも行われます。
-
/api/plugin/2/sites
カスタムポータルのサイトのリストに関する情報を取得します。これはSSOのシナリオで役立ちます。
-
/api/v1/users/me/home/tabs
ポータル上のタブとアプリの場所に関する情報を取得します。プラグインはこれを利用して、エンドユーザーが青いプラグインアイコンをクリックすると表示される[Your Apps(あなたのアプリ)] メニューを作成します。
-
/api/internal/enduser/home
有効になっているプラグイン設定など、現在サインインしているユーザーに関する情報を取得します。
-
/api/plugin/2/hashed-self-service-sites
実行中にアプリを追加するために役立つ情報を取得します。
ポータルをCORS信頼済みオリジンとして構成します。
-
Admin Consoleで、 に移動します。
- [Trusted Origins(信頼済みオリジン)]タブをクリックします。
-
[Add Origin(オリジンを追加)]をクリックして設定を構成します。
-
[Name(名前)]:Organizationのオリジン名を入力します。
-
[Origin URL(オリジンのURL)]:信頼するオリジンのURLを入力します(例:https://example.okta.com)。
-
Type(タイプ)
-
[CORS]:ウェブサイトでホスティングされているJavaScriptがOktaセッション クッキーを使用してOkta APIに対してXMLHttpRequestを行えるようにするには、このオプションを選択します。
-
-
- [保存]をクリックします。
カスタムポータルを構成する
次に、ポータルをCORS信頼済みオリジンとして構成します。
-
次の非表示フレームを追加して、カスタムポータルのHTMLを変更します。これにより、iFrameの読み込み時に、pluginVersion postMessageリクエストがiFrameに送信されます。
Copy<iframe id="okta-frame"
style="display:none"
src="https://example.okta.com/app/UserHome/plugin-info"
onload="this.contentWindow.postMessage('pluginVersion', 'https://example.okta.com/app/UserHome/plugin-info')"/> -
iFrameからのpostMessage応答を処理するために、いくつかのJavaScriptコードをサイトに追加します。例:
Copywindow.addEventListener('message', function (event) {
if (event.origin === 'https://example.okta.com' &&
event.data &&
event.data.detected) {
doSomething(event.data.pluginVersion);
}});
仕組み
- Okta Browser Pluginによってページのすべてのフレームが調べられ、 https://*.okta.com/app/UserHome*という形式のフレームが1つあるかどうかが検出されます。プラグインは、プラグインがインストール済みであることをフレームに伝えます。
-
OktaサーバーでWeb要求が受信され、iFrame所有者のオリジンが信頼されていることが検証されます。信頼関係が確認されると、OktaサーバーはJavascripコードが含まれるJSPページで応答します。このコードは、信頼済みオリジンからのpostMessageリクエストに次のJSONで応答します。
Copy{
detected: true/false
pluginVersion: x.y.z // if plugin is present
} - プラグインは、これが正しく読み込まれた/app/UserHome/plugin-infoエンドポイントにあることを検出します。次に、前述のように、Oktaへの4つのAPI呼び出しを行うことで状態を適切に更新します。
-
iFrameからのpostMessage応答は、次のようなコードによって処理されます。
Copywindow.addEventListener('message', function (event) {
if (event.origin === 'https://example.okta.com' &&
event.data &&
event.data.detected) {
doSomething(event.data.pluginVersion);
}
});
セキュリティに関する考慮事項
Oktaでは、この機能のために認証済みのセッションが必要です。
/plugin-infoエンドポイントは、次の条件と一致する場合にアクセスを拒否されます。
- 管理者が信頼済みオリジンを定義していない。
- 要求参照元(親フレームなど)が、管理者によって定義されたCORSで信頼済みオリジンのリストにない。
完全に機能する例を構成する
この機能の機能する例を表示するには、単純なHTMLページをホスティングするローカルWebサーバー(node.jsサーバーなど)を作成します。
次の例では、https://example.okta.com上のページがホスティングされます。
<leve>
<head>
<script>
window.addEventListener('message', function (event) {
if (event.origin === 'https://example.okta.com' &&
event.data &&
event.data.detected) {
document.getElementById('pluginVersion').innerHTML = event.data.pluginVersion;
}
});
</script>
</head>
<body>
Plugin Detected: <b><span id="pluginVersion"></span></b>
<iframe id="okta-frame"
style="display:none"
src="https://example.okta.com/app/UserHome/plugin-info"
onload="this.contentWindow.postMessage('pluginVersion', 'https://example.okta.com/app/UserHome/plugin-info')"/>
</body>
<html>