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：この呼び出しは、必要時にアプリを追加する上で有用な情報を取得します。

ポータルを信頼済みオリジンとして構成する

ポータルは、Okta Browser Pluginに送られるリクエストの信頼済みオリジンとして構成できます。

特定の親ドメインを使用する

iFrameのよりセキュアな埋め込みのために特定の親ドメインを利用できます。

  1. Admin Consoleで、セキュリティ（Security） > APIに移動します。

  2. 信頼済みオリジン（Trusted Origins）タブをクリックします。

  3. オリジンを追加（Add Origin）をクリックして設定を構成します。

    • オリジン名（Origin name）：組織のオリジン名を入力します。
    • オリジンのURL（Origin URL）：信頼するオリジンのURLを入力します例：https://your.custom.portal.com。
    • タイプを選択（Choose Type）：次のiFrame埋め込みオプションを選択します。
      • iFrameの埋め込み（iFrame embed）：OktaサインインページとシングルソーシングURLのiFrame埋め込みを許可するには、このオプションを選択します。
      • Okta End-User DashboardのiFrameの埋め込みを許可（Allows iFrame embedding of Okta End User Dashboard）：End-User DashboardのiFrame埋め込みを許可するには、このオプションを選択します。
  4. 保存（Save）をクリックします。

任意の親ドメインを使用する

iFrameの埋め込みに任意の親ドメインを利用します。

  1. Admin Consoleでカスタマイズ（Customizations） > その他（Other）に移動します。

  2. IFrameの埋め込み（IFrame Embedding）セクションでIFrameの埋め込みを許可（Allow IFrame embedding）を選択します。

カスタムポータルを構成する

次に、ポータルを信頼済みオリジンとして構成します。

  1. 次の非表示iFrameを追加して、カスタムポータルのHTMLを変更します。これにより、iFrameの読み込み時に、pluginVersion postMessageリクエストがiFrameに送信されます。 

    <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')"/>

    srcやonloadのカスタムドメインは使用できません。

  2. iFrameからのpostMessage応答を処理するために、いくつかのJavaScriptコードをサイトに追加します。例： 

    window.addEventListener('message', function (event) {
  if (event.origin === 'https://example.okta.com' && 
      event.data && 
      event.data.detected) {
    doSomething(event.data.pluginVersion);
}});

仕組み

  1. Okta Browser Pluginによってページのすべてのフレームが調べられ、https://*.okta.com/app/UserHome*という形式のフレームが1つあるかどうかが検出されます。プラグインは、プラグインがインストール済みであることをフレームに伝えます。

  2. Oktaサーバーでリクエストが受信され、iFrame所有者のオリジンが信頼されていることが検証されます。信頼関係が確認されると、OktaサーバーはJavascripコードが含まれるJSPページで応答します。このコードは、信頼済みオリジンからのpostMessageリクエストに次のJSONで応答します。

    {
  detected: true/false
  pluginVersion: x.y.z // if plugin is present
}
  3. プラグインは、これが正しく読み込まれた/app/UserHome/plugin-infoエンドポイントにあることを検出します。次に、前述のように、Oktaへの4つのAPI呼び出しを行うことで状態を適切に更新します。

  4. 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エンドポイントは、次の条件と一致する場合にアクセスを拒否されます。

  • 管理者が信頼済みオリジンを定義していない。
  • 管理者が定義した信頼済みオリジンのリストにリクエストの参照元（親フレームなど）がない。

完全に機能する例を構成する

この機能の機能する例を表示するには、単純な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>