CRM APIをコールするための埋込みVisual Builderアプリケーションの有効化

Visual Builderアプリケーションを埋め込む場合は、次に説明する変更を行って、アプリケーションがJSON Web Tokens (JWT)を使用してCRM APIをコールできるようにします。

これらの変更を行った後、アプリケーションは、アプリケーション・コンポーザからiframeメッセージングAPIを介して渡されたJWTトークンを使用できます。このトークンを使用すると、セキュリティcookieを確立するためにIDCSへのリダイレクトを実行する必要がなくなり、現在のユーザーの情報を取得するためにサーバーをコールする必要もなくなります。

埋込みVBアプリケーションにJWTトークンを渡すには、次を実行する必要があります:

Service Workerを無効にします。
埋込み用にVBアプリケーションを構成します。
FAアプリケーションへの直接接続のサービスを構成します。
セキュリティ・プロバイダ・ファイルをアプリケーションに追加します。
新しいセキュリティ・プロバイダを登録します。

これは、アプリケーションによって次のことが行われる場合に実行できることに注意してください:

FA APIに対してのみRESTコールを実行
IDCSセキュリティ・トークンを必要とするものはリクエストしません
ブラウザ・アプリケーション内の機能セキュリティ・ロジックに権限またはロールを使用しません

1.サービス・ワーカーの無効化

次のコードを、終了本文タグの直前に、アプリケーションのindex.htmlの最後に追加します。

<script type="text/javascript">
  vbInitConfig['SERVICE_WORKER_CONFIG'] = { disabled: true };
</script>

ノート: これはオプションですが、実行時のオーバーヘッドを削減するために推奨されます。

2.埋込み用のアプリケーションの構成

アプリケーションをiframeとして埋め込むことができるようにするには、Oracle Cloud Oracle Visual Builderを使用したアプリケーションの開発ガイドのOracle CloudアプリケーションへのWebアプリケーションの埋込みを参照してください。

3.FAへの直接接続のサービスの構成

直接接続をサポートするには、Visual Builderサービス・インスタンスでHTTPSを使用する必要があります。 FAバック・エンドが埋込みコンテンツを提供するサーバーURLと同じであることを確認してください。また、FAサービスがVBプロキシを通過しないようにし、FAバックエンドに対して直接接続します。

次のいずれかの接続認証オプションを選択します。

認証が定義されていません
現在のユーザー・アイデンティティの伝播
直接(認証プロキシのバイパス)
Oracle Cloudアカウント、トークン・リレー有効
ユーザー・アサーションOAuth 2.0、トークン・リレー有効
クライアント資格証明OAuth 2.0、トークン・リレー有効
リソース所有者OAuth 2.0、トークン・リレー有効

詳細は、Oracle Cloud Oracle Visual Builderを使用したアプリケーションの開発ガイドのサービス接続の接続タイプおよび認証タイプの構成を参照してください。

4.セキュリティ・プロバイダ・ファイルの追加

次のJavaScriptをコピーして2つの.jsファイルに貼り付け、/webApps/{name}/resources/jsディレクトリに追加します。

この内容をコピーして、FusionEmbeddedWithNoUserSecurityProvider.jsというファイルに貼り付けます。

define(['vb/types/securityProvider'],
  (SecurityProvider) => {
    class FusionEmbeddedWithNoUserSecurityProvider extends SecurityProvider {
      constructor() {
        super();
      }
      
      /**
       * Install our fetch handler to inject the JWT token from FA.
       */
      getServiceWorkerPlugins(config, isAnonymous) {
        return new Promise(r => r(['resources/js/InjectFATokenFetchPlugin']));
      }
      
      /**
       * Dummy method to return a user without any information, roles, or permissions. Used to skip the
       * traditional call to _currentusers for performance reasons
       */
      fetchCurrentUserRaw(config) {
        return new Promise((r) => {
          r({ response: { 
             ok: true
           },
           body: {
              userId: 'anonymous',
              username: 'anonymous',
              longId: 'anonymous',
              fullName: 'anonymous',
              email: 'anonymous',
              roles: [],
              permissions: [],
              isAdmin: false,
              isAuthenticated: true,
              isAnonymous: false
            }
          });
        });
      }
    }
    
    return FusionEmbeddedWithNoUserSecurityProvider;
 });

次に、このコンテンツをInjectFATokenFetchPlugin.jsというファイルにコピーして貼り付けます。

define(['vbsw/api/fetchHandlerPlugin'], function (FetchHandlerPlugin) {
  'use strict';

  class InjectFATokenFetchPlugin extends FetchHandlerPlugin {
      constructor(context) {
        super(context);
        
        // when initialized, start the request for the JWT token from the parent iframe
        this.waitForTokenInit = new Promise((resolve) => {
          const isEmbedded = window.location !== window.parent.location;

          if (isEmbedded) {
            window.addEventListener('message', event => {
              if (!event.origin.startsWith(window.frames.origin)) {
                resolve({
                  host: event.origin,
                  token: event.data
                });
              } 
              else {
                  return;
              }
            });

            const payload = {};
            payload.origin = window.frames.origin;
            payload.method = 'requestJwtToken';
            window.parent.postMessage(JSON.stringify(payload), '*');
          }
          
          // TODO: if we are not in an embedded iframe (ran directly from VB) we will use the following credentials
          // below. This must be changed to match the environment and current JWT token (using postman to retreive). 
          else {
            resolve({
              host: 'https://cccn.fa.em2.oraclecloud.com',
              token: "xxx ... xxx"
            });
          }
        });
      }

      handleRequestHook(request) {
        return this.waitForTokenInit.then((tokenInfo) => {
          if (request.url.indexOf(tokenInfo.host) === 0) {
            const headers = new Headers();
            request.headers.forEach (function(val, key) {
              if (!key.startsWith('vb-')) {
                headers.append(key, val);
              };
            });
            headers.append('Authorization', `Bearer ${tokenInfo.token}`);
            const alteredRequest = new Request(request, {headers});
            return alteredRequest;
          }
          return request;
        });
      }
   }

    return InjectFATokenFetchPlugin;
});

5.セキュリティ・プロバイダの登録

/webApps/{name}/app-flow.jsonファイルのuserConfigプロパティを次のように変更します:

"userConfig": {
    "type": "resources/js/FusionEmbeddedWithNoUserSecurityProvider",
    "configuration": {},
    "embedding": "any"
  }