機械翻訳について

Oracle Content Management VBCSセキュア・フォーム・コンポーネントの構築

VBCSのビジネス・オブジェクトによって公開されるREST APIを使用して、ユーザー認証を必要とする単純なwebフォームを提供するローカルOracle Content Managementコンポーネントを作成できます。

VBCS構成

1. Allow Cross-Origin Resource Sharing (CORS):

   1. Visual Builder、「設定」、「許可される原点」の順に選択します。

   2. 「新しい原点」をクリックし、オリジン・アドレスのOracle Content ManagementサーバーのURLを入力します。

   3. チェック・マークをクリックして保存します。

2. 新しいアプリケーションの作成

   .

3. 認証済ユーザーのアクセスを許可するようにアプリケーションを構成します。

   1. 「アプリケーション設定」を開きます。

      。
      
      「図vbcs_application_settings.pngの説明」
      

   2. 設定ページで、「ユーザー・ロール」を選択します。

   3. ビジネス・オブジェクトへのアクセスを制御するロールを追加します。

      「マッピング」の値は、Oracle Identity Cloud Serviceからのグループです。 グループを追加するには、「組織のグループの作成」を参照してください。

4. ビジネス・オブジェクトの作成

   • フィールドを追加します。

     
     
     「図vbcs_add_fields.pngの説明」
     

   • ロールベースのセキュリティの有効化

   • ロールを作成権限に付与します。

     
     
     「図vbcs_grant_roles.pngの説明」
     

Oracle Content Managementローカル・コンポーネントの構築

前提:

• VBCSアプリケーション名はRequestFormです。

• ビジネス・オブジェクト名はrequestformで、次のカスタム・フィールドが含まれています:

  • name (必須)

  • email (必須)

  • phone

  • subject

  • message

変更assets/render.js

1. コンポーネント・テンプレートを次のように定義します。

   <!-- ko if: initialized -->
   <div class="form">
   
          <!-- ko if:  requestSuccessMsg -->
          <div class="request-msg green" data-bind="text: requestSuccessMsg"></div>
          <!-- /ko -->
          <!-- ko if:  requestFailMsg -->
          <div class="request-msg red" data-bind="text: requestFailMsg"></div>
          <!-- /ko -->
   
          <label class="required-field" for="name">Name</label>
          <input type="text" id="name" name="name" required placeholder="Your name. . ." data-bind="value: name"/>
   
          <label class="required-field" for="email">Email</label>
          <input type="text" id="email" name="email" required placeholder="Your email. . ." data-bind="value: email"/>
   
          <label for="phone"></label>Phone</label>
          <input type="text" id="phone" name="phone" data-bind="value: phone"/>
   
          <label for="subject">Subject</label>
          <input type="text" id="subject" name="subject" data-bind="value: subject"/>
   
          <label for="message"></label>Message</label>
          <textarea id="message" name="message" rows="6" data-bind="value: message"/>
   
          <button data-bind="click: sendRequest, , enable: canSubmit">Send Request</button>
   </div>
   
   <!-- note that the component has completed rendering into the page -->
   <div class="scs-hidden" data-bind="scsRenderStatus: {'id': id, 'status': 'complete'}"></div>
   <!-- /ko -->
   

2. ノック・アウトViewModelのフィールドの監視可能ファイルを作成します。

   self.initialized = ko.observable(false);
   self.requestSuccessMsg = ko.observable();
   self.requestFailMsg = ko.observable();
   self.VBCSServerUrl = ko.observable();
   self.name = ko.observable();
   self.email = ko.observable();
   self.phone = ko.observable();
   self.subject = ko.observable();
   self.message = ko.observable();
   
   // Get VBCS server
   var serverPromise = getVBCSServerURL();
       serverPromise.then(function (result) {
       self.VBCSServerUrl(result.url);
       self.initialized(true);
   });
   

   
   self.canSubmit = ko.computed(function () {
   	return self.name() && self.email();
   }, self);
   

