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

背景

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

一、网页授权登录

1. 配置步骤

1.1 设置可信域名
  1. 登录企业微信管理后台

  2. 进入"应用管理" > 选择开发的具体应用 > "网页授权及JS-SDK"

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

2.2 域名所有权验证
  1. 下载提供的校验文件
  2. 将文件放置在域名根目录下(放前端项目public文件夹中)
  1. 点击验证按钮,系统将自动检查

2 网页授权登录

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

  1. 构造授权链接:
javascript 复制代码
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
  1. 用户授权后,跳转到redirect_uri并带上code参数,此uri一般为h5当前页面

  2. 后端通过code获取用户信息:

javascript 复制代码
// 获取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 设置可信域名
  1. 登录企业微信管理后台
  2. 进入"应用管理" > 选择开发的具体应用 > "网页授权及JS-SDK"
  1. 配置h5展示页面路径,如有工作台也需配置工作台跳转路径
1.2 域名所有权验证
  1. 下载提供的校验文件
  2. 将文件放置在域名根目录下(放前端项目public文件夹中)
  1. 点击验证按钮,系统将自动检查

2 (JS-SDK)接口调用

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

1前端项目安装企微js-sdk依赖
javascript 复制代码
npm install @wecom/jssdk
2签名校验
  1. 获取jsapi_ticket:(后端获取后返回)
javascript 复制代码
GET https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?
access_token=ACCESS_TOKEN
  1. 生成签名:(所需使用企微接口需配置jsApiList)
javascript 复制代码
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)
        },
      })

3. 本地调试获取JSAPI_TICKET

本地可以使用npx wwutil ticket CORPID SECRET命令获取jsapi_ticket

3 部分接口权限特殊配置

  1. 获取用户信息接口权限配置,需配置客户联系人

三、 调试工具

  • 企业微信提供的接口调试工具
  • 使用开发者工具查看网络请求项目中添加console
相关推荐
使二颗心免于哀伤1 小时前
《设计模式之禅》笔记摘录 - 17.模板方法模式
笔记·设计模式·模板方法模式
咸甜适中2 小时前
rust语言 (1.88) egui (0.32.1) 学习笔记(逐行注释)(十五)网格布局
笔记·学习·rust·egui
Duo1J5 小时前
【OpenGL】LearnOpenGL学习笔记15 - 面剔除
笔记·学习·图形渲染
暗流者14 小时前
AAA 服务器与 RADIUS 协议笔记
运维·服务器·笔记
Ro Jace15 小时前
科研笔记:博士生手册
笔记
#include>15 小时前
【Golang】有关垃圾收集器的笔记
笔记·golang
Qlittleboy16 小时前
手机、电脑屏幕的显示坏点检测和成像原理
经验分享·笔记
Magnetic_h19 小时前
【iOS】SDWebImage第三方库源码学习笔记
笔记·学习·ios·objective-c·cocoa
悠哉清闲20 小时前
C ++代码学习笔记(一)
c++·笔记·学习
Demonsong_1 天前
2025.8.22周五 在职老D渗透日记day24:burp+mumu抓包 安卓7.0以上证书配置
经验分享·笔记