核心代码简析

前提条件

华为云运营管理员已经在云客服完成鉴权接口相关配置。

操作步骤

1. 请先完成JS依赖框架的引入，在以下的样例中，需要引入jquery和axios组件，版本请参考Jquery 1.8.0.js和Axios.min.js，如果需要使用网页协同功能，请引入cobrowse.js和cobrowseCommon.js组件或发布插件给用户使用（插件开发参考3.1：cobrowse插件开发、使用指导），cobrowse.js和cobrowseCommon.js采用cdn方式引入，其中ip:port需替换成实际云客服的ip和port，或者直接使用域名，如：https://www.test.com/service-cloud/resource.root/cobrowse/sdk/cobrowse.js，引用代码示例如图1所示（注：1、网页协同功能不支持打开新的页签后在新页签上进行协同操作。2、引入网页协同的cobrowse.js和cobrowseCommon.js组件时，第三方页面中包含多层iframe嵌套时，仅引入了js组件的iframe内可以进行网页协同，若该iframe存在父iframe框架，则无法在父iframe中进行网页协同操作）。
   图1 引用代码示例
   

   cobrowse.js和cobrowseCommon.js采用cdn方式引入，其中ip:port需替换成实际云客服的ip和port，或者直接使用域名，如：https://www.test.com/service-cloud/resource.root/cobrowse/sdk/cobrowse.js

2. 获取云客服提供的JS文件地址，如下所示。请根据实际的云客服域名替换域名部分。

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

3. 在企业侧使用ajax请求集成云客服侧的JS脚本，下面为JS代码片段，片段中的变量含义见下表。

   	//定义变量$aicc_ContextPath，必须定义名称为$aicc_ContextPath，内容为https://ip:port或域名/service-cloud/
   	const $ContextPath = "https://ip:port/service-cloud"
   	// 构造请求参数
   	let timestamp = new Date().getTime();
   	let serviceUrl = $ContextPath+ "/webclient/chat_client/js/thirdPartyClient.js?"+"&t=" + timestamp;
   	// 以下变量在使用前请先定义,本demo在后续代码axios.js引用时进行的定义。详细参数说明请参见表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;
   	// 请求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;
           // 请求service-cloud获取JS文件
           axios({
               method: 'post',
               url: serviceUrl,
               data: JSON.stringify(thirdUserData),
               withCredentials: true
             })
             // 定义JS文件变量，并写入到当前网页中
             .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("链接失败！");
               console.log(resp.status);
               console.log(resp);
             }
           });
       }