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信頼済みオリジンとして構成します。

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

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

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

    • ［Name（名前）］：Organizationのオリジン名を入力します。

    • ［Origin URL（オリジンのURL）］：信頼するオリジンのURLを入力します（例：https://example.okta.com）。

    • Type（タイプ）

      • ［CORS］：ウェブサイトでホスティングされているJavaScriptがOktaセッション クッキーを使用してOkta APIに対してXMLHttpRequestを行えるようにするには、このオプションを選択します。

  4. ［保存］をクリックします。

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

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

  1. 次の非表示フレームを追加して、カスタムポータルの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')"/>

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

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

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

  4. iFrameからのpostMessage応答は、次のようなコードによって処理されます。

    Copy 
    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.okta.com上のページがホスティングされます。

Copy 
<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>