带你手把手实现企微 WECOM-JSSDK 的微信客服侧边栏自建应用获取小程序订单列表_wecom-sidebar-jssdk
本篇文章是基于已经创建好企业微信客服账号后，如何创建自建应用 h5 页面获取小程序用户的订单列表，并配置到企微客户端微信客服的侧边栏上，图例如下：
一、前言
1、概述
- WECOM-JSSDK 相较旧版的 JS-SDK 提供了 Typescript 类型支持、npm 引入等功能
- WECOM-JSSDK 为网页应用提供了调用手机原生方法的通道
- 拍照、选择图片、录音
- 获取地理位置信息
2、相关文档（开发期间可能会用到的文档及工具）
- 官网：开发指南 - 文档 - 企业微信开发者中心
- 实现思路参考文档（企业内部开发）：微信客服基础开发说明
- 企微错误码查询工具：错误码查询工具
- 企微接口签名工具：签名工具
3、开发体验
- 前期小编是用 JS-SDK 开发，但是发现会有各种踩坑问题导致流程进行不下去，以下是小编当时找资料踩坑资料之一，有需要的小伙伴可以参考
企业微信 JS SDK 自建应用踩坑指南
https://zhuanlan.zhihu.com/p/270651743
- 使用 WECOM-JSSDK 方式实现的文章几乎没有搜到，小编无奈自行研究
二、企微后台配置
1、自建应用
（1）创建自建应用
管理后台-应用管理-应用-自建
（2）配置应用权限
- 管理后台-客户与上下游-客户-API
- 管理后台-应用管理-微信客服-API
（3）配置 JS-SDK 域名
管理后台-应用管理-应用-自建-点击自定义的应用-开发者接口
注意：
1. 这里配置的可信域名必须是后续访问侧边栏页面的域名前缀
2. 需要进行域名归属认证，将 校验文件.txt 上传至该配置域名根目录下
（4）配置侧边栏页面
管理后台-应用管理-应用-自建-点击自定义的应用
注意：这边配置的页面路径即侧边栏访问的页面
（5）配置可信IP
管理后台-应用管理-应用-自建-点击自定义的应用-开发者接口
配置可信域名对应的服务器ip地址
2、微信客服
管理后台-应用管理-应用-基础-微信客服
三、开发流程
1、实现思路
①小程序获取并存储 unionId
②企微侧边栏页面：客服自动登录系统（出于安全性考虑，只有登录后才可以访问订单列表）、并获取 外部联系人id ，再通过外部联系人id获取当前聊天框客户的 unionId
③通过 unionId 去小程序获取 userId
④通过 userId 获取该聊天框客户的小程序用户订单列表
2、开始使用
（1）npm 引入（小编推荐使用）
- 安装 @wecom/jssdk 依赖
npm install @wecom/jssdk- 局部引入依赖
import * as ww from \'@wecom/jssdk\'（2）cdn 引入
3、接口鉴权
以下任何企微接口调用出现报错，产生的错误码都可以使用官网工具去查看给出的具体问题点
文档地址都放在文章最上方的相关文档，有需要的小伙伴自取
（1）获取access_token
①文档地址
获取access_token - 文档 - 企业微信开发者中心https://developer.work.weixin.qq.com/document/path/91039
②入参说明
参数
必须
说明
取值位置
corpid
是
企业ID，获取方式参考：术语说明-corpid
管理后台-我的企业-企业信息-企业ID
corpsecret
是
应用的凭证密钥，注意应用需要是启用状态，获取方式参考：术语说明-secret
管理后台-应用管理-应用-自建-选择创建好的应用
在企微账号即可收到secret的短信
（2）获取 JS-SDK 签名算法
①文档地址
JS-SDK使用权限签名算法 - 文档 - 企业微信开发者中心https://developer.work.weixin.qq.com/document/path/90539
②获取企业 jsapi_ticket
③获取应用的 jsapi_ticket
（3）构建签名加密字段
①加密的参数有四个
- noncestr：随机字符串
- jsapi_ticket：上面第（2）点的“获取企业jsapi_ticket”、“获取应用的jsapi_ticket”
- timestamp：时间戳
- url：当前网页的URL， 不包含#及其后面部分
②字段必须严格按照以下顺序，并且注意字母大小写都正确
jsapi_ticket=JSAPITICKET&noncestr=NONCESTR×tamp=TIMESTAMP&url=URL③加密算法采用 sha1 加密
④代码示例
import CryptoJS from \"crypto-js\";async function getConfigSignature() { const timestamp = Math.floor(Date.now() / 1000); // 时间戳(秒) const nonceStr = Math.random().toString(36).substring(2, 15); // 随机值 const jsapiTicket = \'xxx\' // 对应企业jsapi_ticket const url = window.location.href.split(\'#\')[0]; // 获取当前页面的 url // 定义要加密的字符串 const stringToEncrypt = `jsapi_ticket=${jsapiTicket}&noncestr=${nonceStr}×tamp=${timestamp}&url=${url}`; // 使用 SHA-1 算法加密字符串 const signature = CryptoJS.SHA1(stringToEncrypt).toString(); // 输出加密后的字符串 console.log(encryptedString); return { timestamp, nonceStr, signature }}async function getAgentConfigSignature() { const timestamp = Math.floor(Date.now() / 1000); // 时间戳(秒) const nonceStr = Math.random().toString(36).substring(2, 15); // 随机值 const jsapiTicket = \'xxx\' // 对应应用jsapi_ticket const url = window.location.href.split(\'#\')[0]; // 获取当前页面的 url // 定义要加密的字符串 const stringToEncrypt = `jsapi_ticket=${jsapiTicket}&noncestr=${nonceStr}×tamp=${timestamp}&url=${url}`; // 使用 SHA-1 算法加密字符串 const signature = CryptoJS.SHA1(stringToEncrypt).toString(); // 输出加密后的字符串 console.log(encryptedString); return { timestamp, nonceStr, signature }}4、获取当前聊天客户id（外部联系人id）
ww.register({ corpId: \'xxx\', // 企业ID agentId: \'xxx\', // 必填，当前应用的AgentID jsApiList: [\'getCurExternalContact\'], // 需要使用的JSAPI列表 getConfigSignature, getAgentConfigSignature})// 调用 register 后可以立刻调用JSAPI列表的接口ww.getCurExternalContact({ success(res) { // alert(\'getCurExternalContact执行成功\') state.externalId = res.userId // res中的userId就是客户id，即外部联系人id }})①获取corpId、agentId
参考文章上面第3点接口鉴权的第（1）点的入参取值位置，应用的 id 就在获取 corpsecret 截图的上面
②jsApiList
通俗的说就是后续想要调用的企微方法，都需要在这里列出
③getConfigSignature、getAgentConfigSignature
getConfigSignature：生成企业签名的回调函数
getAgentConfigSignature：生成应用签名的回调函数
这两个字段取值，即第（2）点获取JS-SDK 签名算法全流程下来，最终代码示例给出的两个函数
5、获取当前客户在小程序的unionId
（1）回顾配置
在前面后台配置微信客服API时，即可绑定需要获取订单的小程序 id
通过接口获取的unionId就是这边配置的小程序中客户的 unionId
（2）文档地址
获取客户基础信息 - 文档 - 企业微信开发者中心https://developer.work.weixin.qq.com/document/path/95159
（3）参数说明
①入参
access_token：要放请求头
external_userid_list：要放请求体
②出参
customer_list：会返回客户的 unionid
欢迎各位小伙伴们评论区交流讨论
