企业微信自建应用接入WECOM-JSSDK1.在企业微信管理后台设置JSSDK的可信域名 2.项目中引入 3.JS 接口

1.在企业微信管理后台设置JSSDK的可信域名

2.项目中引入

npm install @wecom/jssdk
import * as ww from '@wecom/jssdk'

3.JS 接口鉴权（前端）

调用 JSAPI 前，需要先通过 ww.register 注册当前页面的身份信息,包括：企业身份与权限，应用身份与权限，如下

ww.register({
  corpId: 'asa',       // 必填，当前用户企业所属企业ID
  agentId: 123,                  // 必填，当前应用的AgentID
  jsApiList: ['getExternalContact'], // 必填，需要使用的JSAPI列表
  getConfigSignature,                // 必填，根据url生成企业签名的回调函数
  getAgentConfigSignature            // 必填，根据url生成应用签名的回调函数
})


async function getConfigSignature(url) {
  // 根据 url 生成企业签名
  // 生成方法参考 https://open.work.weixin.qq.com/api/doc/90001/90144/93197
  return { timestamp, nonceStr, signature }
}

 
async function getAgentConfigSignature(url) {
  // 根据 url 生成应用签名，生成方法同上，但需要使用应用的 jsapi_ticket
  return { timestamp, nonceStr, signature }
}

备注：

1.注册sdk需要使用的企业id，用户id出于安全考虑，需要由后端接口提供

2.企业签名和用户签名信息也需要由后端提供

实际代码开发中，可以把sdk相关的建一个单独的js文件，比如WeChat.js

// 注册企业微信应用信息
export function registerWeChat() {
  return new Promise((resolve, reject) => {
    ww.register({
      corpId: 'xxx', // 必填，当前用户企业所属企业ID
      agentId: import.meta.env.VITE_APP_AGENTID, // 必填，当前应用的AgentID,不同环境的AgentID可能不同
      jsApiList: ['shareAppMessage', 'hideMenuItems', 'hideOptionMenu'], // 必填，需要使用的JSAPI列表
      getConfigSignature, // 必填，根据url生成企业签名的回调函数
      onConfigSuccess(res) {
        resolve(ww, res);
        console.log('onConfigSuccess---res', res);
      },
      onConfigFail(res) {
        reject(res);
        console.log('onConfigFail---res', res);
      },
      onConfigComplete(res) {
        console.log('onConfigComplete---res', res);
      },
    });
  });
}

//后续在哪个页面如果需要使用到sdk,都需要先注册registerWeChat，然后再调用对应的sdk方法

4.JS-SDK使用权限签名算法（后端）

developer.work.weixin.qq.com/document/pa…

4.1签名生成规则

参与签名的参数有四个: noncestr（随机字符串）, jsapi_ticket(如何获取参考“获取企业jsapi_ticket”、“获取应用的jsapi_ticket接口”以及“获取第三方应用的jsapi_ticket接口”), timestamp（时间戳）, url（当前网页的URL，不包含#及其后面部分）

将这些参数使用URL键值对的格式（即 key1=value1&key2=value2…）拼接成字符串string1。

有两个注意点：1. 字段值采用原始值，不要进行URL转义；2. 必须严格按照如下格式拼接，不可变动字段顺序。

jsapi_ticket=JSAPITICKET&noncestr=NONCESTR&timestamp=TIMESTAMP&url=URL

然后对string1作sha1加密即可。

签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。
签名用的url必须是调用JS接口页面的完整URL。
出于安全考虑，开发者必须在服务器端实现签名的逻辑。

4.2 需要调用的企业微信接口

a.获取企业的jsapi_ticket

请求方式： GET（HTTPS）

请求URL： qyapi.weixin.qq.com/cgi-bin/get…

b.获取应用的jsapi_ticket

请求方式：** GET（HTTPS）

请求URL： qyapi.weixin.qq.com/cgi-bin/tic…

C.获取access_token

developer.work.weixin.qq.com/document/pa…

请求方式： GET（HTTPS）

请求地址： qyapi.weixin.qq.com/cgi-bin/get…


参数	必须	说明
corpid	是	企业ID，获取方式参考：术语说明-corpid
corpsecret	是	应用的凭证密钥，注意应用需要是启用状态，获取方式参考：术语说明-secret

5.界面批量隐藏功能按钮

ww.hideMenuItems({

  menuList: ['menuItem:setFont']  //必须 要隐藏的菜单项

})

  
**传播类**

发送给朋友: "menuItem:share:appMessage"

分享到朋友圈: "menuItem:share:timeline"

分享到QQ: "menuItem:share:qq"

分享到Weibo: "menuItem:share:weiboApp"

收藏: "menuItem:favorite"

分享到FB: "menuItem:share:facebook"

分享到 QQ 空间 "menuItem:share:QZone"

**保护类**

编辑标签: "menuItem:editTag"

删除: "menuItem:delete"

复制链接: "menuItem:copyUrl"

原网页: "menuItem:originPage"

阅读模式: "menuItem:readMode"

在QQ浏览器中打开: "menuItem:openWithQQBrowser"

在Safari中打开: "menuItem:openWithSafari"

邮件: "menuItem:share:email"

一些特殊公众号: "menuItem:share:brand"

上述用图表示：企微应用接入sdk.drawio.png

参考文章客户端API

企业微信自建应用接入WECOM-JSSDK