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で信頼済みオリジンとしてのポータルの構成と、カスタムポータルのHTMLの変更の2つの部分があります。

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

  1. Okta Admin Consoleから、[Security(セキュリティ)]>[API]に移動します。
  2. [Trusted Origins(信頼済みオリジン)]タブをクリックします。
  3. [Add Origin(オリジンを追加)]をクリックして設定を構成します。
    • [Name(名前)]:組織のオリジン名を入力します。
    • [Origin URL(オリジンのURL)]https://www.example.comなど。
    • [Type(タイプ)]
      • [CORS]:ウェブサイトでホストされているJavaScriptがOktaセッション クッキーを使用してOkta APIに対して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応答を処理します。例: 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>