企微侧边栏开发(内部应用内嵌H5)
一、背景
公司的业务需要用企业微信和客户进行沟通,而客户的个人信息基本都存储在内部CRM系统中,对于销售来说需要一边看企微,一边去内部CRM系统查询,比较麻烦,希望能在企微增加一个侧边栏展示客户的详细信息,提升员工的工作效率。
1.1现状
目前内部CRM系统已经介入了企微的各种回调,销售给客户编辑信息,添加好友,删除好友等都会回存到CRM系统。
二、调研
直接在企微开发者文档搜索,搜不到关于如何配置侧边栏的教程,不过可以看到很多人咨询关于侧边栏的问题,所以企微是支持侧边栏的。
在浏览器搜,倒是搜到一些配置教程。看了一下,是可以在企业微信内嵌H5,符合业务需求。
企微侧边栏配置教程
2.1基本概念
基本概念介绍 - 文档 - 企业微信开发者中心 (qq.com)
补充一些:
userid,无论是企业内用户还是客户,都是企业内唯一,同一个人在不同企业主体可能userid是一样的。
agentid,也是企业内唯一,并且不同企业主体之间,很容易重复。
如果是需要配置多企业主体、多应用的,在存储的时候就需要多注意。
三、实现步骤
3.1企微后台配置侧边栏
1.创建应用
首先需要在企微管理后台创建一个应用。应用管理-应用-创建应用
2.配置应用
配置应用可见范围和配置侧边栏H5
配置要嵌入在侧边栏的网页链接,如果有需要携带到网页的参数也可以放在链接后面。比如corpId,agentId或者业务参数.
3.配置可信域名IP(要调用企微SDK则必配)
配置网页授权,如果网页需要调用企微的SDK,必须配置可信域名。这意味着需要先租域名并将域名绑定到企微对应的企业。
配置可信ip,ip直接用英文分号隔开
4.配置效果
在企微,添加外部客户(如@微信代表微信用户,就是外部客户),就可以在右侧看到配置的侧边栏了。
3.2代码接入企微
因为部分SDK需要在企微环境才能使用,在本地要测试会比较难,因此接入企微配置和登录的部分建议可以直接在测试环境测,因为本地环境没法配置可信域名.(或许使用内网穿透可以本地调试)
3.2.1、config配置
在调用企微的SDK之前,需要先调用企微的config方法完成页面的配置,每打开一个新的页面都需要进行一次配置。
为了兼容不同版本的企业微信,最好是先调用wx.config再调用wx.agentConfig完成页面配置。
在企业微信3.0.24版本之后,可以只调用wx.agentConfig配置页面
wx.config
wx.agentConfig
上述SDK有一个参数签名signature,需要通过一些参数加密获得,而所需的参数里面有一个jsapi_ticket,需要通过服务端调用企微接口获得。
而服务端调用企微接口都需要accessToken凭证。因而总体流程如下:
1.服务端调用接口查询accessToken(注意secret取的是自建应用的secret)
2.服务端再调用接口查询jsapi_ticket(注意secret取的是自建应用的secret)
3.服务端然后随机生成随机字符串、时间戳,再加上前端传入的url,以及调用上面接口获得的jsapi_ticket,构建字符串并加密。(注意url让前端通过location.href.split('#')[0]获取,而且需要encodeURIComponent)
4.客户端从服务端获取到配置所需的全部参数,然后前后调用wx.config,wx.agentConfig完成配置。
上述凡是需要用secret的地方,传的secret都是应用的secret.并且获取accessToken和ticket的接口都要请求频率限制,因此后端最好缓存一下,过期时间设为企微那边给的时间即可,不过企微那边说有可能某些原因导致提前过期,这个时候就只能在需要accessToken的接口请求的时候去检测请求返回的err_code,如果code等于accessToken过期的错误码,就触发不走缓存请求更新accessToken缓存.
3.2.2、企微登录
H5的企微登录和小程序的登录完全不一样,因为小程序是直接在微信里面跑,而H5是跑在自家服务器的。因而不能用wx.qy.login进行登录。
又或者说,在侧边栏H5里面所谓的登录也只是为了给前端返回一个当前用户的唯一标识而已。
阅读了官方文档之后,决定使用网页授权的方式来完成授权登录。
1.构造网页授权链接获取登录凭证code
只有三个参数是需要自己传入的,redirect_uri要传网页域名+路径,借鉴官方给的例子即可,红色的参数就是要自己传的,其他的保持原样就行.(因为这个微信接口完全不涉及token,可以直接让前端发起).
请求该链接之后,会自动重定向到 redirect_uri?code=CODE&state=STATE.后面的部分是企微自动拼接的,我们可以直接从链接处获取到code.
2.获取访问用户身份
从上一步可以获取到用户凭证code,接下来可以调用接口获取用户身份信息.将当前登录的企微成员的user_id返回,并缓存起来,用作后面请求的身份凭证.(因为只是获取一个身份唯一标识,所以没有过期的说法)
3.获取当前外部客户身份
完成config配置之后页面就已经可以调用企微的SDK了,通过调用SDK可以获取企微当前打开的外部客户的信息
该接口对进入该网页的入口有要求,因为要在进入的时候携带一些东西才能知道当前打开的是哪个外部客户的页面.因而只能代码跑起来之后从企微侧边栏处进入的时候能获取到值.
至此,已经能获取当前登录的企微用户的唯一标识,外部客户的唯一标识.接下来就可以进行业务开发了.
3.3验证成果
能够正常完成配置,在企微绑定企微客户并展示客户信息.
四、思考
1.在获取到登录企微的用户唯一标识之后,一般会缓存起来以便后续使用,但如果退出登录,换一个账号登录企微,怎么知道应该要触发重新登录?
目前我们的做法是每次关闭H5都会清空缓存。(能解决串数据的问题,但速度会慢一点)
2.因为获取access_token的接口有请求频率限制,所以肯定得缓存起来。但access_token有可能会在返回的过期时间之前就过期了(官网写的,还没遇到过)。那么如果过期了怎么触发token更新?
目前的做法是在每个调用企微端的接口请求返回时就判断返回的code,如果是token过期的code就调用方法更新缓存token,并事务回滚,约定code让前端重新请求一次。(缺点是每次调用的地方都要加上判断的代码)
有一个想法:定一个规范,比如向企微发起的请求必须走某些公用方法。自定义一个切入点,对这些公用方法做增强,监听请求结果的code,如果是token过期的code就调用方法更新缓存token。(好处是后面写的方法就不需要再关心access_token的过期了,只需要按照规定写代码)
如果有更好的想法,欢迎一起交流!!!
相关文章:

