# 核心代码简析 #### 前提条件 华为云运营管理员已经在云客服完成鉴权接口相关配置。 #### 操作步骤 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引用代码示例 ![](https://support.huaweicloud.com/devg-weblite-cec/figure/zh-cn_image_0000001500132077.png) 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); } }); } ``` 表1集成页面参数说明 | 参数名 | 是否必填 | 说明 | |:---|:---|:---| | $ContextPath | True | [步骤2]中请求地址的可变部分，通常为域名，或IP地址端口号，请将ip:port换成AICC的公网域名。 建议先将域名或IP地址端口号配置到配置文件或配置表中，$ContextPath通过获取配置项的方式赋值。 | | serviceUrl | True | 即您在[步骤2]中获取的完整路径。 通常serviceUrl不会直接写全量地址，而是通过可变部分*$ContextPath*+固定部分构成。无论采用哪种方式，serviceUrl 的值请确保与云客服提供的请求的地址保持一致。 | | thirdUserToken | True | 企业原生的校验信息，与企业认证验证接口中的[Token](https://support.huaweicloud.com/devg-weblite-cec/cec_05_0514.html#ZH-CN_TOPIC_0000001136272774__table16704132442313)一致。 | | tenantSpaceId | True | 租间ID，请在"配置中心 \> 系统管理 \> 租户信息"中查看。 | | thirdUserId | True | 企业用户ID。与[表1](https://support.huaweicloud.com/devg-weblite-cec/cec_05_0514.html#ZH-CN_TOPIC_0000001136272774__table16704132442313)中userId保持一致。 | | thirdUserName | True | 企业用户名。与[表1](https://support.huaweicloud.com/devg-weblite-cec/cec_05_0514.html#ZH-CN_TOPIC_0000001136272774__table16704132442313)中userName保持一致。 | | channelConfigId | True | 渠道配置ID。完成[1.4.2 在云客服上开通在线客服功能-步骤7](https://support.huaweicloud.com/devg-weblite-cec/cec_05_0512.html#ZH-CN_TOPIC_0000002028093441__zh-cn_topic_0000001136272764_li96748144912)后，请在"配置中心 \> 接入配置 \> 渠道配置"中查看。 | | locale | True | 云客服提供的租间语言信息。 - zh：中文 - en：英文 - ar：阿语 - es：西语 - pt：葡语 - fr：法语 | | mapService | False | 用户地图服务。 - tencent - google 缺省值：tencent 说明： 腾讯地图暂不支持国外位置。 |