3. 必須フィールドを処理します。

   すべての必須フィールドに値が入力されている場合のみ、送信ボタンを有効にします。

4. VBCS接続を取得

   VBCS接続を構成したら、次の2つの方法で接続を取得できます:

   • サイト・ランタイムのサイト情報から

   • サイト・ビルダーの統合から

     var getVBCSServerURL = function () {
         var serverPromise = new Promise(function (resolve, reject) {
         // First try to get from siteinfo
         var siteConnections = SCSRenderAPI.getSiteProperty('siteConnections'
         var serverUrl = siteConnections && siteConnections.VBCSConnection;
         if (serverUrl) {
             console.log('Get VBCS server from siteinfo: ' + serverUrl);
             resolve({'url': serverUrl});
         } else {
             // Get from integrations
             var configUrl = '/documents/web?IdcService=AF_GET_APP_INFO_SIMPLE&dAppName=VBCS';
                 $.ajax({
                     type: 'GET',
                     dataType: 'json',
                     url: configUrl
                     success: function (data) {
                         var appInfo = data.ResultSets.AFApplicationInfo;
                         var enabled;
                         if (appInfo) {
                             for (var i = 0; i < appInfo.fields.length; i += 1) {
                                 if (appInfo.fields[i].name === 'dAppEndPoint') {
                                     serverUrl = appInfo.rows[appInfo.currentRow][i];
                                 } else if (appInfo.fields[i].name === 'dIsAppEnabled') {
                                     enabled = appInfo.rows[appInfo.currentRow][i];
                                 }
                                 if (serverUrl && enabled) {
                                     break;
                                 }
                             }
                         console.log('Get VBCS server from Idc Service: ' + serverUrl);
                         resolve({'url': serverUrl});
                     },
                     error: function (xhr, status, err) {
                         console.log('Request failed: url:' + configUrl + ' status: ' + status + ' error: ' + err);
                         resolve({'url': serverUrl});
                     }
                 });
             }
         });
         return serverPromise;
     };

5. 認可トークンを取得します。

   要件: Oracle Content ManagementとVBCSは同じアイデンティティ・ドメインにデプロイされます。

   var getAuthToken = function (args) {
       // dummy function if callbacks not supplied
       var dummyCallback = function () {};
   
       // extract the args and create the server URL
       var serverURL = (args.serverURL || '/').split('/ic/')[0],
           successCallback = args.successCallback || dummyCallback,
           errorCallback = args.errorCallback || dummyCallback,
           tokenURL = serverURL + ‘/ic/builder/resources/security/token’;
   
       // For VBCS to get the authtoken:
       //  - make a POST call to /ic/builder/resources/security/token
       //  - include scope=run-time form parameter
       var getToken = function (tokenURL, successCallback, errorCallback) {
           $.ajax({
               'type': 'POST',
               'url': tokenURL,
               data: {
                   scope: 'run-time'
               },
               'xhrFields': {
                   withCredentials: true
                },
                'success': successCallback
           }).fail(errorCallback);
       };
   
       // try to get the token normally
       getToken(tokenURL,
           function (resp, status, xhr) {
               var ct = xhr.getResponseHeader("content-type") || "";
   
               // if the response was an HTML Form. . .
               if (ct.indexOf('html') > -1) {
                   // parse the form and submit it
                   var parser = new DOMParser(),
                       htmlDoc = parser.parseFromString(resp, "text/html"),
                       forms = htmlDoc.getElementsByTagName("form");
                   if (forms.length === 1) {
                       var f = forms[0];
                       $.ajax({
                           'type': 'POST',
                           'url': f.action,
                           'data': $(f).serialize(),
                           'xhrFields': {
                               'withCredentials': true
                           'success': function () {
                               // retry getting the token now the form was auto-submitted
                               getToken(tokenURL, successCallback, errorCallback);
                           }
                       }).fail(function () {
                           // even if the form submit failed, retry getting the token
                           getToken(tokenURL, successCallback, errorCallback);
                       });
                   }
               } else {
                   // already logged in return the token
                   successCallback(resp);
               }
           },
   	 errorCallback);
   };

6. リクエストを送信します。

   self.sendRequest = function (data, event) {
       var vbcsServer = self.VBCSServerUrl();
       var authorization, token;
       var appName = 'securerequestform',
           mode = 'rt',
           appVersion = 'live',
           businessObject = 'Requestform';
       var url = vbcsServer + '/' + mode + '/' + appName + '/' + appVersion + '/resources/data/' + businessObject;
       var payload = {
           "name": self.name(),
           "email": self.email(),
           "phone": self.phone(),
           "subject": self.subject(),
           "message": self.message()
       };
       // get token first
       getAuthToken({
           'serverURL': self.VBCSServerUrl(),
           'successCallback': function (data) {
               token = data;
               authorization = (token.token_type ? token.token_type : 'Bearer') + ' ' + token.access_token;
               $.ajax({
                   type: 'POST',
                   url: url,
                   beforeSend: function (xhr) {
                       xhr.setRequestHeader('Content-type', 'application/vnd.oracle.adf.resourceitem+json');
                       xhr.setRequestHeader('Authorization', authorization);
                   },
                   data: JSON.stringify(payload),
                   dataType: 'json',
                   success: function (data) {
                       self.requestFailMsg('');
                       self.requestSuccessMsg('Request has been submitted successfully’);
                       self.name('');
                       self.email('');
                       self.phone('');
                       self.subject('');
                       self.message('');
                   },
                   error: function (jqXhr, textStatus, errorThrown) {
                       console.log('Error:');
                       console.log(jqXhr);
                       self.requestSuccessMsg('');
                       self.requestFailMsg('Failed to submit the request');
                   }
               });
           },
           'errorCallback': function (xhr, status, err) {
               if (xhr && xhr.status === 200) {
                   token = xhr.responseText;
                   console.log('Got token');
               } else {
                   console.error('getToken: xhr: ' + JSON.stringify(xhr) + ' status: ' + status + ' error: ' + err);
                   self.requestSuccessMsg('');
                   self.requestFailMsg('Failed to get authorization token');
               }
           }
       });
   };

変更styles/design.css

次のcssをdesign.cssに追加します。

.form {
    font-family: "Helvetica Neue", "Segoe UI", sans-serif-regular, Helvetica, Arial, sans-serif;
    font-size: 14px;
}
.form input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
.form textarea {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
.form button  {
    width: 100%;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.form button:hover {
    background-color: #45a049;
}
.form button:disabled {
    background-color: #dddddd;
}
.required-field::after {
  content: "*";
  color: red;
  margin-left:2px
}
.request-msg {
	padding: 5px;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 20px;
}
.green {
	background-color: #81BA5E;
}
.red {
	background-color: red;
}

Oracle Content Managementでのフォーム・コンポーネントの使用

1. VBCS接続を構成します:

   • 「管理」、「統合」、「アプリケーション」の順に選択します。

   • 「Visual Builder Cloud Service統合」チェック・ボックスをクリックします。

   • URLを入力して、「保存」をクリックします。

2. コンポーネントをインポートします:

   • 「開発者」、「コンポーネント」の順に選択します。

   • 「作成」を選択し、次に「コンポーネントのインポート」を選択します。

     
     
     「図vbcs_import_component.pngの説明」
     

3. ページにコンポーネントを追加

   1. 新規または既存のサイトを編集します。

   2. サイト・ビルダーで、「コンポーネント」、「カスタム」の順に選択します。

      
      
      「図vbcs_components_custom.pngの説明」
      

   3. ページにコンポーネントをドラッグします。

      ノート:

      このVBCSセキュア・フォーム・コンポーネントは、セキュア・サイトに対してのみ機能します。