企业微信内部网页开发流程笔记

news2025/7/18 13:44:13

背景

基于ai实现企微侧边栏和工作台快速问答小助，需要h5开发，因为流程不清楚摸索半天，所以记录一下

一、网页授权登录

1. 配置步骤

1.1 设置可信域名

登录企业微信管理后台
进入"应用管理" > 选择开发的具体应用 > “网页授权及JS-SDK”
配置h5展示页面路径，如有工作台也需配置工作台跳转路径

2.2 域名所有权验证

下载提供的校验文件
将文件放置在域名根目录下（放前端项目public文件夹中）

例如：https://yourdomain.com/wwverify.txt

点击验证按钮，系统将自动检查

2 网页授权登录

企业微信提供了OAuth的授权登录方式，可以让从企业微信终端打开的网页获取成员的身份信息，从而免去登录的环节。

构造授权链接：

https://open.weixin.qq.com/connect/oauth2/authorize?
appid=CORPID&
redirect_uri=ENCODE_URL&
response_type=code&
scope=snsapi_base|snsapi_privateinfo&
state=STATE&
agentid=AGENTID#wechat_redirect

用户授权后，跳转到redirect_uri并带上code参数，此uri一般为h5当前页面
后端通过code获取用户信息：

// 获取access_token
GET https://qyapi.weixin.qq.com/cgi-bin/gettoken?
corpid=ID&corpsecret=SECRET

// 获取用户信息
GET https://qyapi.weixin.qq.com/cgi-bin/user/getuserinfo?
access_token=ACCESS_TOKEN&code=CODE

二、JS-SDK接口调用

1. 配置步骤

1.1 设置可信域名

登录企业微信管理后台
进入"应用管理" > 选择开发的具体应用 > “网页授权及JS-SDK”

只需填写根域名，如yourdomain.com
所有子域名自动获得授权能力

配置h5展示页面路径，如有工作台也需配置工作台跳转路径

1.2 域名所有权验证

下载提供的校验文件
将文件放置在域名根目录下（放前端项目public文件夹中）

例如：https://yourdomain.com/wwverify.txt

点击验证按钮，系统将自动检查

2 （JS-SDK）接口调用

企业微信JS-SDK是企业微信面向网页开发者提供的基于企业微信内的网页开发工具包

1前端项目安装企微js-sdk依赖

npm install @wecom/jssdk

2签名校验

获取jsapi_ticket：(后端获取后返回）

GET https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?
access_token=ACCESS_TOKEN

生成签名：（所需使用企微接口需配置jsApiList）

const loadSignature = async (url: string) => {
        if (!signaturePromise) {
          signaturePromise = 服务端鉴权接口({ url }) // 只在第一次调用时执行
        }
        return signaturePromise
      }
      ww.register({
        corpId,
        agentId,
        jsApiList: ['getCurExternalContact'],
        getAgentConfigSignature: async (url) => {
          console.log('getAgentConfigSignature :>> ', url)
          const res = await loadSignature(url)
          const { agentSignature, nonceStr, timestamp } = res?.data ?? {}
          return { timestamp, nonceStr, signature: agentSignature }
        },
        onConfigSuccess: (res) => {
          console.log('onConfigSuccess :>> ', res)
        },
        onConfigFail: (res) => {
          console.log('onConfigFail :>> ', res)
        },
        onConfigComplete: (res) => {
          console.log('onConfigComplete', res)
        },
        onAgentConfigSuccess: (res) => {
          console.log('onAgentConfigSuccess :>> ', res)
          resolve(true)
        },
        
        onAgentConfigFail: (res) => {
          console.log('onAgentConfigFail :>> ', res)
          reject()
        },
        onAgentConfigComplete: (res) => {
          console.log('onAgentConfigComplete', res)
        },
      })