Oktaブラウザー プラグインを使用するためのカスタム エンドユーザー ポータルの構成

カスタム エンドユーザー ポータルでOktaブラウザー プラグインを、Oktaエンドユーザー ダッシュボードで動作するのと全く同じように動作するよう構成できます。

はじめに

プラグインの構成が完了すると以下のように動作します。

  • プラグインはカスタムポータルに（プラグインが）存在していることを通知します。プラグインがインストールされていないことを検出し、エンドユーザーにプラグインをインストールするよう求めるバナーを表示するようカスタムポータルを構成できます。
  • プラグインは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

      • アプリをオンザフライで追加するのに役立つ情報を取得します。

この手順の開始

この手順は次の2つのパートより構成されます： CORS信頼済みオリジンとしてのポータルの構成、およびカスタム ポータルHTMLの編集。

以下の手順を使用してポータルをCORS信頼オリジンとして設定します。

  1. Okta管理コンソールで、［Security（セキュリティ）］> ［API］の順に移動します。
  2. ［Trusted Origins（信頼できるオリジン）］タブをクリックします。
  3. ［Add Origin（オリジンの追加）］をクリックして設定を構成します。
    • Name（名前） – 組織のオリジン名を入力します。
    • Origin URL（オリジンURL） – https://www.example.comなど。
    • Type（タイプ）
      • CORS – このオプションを選択すると、WebサイトでホストされているJavaScriptが、OktaAPIに対してOktaセッションのクッキーを使用してXMLHttpRequestを行えるようになります。
      • Redirect（リダイレクト） – このオプションは無視します。この機能に何も影響を与えません。
  4. ［Save（保存）］をクリックします。

  5. 保存が完了したら、ポータルをCORS信頼オリジンとして設定する必要があります。 はじめに、以下の非表示フレームを追加してカスタム ポータルHTMLを編集します。これは、iframeが読み込まれた時に効果的に'pluginVersion'postMessageリクエストをiframeに送信します。

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

  6. https://www.example.comに以下のようなコードを記述し、iframeからのpostMessageレスポンスを処理します。例：

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

仕組み

  1. Oktaブラウザー プラグインがページのすべてのフレームを検査し、フォームhttps://*.okta.com/app/UserHome*のフレームがあることを検出し、そのフレームがインストールされていることを伝えます。
  2. Okta WebサーバーがWebリクエストを受信し、iframeオーナーのオリジンが信頼できる（すなわち、https://www.example.comである）ことを検証します。信頼できると検証された場合、Okta WebサーバーはJavascriptコードが含まれたJSPページを返し、信頼できるオリジン postMessageリクエストに以下のJSONで応答します。 

     { detected: true/false pluginVersion: x.y.z // if plugin is present }

  3. プラグインは、ページが/app/UserHome/plugin-infoエンドポイント上に問題なく読み込まれていることを検出し、上述した 4つのAPI呼び出しを作成することでステータスを適時アップデートします。
  4. 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信頼オリジンのリストに載っていない。

完全に機能するサンプルの構成

この機能のサンプルを構成するには、以下のようにローカルWebサーバー（ Node.jsサーバーなど）を作成して簡単なHTMLページをホストます。以下の例は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>