企微侧边栏开发(内部应用内嵌H5)
一、背景 公司的业务需要用企业微信和客户进行沟通,而客户的个人信息基本都存储在内部CRM系统中,对于销售来说需要一边看企微,一边去内部CRM系统查询,比较麻烦,希望能在企微增加一个侧边栏展示客户的详细信息…...
如何确定最优的石油管道位置
如何确定最优的石油管道位置 一、前言二、问题概述三、理解问题的几何性质四、转化为数学问题五、寻找最优解六、算法设计6.1伪代码6.2 C代码七算法效率和实际应用7.1时间效率分析7.2 空间效率分析结论一、前言 当我们面对建设大型输油管道的复杂任务时,确保效率和成本效益是…...

FPGA 图像边缘检测(Canny算子)
1 顶层代码 timescale 1ns / 1ps //边缘检测二阶微分算子:canny算子module image_canny_edge_detect (input clk,input reset, //复位高电平有效input [10:0] img_width,input [ 9:0] img_height,input [ 7:0] low_threshold,input [ 7:0] high_threshold,input va…...

2024.3.28学习笔记
今日学习韩顺平java0200_韩顺平Java_对象机制练习_哔哩哔哩_bilibili 今日学习p286-p294 继承 继承可以解决代码复用,让我们的编程更加靠近人类思维,当多个类存在相同的属性和方法时,可以从这些类中抽象出父类,在父类中定义这些…...

