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

背景

基于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
相关推荐
Hello_Embed5 小时前
嵌入式 C 语言入门:循环结构学习笔记 —— 从语法到实用技巧
c语言·笔记·stm32·学习
tngyrn7 小时前
机试备考笔记 2/31
笔记
tt5555555555557 小时前
电力系统分析学习笔记(二)- 标幺值计算与变压器建模
笔记·学习·电路
王德博客8 小时前
【从基础到实战】STL string 学习笔记(上)
c++·笔记·学习
Always_away8 小时前
26考研|数学分析:重积分
笔记·学习·考研·数学
R cddddd10 小时前
Spring Boot Admin 监控模块笔记-实现全链路追踪
java·笔记·spring cloud
ATaylorSu10 小时前
经典算法之美:冒泡排序的优雅实现
开发语言·笔记·学习·算法
DKPT12 小时前
Java设计模式之行为型模式(解释器模式)实现方式详解
java·笔记·学习·设计模式·解释器模式
₯㎕星空&繁华13 小时前
Linux—进程状态
linux·运维·服务器·笔记