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

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

  8.  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>