Integrating Core Code

Prerequisites

The Huawei Cloud operations administrator has configured the authentication API in the CEC.

Procedure

1. Introduce the JavaScript dependent framework first. In the following example, the jQuery and Axios components need to be introduced. The reference versions are jQuery 1.8.0.js and Axios.min.js. If the co-browsing function is required, introduce the cobrowse.js and cobrowseCommon.js components or release the cobrowse plugin for use. (For details about the development of the plugin, see section 3.1 "Guide to the Development and Usage of the cobrowse Plugin.") The cobrowse.js and cobrowseCommon.js components are introduced in CDN mode. Replace ip:port with the IP address and port number of the CEC, or directly with the domain name of the CEC, for example, https://www.test.com/service-cloud/resource.root/cobrowse/sdk/cobrowse.js. Figure 1 shows an example of the code. (Notes: 1. Co-browsing operations cannot be performed on a new tab page.) 2. When the cobrowse.js and cobrowseCommon.js components for co-browsing are introduced and the third-party page contains nested iFrames, co-browsing operations can be performed only in the iFrame where the JavaScript components are introduced. If an iFrame has a parent iFrame, co-browsing operations cannot be performed in the parent iFrame.
   Figure 1 Code example
   

   The cobrowse.js and cobrowseCommon.js components are introduced in CDN mode. Replace ip:port with the IP address and port number of the CEC, or directly with the domain name of the CEC, for example, https://www.test.com/service-cloud/resource.root/cobrowse/sdk/cobrowse.js.

2. Obtain the JavaScript file address provided by the CEC, as shown in the following information. Replace the domain name with the actual one of the CEC.

   https://servicestage.besclouds.com/service-cloud/webclient/chat_client/js/thirdPartyClient.js?&t=1595993533588

3. On the enterprise side, use Ajax to request to integrate the JavaScript script in the CEC. The following is the JavaScript code snippet. Variable definitions are described in the following table.

   	// Define the $aicc_ContextPath variable. The variable name must be $aicc_ContextPath, and the value is https://IP address:Port number/service-cloud/ or https://Domain name/service-cloud/.
    const $ContextPath = "https://ip:port/service-cloud"
   	// Construct request parameters.
    let timestamp = new Date().getTime();
    let serviceUrl = $ContextPath+ "/webclient/chat_client/js/thirdPartyClient.js?"+"&t=" + timestamp;
   	// The following variables need to be defined before being used. In this demo, the variables are defined when axios.js is introduced. For details about the parameters, see Table 1.
    let thirdUserData = {};
    thirdUserData['thirdUserToken'] ="XXXXXXXX";
    thirdUserData['thirdUserName'] = "XXXXXXXX" 
    thirdUserData['thirdUserId'] = "XXXXXXXX";
    thirdUserData['tenantSpaceId'] = "XXXXXXXX";
    thirdUserData['channelConfigId'] = "XXXXXXXX";
    thirdUserData['locale'] = "xx";
    thirdUserData['mapService'] = 'google';
   
       var importScript = (function (oHead) {
           function loadError(oError) {
               throw new URIError("The script " + oError.target.src + " is not accessible.");
           }
           return function (sSrc, fOnload) {
               var oScript = document.createElement("script");
               oScript.type = "text\/javascript";
               oScript.onerror = loadError;
               if (fOnload) { oScript.onload = fOnload; }
               oHead.appendChild(oScript);
               oScript.innerHTML = sSrc;
           }
   
       })(document.head || document.getElementsByTagName("body")[0]);
   
       function thirdValidate(thirdUserData) {
           let timestamp = new Date().getTime();
           let serviceUrl = $ContextPath + "/webclient/chat_client/js/newThirdPartyClient.js?"+"&t=" + timestamp;
   	// Request newThirdPartyClient.js.
           var request = $.ajax({
               url: serviceUrl,
               type: "POST",
               data: JSON.stringify(thirdUserData),
               crossDomain: true,
               dataType:"text",
               xhrFields: {withCredentials: true},
               error: function (XMLHttpRequest, textStatus, errorThrown) { console.log(XMLHttpRequest.status); console.log(XMLHttpRequest.readyState); console.log(textStatus); },
               success: function (data) {
                   importScript(data)
               }
           });
       }
   
       applyChatWindow();
       function applyChatWindow() {
   
           thirdUserData['timestamp'] = timestamp;
           // Request the JavaScript file from the Service Cloud.
           axios({
               method: 'post',
               url: serviceUrl,
               data: JSON.stringify(thirdUserData),
               withCredentials: true
             })
             // Define JavaScript file variables and write them to the current web page.
             .then(resp => {
             if (resp && resp.status === 200) {
                 let str = 'var configId = "' + thirdUserData.channelConfigId + '";var userId = "' + thirdUserData.thirdUserId + '";var userName = "' + thirdUserData.thirdUserName 
                       + '";var tenantSpaceId = "' + thirdUserData.tenantSpaceId + '";var locale = "' + thirdUserData.locale  
                       + '";var token="'+ thirdUserData.thirdUserToken+'";';
                 importScript(str+resp.data);
             } else {
               this.$alert ("Link failed!");
               console.log(resp.status);
               console.log(resp);
             }
           });
       }