更新时间:2024-03-05 GMT+08:00

核心代码简析

  1. 引入所需的JS框架,在以下提供的样例中需要引入jQuery,参考版本为jQuery- v3.4.1,如果需要使用网页协同功能,请引入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 JS框架引用示例

    1、网页协同功能不支持打开新的页签后在新页签上进行协同操作。

    2、引入网页协同的cobrowse.js和cobrowseCommon.js组件时,第三方页面中包含多层iframe嵌套时,仅引入了js组件的iframe内可以进行网页协同,若该iframe存在父iframe框架,则无法在父iframe中进行网页协同操作)。

  2. 请按照章节开发Authorization签名生成机制在服务端生成Authorization签名。
  3. 在企业自有系统前台通过ajax请求,获取服务端生成的Authorization签名。

    function testAjax() {
         let timestamp = new Date().getTime();
         let serviceUrl = "authorizationService";
         let thirdUserData = {};
         thirdUserData['thirdUserName'] = userName;
         thirdUserData['thirdUserId'] = userId;
         thirdUserData['tenantSpaceId'] = tenantSpaceId; 
         thirdUserData['channelConfigId'] = configId;
         thirdUserData['locale'] = locale;
         thirdUserData['mapService'] = tencent; 
         thirdUserData['timestamp'] = timestamp;
         var request = $.ajax({
             url: serviceUrl,
             method: "POST",
             contentType: "application/json",
             data: JSON.stringify(thirdUserData),
         });
         request.done(function(message){
             if(message){
                 thirdUserData['thirdPartAuthorization'] = message;
                 thirdValidate(thirdUserData);
             }
             return  message;
         });

  4. 获得签名后,用ajax请求需要集成的js脚本。

    const $ContextPath = "https://ip:port/service-cloud"; 
    function thirdValidate(thirdUserData) {
      let timestamp = new Date().getTime();
      let serviceUrl = $ContextPath + "/webclient/chat_client/js/newThirdPartyClient.js?"+"&t=" + timestamp;
          var request = $.ajax({ 
             url: serviceUrl,
             method: "POST",
             data: JSON.stringify( ),
             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)
             }    
    });
    表1 开发集成页面参数说明

    参数名

    是否必填

    说明

    $ContextPath

    True

    实际域名。请将上述https:// ip:port/换成云客服的公网域名。

    thirdPartAuthorization

    True

    企业生成的Authorization签名,与2.5.1 - 步骤7中签名保持一致。

    tenantSpaceId

    True

    租间ID,请在配置中心 > 系统管理 > 租户基本信息中查看。

    thirdUserId

    True

    企业用户ID。2.5.1 - 步骤5中的同名参数保持一致。

    thirdUserName

    True

    企业用户名。2.5.1 - 步骤5中的同名参数保持一致。

    channelConfigId

    True

    渠道配置ID。完成配置WEB渠道后,请在配置中心 > 接入配置 > 渠道配置中查看。

    locale

    True

    第三方租间语言信息。

    • zh:中文
    • en:英文

    timestamp

    True

    时间戳。时间字符串格式化为"yyyy-MM-dd'T'HH:mm:ss.SSS'Z"

    mapService

    False

    用户地图服务。

    • tencent
    • google

    缺省值:tencent

    说明:

    腾讯地图暂不支持国外位置。