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に送信されます。

<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応答を処理します。例： 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でページをホストしています。