Okta Browser Pluginを使用するようにカスタムエンドユーザーポータルを構成する
カスタムエンドユーザーポータルでOkta End-User Dashboardとまったく同じように動作するように、Okta Browser Pluginを構成できます。
開始する前に
このプラグインでは、構成が完了すると次のことが実行されます。
- このプラグインにより、このプラグインが存在することがカスタムポータルに通知されます。このプラグインがインストールされていないときに検出するようにカスタムポータルを構成して、エンドユーザーにプラグインのインストールを求めるバナーを表示することができます。
- このプラグインでは、状態を更新するためにOktaサーバーに対して次のAPI呼び出しも行われます。
- /api/plugin/2/sites
- /api/v1/users/me/home/tabs
- /api/internal/enduser/home
- /api/plugin/2/hashed-self-service-sites
カスタムエンドユーザーポータルのサイトのリストに関する情報を取得します(SSOのシナリオで役立ちます)。
エンドユーザーが青いプラグインアイコンをクリックしたときに表示される[Your Apps(使用アプリ)]メニューを構築するために、ポータル上のタブとアプリの場所に関する情報を取得します。
有効になっているプラグイン設定などの、現在ログインしているユーザーに関する情報を取得します。
実行中にアプリを追加するために役立つ情報を取得します。
この手順を開始する
この手順には、CORSで信頼済みオリジンとしてのポータルの構成と、カスタムポータルのHTMLの変更の2つの部分があります。
ポータルをCORSで信頼済みオリジンとして構成するには、次の手順を使用します。
- Okta Admin Consoleから、[Security(セキュリティ)]>[API]に移動します。
- [Trusted Origins(信頼済みオリジン)]タブをクリックします。
- [Add Origin(オリジンを追加)]をクリックして設定を構成します。
- [Name(名前)]:組織のオリジン名を入力します。
- [Origin URL(オリジンのURL)]:https://www.example.comなど。
- [Type(タイプ)]
- [CORS]:ウェブサイトでホストされているJavaScriptがOktaセッション クッキーを使用してOkta APIに対してXMLHttpRequestを行えるようにするには、このオプションを選択します。
- [Redirect(リダイレクト)]:このオプションは無視します。この機能には影響しません。
- [Save(保存)]をクリックします。
-
保存が完了したら、ポータルをCORSで信頼済みオリジンとして構成する必要があります。まず、次の非表示フレームを追加して、カスタムポータルのHTMLを変更します。これにより、iframeの読み込み時に、'pluginVersion'postMessageリクエストが実質的にiframeに送信されます。
-
https://www.example.comで次のようなコードを書いて、iframeからのpostMessage応答を処理します。例: window.addEventListener('message', function (event) { if (event.origin === 'https://example.okta.com' && event.data && event.data.detected) { doSomething(event.data.pluginVersion); }});
<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')"/>
仕組み
- Okta Browser Pluginによりページ上のすべてのフレームが調べられ、https://*.okta.com/app/UserHome*という形式のフレームが1つあることが検出されて、インストールされたことがそのフレームに通知されます。
- Okta WebサーバーでWeb要求が受信され、iframe所有者のオリジンが信頼されていること(つまり、https://www.example.comであること)が検証されます。信頼が検証されると、Okta Webサーバーにより、信頼済みオリジンのpostMessage要求に応答するJavaScriptコードが含まれているJSPページで応答されます。次のJSONが使用されます。
{ detected: true/false pluginVersion: x.y.z // if plugin is present }
- プラグインにより、正常に読み込まれた/app/UserHome/plugin-infoエンドポイント上にあることが検出されて、上記の4つのAPI呼び出しが行われるにつれて状態が更新されます。
- 次に、https://www.example.comで次のようなコードを書き、iframeからのpostMessage応答を処理します。
window.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.com HTMLでページをホストしています。
<html> <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>