33.HarmonyOS App(JAVA)鸿蒙系统app数据库增删改查
33.HarmonyOS App(JAVA)鸿蒙系统app数据库增删改查 关系数据库 关系对象数据库(ORM) 应用偏好数据库 分布式数据库 关系型数据库(Relational Database,RDB)是一种基于关系模型来管理数据的数据库。HarmonyOS关系型…...

寄主机显示器被快递搞坏了怎么办?怎么破?
大家好,我是平泽裕也。 最近,我在社区里看到很多关于开学后弟弟寄来的电脑显示器被快递损坏的帖子。 看到它真的让我感到难过。 如果有人的数码产品被快递损坏了,我会伤心很久。 那么今天就跟大家聊聊寄快递的一些小技巧。 作为一名曾经的…...
python爬虫-bs4
python爬虫-bs4 目录 python爬虫-bs4说明安装导入 基础用法解析对象获取文本Tag对象获取HTML中的标签内容find参数获取标签属性获取所有标签获取标签名嵌套获取子节点和父节点 说明 BeautifulSoup 是一个HTML/XML的解析器,主要的功能也是如何解析和提取 HTML/XML 数…...

SpringBoot学习之ElasticSearch下载安装和启动(Mac版)(三十一)
本篇是接上一篇Windows版本,需要Windows版本的请看上一篇,这里我们继续把Elasticsearch简称为ES,以下都是这样。 一、下载 登录Elasticsearch官网,地址是:Download Elasticsearch | Elastic 进入以后,网页会自动识别系统给你提示Mac版本的下载链接按钮 二、安装 下载…...

OC对象 - Block解决循环引用
文章目录 OC对象 - Block解决循环引用前言1. 循环引用示例1.1 分析 2. 解决思路3. ARC下3.1 __weak3.2 __unsafe_unretained3.3 __block 4. MRC下4.1 __unsafe_unretain....4.1 __block 5. 总结5.1 ARC下5.2 MRC下 OC对象 - Block解决循环引用 前言 本章将会通过一个循环引用…...

Java设计模式之装饰器模式
装饰器模式是一种结构型设计模式,它允许动态地将责任附加到对象上。装饰器模式是通过创建一个包装对象,也就是装饰器,来包裹真实对象,从而实现对真实对象的功能增强。装饰器模式可以在不修改原有对象的情况下,动态地添…...
Java基础知识总结(25)
代理模式 什么是代理模式? 代理模式是指,为其他对象提供一种代理以控制这个对象的访问。一个对象不适合或者不能直接引用另一个对象,而代理对象可以在客户和目标对象之间起到中介的作用。换句话说,代理模式,是在不修…...
Vue3 实现基于token 用户登录
前后端分离情况下,实现的大致思路 1 第一次登录的时候,前端调用后端的登录接口,发送用户名与密码 2 后端收到请求,验证用户名和密码,验证成功 给前端返回一个token 3 前段拿到token 将token 存储进localStorage 和…...

在word中显示Euclid Math One公式的问题及解决(latex公式,无需插件)
问题:想要在word中显示形如latex中的花体字母 网上大多解决办法是安装Euclid Math One。安装后发现单独的符号插入可行,但是公式中选择该字体时依然显示默认字体。 解决办法:插入公式后,勾选左上角的latex 在公式块中键入latex代码…...

江协科技STM32:按键控制LED光敏传感器控制蜂鸣器
按键控制LED LED模块 左上角PA0用上拉输入模式,如果此时引脚悬空,PA0就是高电平,这种方式下,按下按键,引脚为低电平,松下按键,引脚为高电平 右上角PA0,把上拉电阻想象成弹簧 当按键…...
最佳矢量绘图设计软件Sketch for Mac v99.5 最新中文激活版
Sketch for Mac是一款功能强大的矢量绘图软件,它提供了简单易用的界面和丰富的工具,让用户能够轻松创建精美的设计作品。 软件下载:Sketch for Mac v99.5 最新中文激活版 Sketch具有直观的布局和智能的工具,使得设计师能够快速实现…...

