
# 开发样例：JS页面集成样例
|   环境要求   |                                                -                                                |
|---|---|
| **引用库**  | jquery.js                                                                                       |
| **下载链接** | [index.html] |
   
![](https://support.huaweicloud.com/devg-weblite-cec/public_sys-resources/notice_3.0-zh-cn.png)
- 本文档所述Demo在提供服务的过程中，可能会涉及个人数据的使用，建议您遵从国家的相关法律采取足够的措施，以确保用户的个人数据受到充分的保护。
  
- 本文档所述Demo仅用于功能演示，不允许客户直接进行商业使用。
  
- 本文档信息仅供参考，不构成任何要约或承诺。
  
 
 #### index.html
```
<!DOCTYPE html>
<html>
<head>
    <!-- 如果需要使用网页协同功能，需引入cobrowse.js，cobrowseCommon.js这两个js，其中ip:port需替换成实际云客服的ip和port，或者直接使用域名 -->
    <script type="text/javascript" src="https://ip:port/service-cloud/resource.root/cobrowse/sdk/cobrowse.js"></script>
    <script type="text/javascript" src="https://ip:port//service-cloud/webclient/chat_client/js/cobrowseCommon.js"></script>
    <!-- 0.引入jquery组件 -->
    <script type="text/javascript" src="jquery.js"></script>
</head>
<body>
    <script>
// 1.定义变量,后续聊天框页面需要使用，详细参数说明请参见表1
        const userId = "XXXXXXXX"; // 用户id（即为表中thirdUserId）
        const userName = "XXXXXXXXXXX";// 用户昵称（即为表中thirdUserName）
        const tenantSpaceId ="XXXXXXXXXX";// 租间id(tenant id)
        const configId = "XXXXXXXXXXXXXXXXXX";// 渠道id(wWEBchannelConfig id)
        const locale = "zh"; // 语言，locale:[zh,en]
        const $ContextPath = "https://ip:port/service-cloud";        //请求地址

// 2.构造请求参数
        let serviceUrl = $ContextPath + "/webclient/chat_client/js/newThirdPartyClient.js?&t="+new Date().getTime();
        let thirdUserData = {};
        thirdUserData['thirdUserName'] = userName;
        thirdUserData['thirdUserId'] = userId;
        thirdUserData['tenantSpaceId'] = tenantSpaceId;
        thirdUserData['channelConfigId'] = configId;
        thirdUserData['locale'] = locale;                                       
thirdUserData['timestamp'] = new Date().getTime();                                   // 时间戳  
thirdUserData['secretKey'] = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';          // 认证秘钥
        getAuthorization(thirdUserData);                                                    // Authorization 签名

        // 3.请求newThirdPartyClient.js
        var request = $.ajax({
            url: serviceUrl,
            method: "POST",
            data: JSON.stringify(thirdUserData),
            xhrFields: { withCredentials: true },
            success: function (data) {
// 4.创建script标签并运行newThirdPartyClient.js脚本
importScript(data);
            },
            error: function (XMLHttpRequest, textStatus) {
                alert("unauthorized,validate failed")
            }
        });
// 5.在集成页面加载运行JS
        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]);
// 根据参数获取authration签名
function getAuthorization(thirdUserData){
$.ajax({
url:"/webchat/authorizationService",
method:"post",
data:JSON.stringify(thirdUserData),
async:false,
success: function (data) {
thirdUserData['thirdPartAuthorization'] = data;
}
});
}
    </script>
</body>
</html>
```
