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：この呼び出しは、必要時にアプリを追加する上で有用な情報を取得します。

ポータルを信頼済みオリジンとして構成する

ポータルは、Okta Browser Pluginに送られるリクエストの信頼済みオリジンとして構成できます。

この機能は、廃止される予定のサードパーティ製cookieに依存しています。手順については、「サードパーティ製cookie廃止の影響を軽減する」を参照してください。

特定の親ドメインを使用する

iFrameのよりセキュアな埋め込みのために特定の親ドメインを利用できます。

Admin Consoleで［Security（セキュリティ）］［API］に移動します。
［Trusted Origins（信頼済みオリジン）］タブをクリックします。
［Add Origin（オリジンを追加）］をクリックして設定を構成します。
- ［Origin name（オリジン名）］：組織のオリジン名を入力します。
- ［Origin URL（オリジンのURL）］：信頼するオリジンのURLを入力します（例：https://example.okta.com）。
- ［Choose Type（タイプを選択）］：次のiFrame埋め込みオプションを選択します。
  - ［iFrame embed（iFrameの埋め込み）］：OktaサインインページとシングルソーシングURLのiFrame埋め込みを許可するには、このオプションを選択します。
    - ［Allows iFrame embedding of Okta End User Dashboard（Okta End-User DashboardのiFrameの埋め込みを許可）］：End-User DashboardのiFrame埋め込みを許可するには、このオプションを選択します。
［Save（保存）］をクリックします。

任意の親ドメインを使用する

iFrameの埋め込みに任意の親ドメインを利用します。

この方法では、Okta orgはクリックジャッキング攻撃を受けやすくなります。代わりに「特定の親ドメインを使用する」の手順に従います。

Admin Consoleで［Customizations（カスタマイズ）］［Other（その他）］に移動します。
［IFrame Embedding（IFrameの埋め込み）］セクションで［Allow IFrame embedding（IFrameの埋め込みを許可）］を選択します。

カスタムポータルを構成する

次に、ポータルを信頼済みオリジンとして構成します。

次の非表示iFrameを追加して、カスタムポータルのHTMLを変更します。これにより、iFrameの読み込み時に、pluginVersion postMessageリクエストがiFrameに送信されます。

Copy

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

iFrameからのpostMessage応答を処理するために、いくつかのJavaScriptコードをサイトに追加します。例：

Copy

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

仕組み

Okta Browser Pluginによってページのすべてのフレームが調べられ、 https://*.okta.com/app/UserHome*という形式のフレームが1つあるかどうかが検出されます。プラグインは、プラグインがインストール済みであることをフレームに伝えます。
Oktaサーバーでリクエストが受信され、iFrame所有者のオリジンが信頼されていることが検証されます。信頼関係が確認されると、OktaサーバーはJavascripコードが含まれるJSPページで応答します。このコードは、信頼済みオリジンからのpostMessageリクエストに次のJSONで応答します。
Copy
```
{
  detected: true/false
  pluginVersion: x.y.z // if plugin is present
}
```
プラグインは、これが正しく読み込まれた/app/UserHome/plugin-infoエンドポイントにあることを検出します。次に、前述のように、Oktaへの4つのAPI呼び出しを行うことで状態を適切に更新します。

iFrameからのpostMessage応答は、次のようなコードによって処理されます。

Copy

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

セキュリティに関する考慮事項

Oktaでは、この機能のために認証済みのセッションが必要です。

/plugin-infoエンドポイントは、次の条件と一致する場合にアクセスを拒否されます。

管理者が信頼済みオリジンを定義していない。
管理者が定義した信頼済みオリジンのリストにリクエストの参照元（親フレームなど）がない。

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

この機能の機能する例を表示するには、単純なHTMLページをホスティングするローカルWebサーバー（node.jsサーバーなど）を作成します。

次の例では、https://example.okta.com上のページがホスティングされます。

Copy

<leve>
<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>