【IntelliJ IDEA】运行测试报错解决方案(附图)
IntelliJ IDEA 版本 2023.3.4 (Ultimate Edition) 测试报错信息 命令行过长。 通过 JAR 清单或通过类路径文件缩短命令行,然后重新运行 解决方案 修改运行配置,里面如果没有缩短命令行,需要再修改选项里面勾选缩短命令行让其显示&#x…...
【Kotlin】List、Set、Map简介
1 List Java 的 List、Set、Map 介绍见 → Java容器及其常用方法汇总。 1.1 创建 List 1.1.1 emptyList var list emptyList<String>() // 创建空List 1.1.2 List 构造函数 var list1 List(3) { "abc" } // [abc, abc, abc] var list2 ArrayList<In…...

OpenCV 形态学处理函数
四、形态学处理(膨胀,腐蚀,开闭运算)_getstructuringelement()函数作用-CSDN博客 数字图像处理(c opencv):形态学图像处理-morphologyEx函数实现腐蚀膨胀、开闭运算、击中-击不中变换、形态学梯度、顶帽黑帽变换 - 知乎…...
互联网摸鱼日报(2024-03-27)
互联网摸鱼日报(2024-03-27) 36氪新闻 谈“肉”色变,预制菜“顶流”要完? 欧美监管机构出重拳,苹果和谷歌都要被拆分了吗? 为什么产品经理的薪资待遇,这么高? AI PC:一场浩荡的革命 二氧化…...

2014年认证杯SPSSPRO杯数学建模B题(第二阶段)位图的处理算法全过程文档及程序
2014年认证杯SPSSPRO杯数学建模 B题 位图的处理算法 原题再现: 图形(或图像)在计算机里主要有两种存储和表示方法。矢量图是使用点、直线或多边形等基于数学方程的几何对象来描述图形,位图则使用像素来描述图像。一般来说&#…...
KubeSphere 容器平台高可用:环境搭建与可视化操作指南
Linux_k8s篇 欢迎来到Linux的世界,看笔记好好学多敲多打,每个人都是大神! 题目:KubeSphere 容器平台高可用:环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

dedecms 织梦自定义表单留言增加ajax验证码功能
增加ajax功能模块,用户不点击提交按钮,只要输入框失去焦点,就会提前提示验证码是否正确。 一,模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1
每日一言 生活的美好,总是藏在那些你咬牙坚持的日子里。 硬件:OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写,"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

视频字幕质量评估的大规模细粒度基准
大家读完觉得有帮助记得关注和点赞!!! 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用,因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型(VLMs)在字幕生成方面…...

CocosCreator 之 JavaScript/TypeScript和Java的相互交互
引擎版本: 3.8.1 语言: JavaScript/TypeScript、C、Java 环境:Window 参考:Java原生反射机制 您好,我是鹤九日! 回顾 在上篇文章中:CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...
【HarmonyOS 5 开发速记】如何获取用户信息(头像/昵称/手机号)
1.获取 authorizationCode: 2.利用 authorizationCode 获取 accessToken:文档中心 3.获取手机:文档中心 4.获取昵称头像:文档中心 首先创建 request 若要获取手机号,scope必填 phone,permissions 必填 …...

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变(硬件篇)
本项目是基于 STM32F103C8T6 微控制器的 SPWM(正弦脉宽调制)电源模块,能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路,图中 D1 为二极管, 其目的是防止正负极电源反接, …...

无人机侦测与反制技术的进展与应用
国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机(无人驾驶飞行器,UAV)技术的快速发展,其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统,无人机的“黑飞”&…...
tomcat入门
1 tomcat 是什么 apache开发的web服务器可以为java web程序提供运行环境tomcat是一款高效,稳定,易于使用的web服务器tomcathttp服务器Servlet服务器 2 tomcat 目录介绍 -bin #存放tomcat的脚本 -conf #存放tomcat的配置文件 ---catalina.policy #to…...

Linux 内存管理调试分析:ftrace、perf、crash 的系统化使用
Linux 内存管理调试分析:ftrace、perf、crash 的系统化使用 Linux 内核内存管理是构成整个内核性能和系统稳定性的基础,但这一子系统结构复杂,常常有设置失败、性能展示不良、OOM 杀进程等问题。要分析这些问题,需要一套工具化、…...