Okta Browser Pluginを使用するようにカスタム・エンド・ユーザー・ポータルを構成する

カスタム・エンド・ユーザー・ポータルでOktaエンド・ユーザー・ダッシュボードとまったく同じように動作するように、Okta Browser Pluginを構成できます。

開始する前に

このプラグインでは、構成が完了すると次のことが実行されます。

  • このプラグインにより、このプラグインが存在することがカスタム・ポータルに通知されます。このプラグインがインストールされていないときに検出するようにカスタム・ポータルを構成して、エンド・ユーザーにプラグインのインストールを求めるバナーを表示することができます。
  • このプラグインでは、状態を更新するためにOktaサーバーに対して次のAPI呼び出しも行われます。
    • /api/plugin/2/sites
    • カスタム・エンド・ユーザー・ポータルのサイトのリストに関する情報を取得します(SSOのシナリオで役立ちます)。

    • /api/v1/users/me/home/tabs
    • エンド・ユーザーが青いプラグイン・アイコンをクリックしたときに表示される[使用アプリ]メニューを構築するために、ポータル上のタブとアプリの場所に関する情報を取得します。

    • /api/internal/enduser/home
    • 有効になっているプラグイン設定などの、現在ログインしているユーザーに関する情報を取得します。

    • /api/plugin/2/hashed-self-service-sites
    • 実行中にアプリを追加するために役立つ情報を取得します。

この手順を開始する

この手順には、CORSで信頼できるオリジンとしてのポータルの構成と、カスタム・ポータルのHTMLの変更の2つの部分があります。

ポータルをCORSで信頼できるオリジンとして構成するには、次の手順を使用します。

  1. Okta管理コンソールから、[セキュリティー] > [API]に移動します。
  2. [信頼できるオリジン]タブをクリックします。
  3. [オリジンを追加]をクリックして設定を構成します。
    • [名前]:組織のオリジン名を入力します。
    • [オリジンのURL]https://www.example.comなど。
    • タイプ
      • CORS:WebサイトでホストされているJavaScriptがOktaセッションのCookieを使用してOkta APIに対してXMLHttpRequestを行えるようにするには、このオプションを選択します。
      • [リダイレクト]:このオプションは無視します。この機能には影響しません。
  4. [保存]をクリックします。
  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 Browser Pluginによりページ上のすべてのフレームが調べられ、https://*.okta.com/app/UserHome*という形式のフレームが1つあることが検出されて、インストールされたことがそのフレームに通知されます。
  2. 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 }

  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で信頼できるオリジンのリストにない。

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

この機能の機能する例を構成するには、以下の単純な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>