红帽白皮书新鲜出炉!点击获取,让你的云战略更胜一筹! 了解详情
写点什么

企业微信自建应用开发初探

  • 2019-04-02
  • 本文字数:5739 字

    阅读完需:约 19 分钟

企业微信自建应用开发初探

企业微信是腾讯推出的一个新的办公协作平台,通过与微信一致的沟通体验,为企业员工提供最基础和最实用的办公服务。同时企业微信作为一个开发平台,企业可以根据需要开发定制自己的企业应用集成到企业微信上。ABC WeChat 是我们公司为 ABC 开发的基于企业微信的一款应用(因保密需要,这里用 ABC 代替公司名称)。


本文以该项目为例对在企业微信平台开发企业应用的特点进行了总结,重点分析了企业微信开发平台对应用开发提供的支持,并指出了实际开发中存在的一些挑战。

1.ABC WeChat 项目介绍

从 2018 年 5 月份讨论需求开始,ABC WeChat 项目主体开发共分两个阶段,总历时约六个月。这个应用主要是为一个现有劳动力管理产品提供了一个基于微信的客户端,使得用户可以通过企业微信,使用该产品的部分功能,如打卡,查看排版信息等,满足用户的移动办公需求。主要实现的功能有:


  • 实现现有产品的登录入口,并且提供一定时间内的免登录

  • 根据位置不同展示不同的打卡二维码

  • 扫描二维码实现自动打卡

  • 展示用户的排班信息

  • 提供打卡提醒及异常提醒

  • 工时和异常信息的统计

  • 请假及审批

2.企业微信开发应用集成方式

企业微信提供多种应用集成方式。其中,按提供方来分有三种:


  • 基础应用:由微信提供;

  • 第三方应用:开放体系下的第三方服务商提供;

  • 自建应用:我们自己新建的,一般我们也都是需要自建应用进行开发。


按交互方式来分有两种:


  • 主页型应用:用户点击应用后直接打开一个链接;

  • 消息型应用:可以像公众号一样设置多个菜单,每个菜单可以配置不同的响应方式。


ABC WeChat 项目属于自建应用中的主页型应用。这种应用是完全由企业自主开发定制,相对于基础应用和第三方应用更加灵活,功能上也更加符合企业自身需求。而相对于用有限几个菜单来提供响应的消息型应用来说,主页型应用的功能更加强大。


本文主要讨论自建的主页型应用。其基本结构如下图所示。


3.企业微信平台对应用开发的支持

作为开发平台来说,企业微信对其上自建的企业应用提供了简单灵活的集成方式,并通过 API 提供了对手机硬件和微信本身功能的调用,可以帮助企业比较快速地构建出一个企业微信应用供企业用户使用。

简单的集成方式

对于自建的主页型应用,企业微信提供的集成方式是极其简单的,只需要企业管理员在管理端配置一个要访问应用的主页地址即可。当用户点击对应图标访问该应用时,企业微信就会打开内嵌浏览器并访问配置的主页地址。从而实现用户通过企业微信访问企业应用的目的。当然,企业现有应用的 web 页面未必适合直接放到企业微信中使用。一般都需要针对性的开发一套针对企业微信的 web 页面。

网页开发,跨平台

自建主页型应用是指向一个链接地址,后台企业应用服务器对该链接进行响应并下发网页代码。企业微信打开内嵌浏览器来解析网页代码并展示给用户。这个过程和普通网站类似,只是不需要用户打开浏览器而是企业微信打开并维护一个内嵌浏览器。因此对这种应用来说,其和普通 web 应用基本类似,也是基于网页开发的,原则上可以跨平台,只要有浏览器就可以运行。相比于 Native 的应用来说,提供了更多的灵活性。

通过一套标准 API,提供对手机硬件的调用

由于浏览器本身限制,网页上运行的代码难以调用手机本身的一些功能,如扫描,拍照,获取地理位置等。因此企业微信提供了一套 JS-SDK, 第三方可以通过 JS 调用该 SDK 实现对手机部分功能的调用。这种方式本身也屏蔽了不同手机不同操作系统本身的差异性和复杂性,使得开发过程更为简单。但同时也受限于企业微信 SDK 暴露出来的 API,对于其没有暴露的功能,实现起来就会非常困难。

提供消息推送接口

企业微信开放了消息发送接口,企业可以使用这些接口让自建应用与企业微信后台或用户间进行双向通信。消息接口总体上分为主动发送单聊消息、接收单聊消息以及发送消息到群三部分。利用这些接口,自建应用可以充分利用微信强大的沟通能力实现各种各样的通知和提醒功能,使得信息传递的更灵活,更及时。ABC WeChat 项目使用了“主动发送应用消息”接口实现了将打卡提醒和异常通知发送到指定用户的企业微信上。同时,自建应用为应用消息指定一个 URL,使得用户可以通过点击消息进入到应用对应页面上,十分灵活方便。

提供标准页面样式库

在企业微信内部的企业应用的样式最好和企业微信保持统一,这样视觉上不会让用户觉得突兀。WeUI for Work 是一套由微信官方设计的同企业微信原生视觉体验一致的基础样式库。利用该样式库,自建应用可以比较容易地构建出适合企业微信风格的应用。ABC WeChat 也使用了该样式库。

4.开发自建应用时遇到的挑战和解决办法

虽然企业微信已经为应用提供了基本的开发支持,但是还有很多需要完善加强的地方。因为这些不足之处,ABC WeChat 项目遇到了很多技术困难。下面详细的列出这些问题和相应的解决办法。

本地存储

对于网页应用,通常客户端使用的本地存储方式有 localStorage, cookie, WebSQL。但是对于在企业微信中的应用来说,localStorage 和 WebSQL 都无法实现长期存储(微信中 web view 和浏览器的行为差异),只有 cookie 才能满足长期存储的要求。甚至在 ABC WeChat 项目初期,企业微信也是不支持长期存储的 cookie 的,在项目中期时企业微信的一次版本更新中才加入了长期 cookie 的支持(没有在官方文档中找到关于对长期 cookie 支持的说明)。


在 ABC WeChat 项目中,自动登录以避免每次都让用户输入用户名和密码的功能就是使用了长期存储的 cookie。在项目中发现,IPhone 平台上,企业微信对 cookie 的写入有明显的延迟。根据项目经验,需要等待四五秒钟,企业微信才能把 cookie 写入。而在 Android 手机上则没有这个问题,cookie 写入近似是实时的。这种 iPhone 上的延迟在一般的用户应用场景中不会带来问题。但在自动化测试时需要考虑到这种限制,避免登进后立即登出的用例测试。

JSAPI 提供的功能不够丰富

企业微信目前提供一些基础 API 供应用使用,但是并不是很完善。ABC WeChat 项目中就遇到了一些因为 API 支持不足产生的问题。


1)无法获取企业微信当前使用语言


ABC WeChat 项目中有个需求是需要保证应用页面和企业微信使用同一种语言。但是遗憾的是,企业微信并没有提供 API 可以获取到用户当前使用的语言。我们最后是通过调用浏览器的 API 获取语言设置,但是结果在 IPhone 和 Android 的某些机型上表现并不一致,因此需要额外的工作来优化。


2)没有对电子围栏的支持


地理围栏(Geo-fencing)是 LBS 的一种新应用,就是用一个虚拟的栅栏围出一个虚拟地理边界。当手机进入离开某个特定地理区域或在该区域内活动时,手机可以接收自动通知和警告。原有项目需求中有一项就是要利用电子围栏实现用户打卡提醒等功能。但是遗憾的是企业微信 SDK 并没有提供相应的支持,因此该需求没有完整实现。


3)无法充分定制右上角菜单


企业微信提供了 API 可以对右上角菜单进行定制,但是只能隐藏部分菜单,无法彻底隐藏菜单入口,也不支持加入新的菜单。因此项目只能在自己的页面中加入自定义的菜单。


企业微信 API 目前还在持续更新中,希望其能提供更多更强大的功能供企业应用使用。

应用安全隔离机制

企业微信没有为应用之间提供隔离机制。当用户在企业微信内和企业应用进行交互的时候,企业应用后台 API 是不知道当前请求是从哪个应用客户端产生的。而对于不同的应用,企业微信都是打开 webview 进行服务,所以应用就有机会使用其他应用的 cookie。如下图所示,应用 B 有可能利用应用 A 的 cookie 来访问 Server A.其可能的过程如下:


1)用户访问企业应用 A 并通过认证,在企业微信 webview 中会生成对应的 cookie A,其中包含有用户的认证标识;


2)用户访问企业应用 B,假设企业应用 B 是恶意程序并知道 Server A 的相关 URL,则企业应用 B 有机会重定向前端去访问 server A;


3)根据浏览器机制,该访问会自动带上 cookie A。由于 cookie A 中存有用户的合法认证信息,server A 会认为这是一个合法访问从而执行对应的操作。而实际上该操作是用户并不知情的一个恶意操作。



如果企业微信提供标识或者机制使得企业应用后台能够验证当前请求是否来自于正确的应用客户端,将会使应用之间隔离性更好,更加安全。否则应用就需要添加格外的机制去做相应的防范,如添加 CSRF token。ABC WeChat 也是通过在后台 server 验证 CSRF token 实现了对上述跨站攻击的防御。

没有提供集成开发工具

由于应用前端代码是运行在企业微信内嵌的 webview 里,开发人员无法容易的通过添加断点进行调试,所以经常使用 alert 或者抓包的方式进行问题的定位和分析,效率十分低下。官方文档上虽然有提供一些接口调试工具,但大多是针对企业微信某种类型接口的调试,没有提供集成开发工具,无法方便的对网页进行开发调试。


项目后期发现可以使用微信公众平台推出的微信 Web 开发者工具来调试企业微信页面。该工具集成了 Chrome DevTools, 使得开发人员可以像调试浏览器应用一样调试微信网页,能有效提高开发效率。不过项目团队在试用后发现有断点和源码位置不匹配及偶尔卡死的问题。该工具目前还在持续更新中。

不支持单点登录到企业微信

企业微信官方文档上宣称的单点登录,都是使用企业微信账号登录第三方网站。企业微信通过提供 OAuth 接口使得企业应用可以通过该接口的授权实现当前应用的免登录,进而实现了企业应用的单点登录功能。但是企业微信并不支持通过输入员工的企业账号直接登入企业微信。用户必须首先使用企业微信账号登录企业微信,然后才能访问集成到企业微信工作台上的应用。也就是说企业微信本身不支持单点登录。同时企业微信也不支持利用第三方账号注册,用户必须利用个人微信或者手机号完成注册并加入对应的公司。


这一点对于大型公司不够友好。大型公司往往会自己构建单点登陆系统,有自己的账号管理体系,不会完全交给企业微信来维护其用户信息。对于 ABC WeChat 项目来说,客户就是拥有自己的单点登陆系统。因此集成了企业微信后,用户在已经登陆企业微信的基础上还需要再次输入企业账号,通过验证后才能访问企业应用。为了减少用户繁琐的登录动作,我们特意实现了免登录功能,使得在用户成功登录一次后的一定时间(可配置)内都不用再次登录。

对自动化测试支持不足

由于企业微信无法安装到 X86 结构的模拟器上,因此难以实现在模拟器上运行企业微信的自动化测试脚本。项目组就此问题曾咨询腾讯技术支持,得到的答复是建议使用真机进行自动化测试。而对于企业自动化测试来说,使用真机意味着需要管理很多移动设备。对于不已开发移动端应用为主业的大型企业来说,让 IT 部门去管理一批新的移动设备是很麻烦的事情。


对于 ABC WeChat 项目来说,由于绝大部分的页面和功能与企业微信环境并没有关系,基本可以脱离企业微信直接运行在浏览器中。因此项目最终决定直接在模拟器中的浏览器中运行自动化脚本来实现 UI 的自动化测试。

和 Facebook workplace 应用开发的对比

Facebook workplace 是 Facebook 在办公协作领域推出的一款产品,其作用和企业微信类似,企业也可以基于该平台开发自己的企业应用。这里就两者对企业应用集成的支持做了简单对比和分析。可以看出 Facebook workplace 在与企业应用集成方面更符合企业级软件的集成需求。企业微信还需要进一步完善和成熟。

使用和交互方式的不同

Facebook workplace 中用户的使用的是对话式。用户首先会打开一个聊天窗口,在该窗口中,应用中预先提供一些菜单选项,当用户点击这些选项的时候,客户端就会发送消息给相应的应用程序后端。后端执行相应操作后会返回消息给到用户的当前聊天窗口。对于用户来说,有点像和某个对象在聊天,用户问,聊天对象回答。由于是对话式的,应用提供的菜单数量有限,可能给出的交互界面一般也不会太复杂。这样才能对用户的某个操作快速给出一个响应,符合一问一答的沟通体验。


企业微信中提供两种交互方式。其中消息型应用类似 Facebook workplace,也是对话式。而主页型应用则不同,它是用 H5 构建出来的网页,用户通过网页和应用后台进行交互。相对于对话式,网页上可以提供更加丰富的业务功能,从体验上来说,是一个网站或者一个软件。

对单点登录的支持

如前所述,企业微信本身不支持单点登录。而 Facebook workplace 则提供对单点登录的支持。用户可以通过输入 IdP 所管理注册的第三方账号直接登录 Facebook workplace。


其官方文档上声明,除了可以集成支持标准 SAML2.0 协议的 IdP 之外,明确支持以下几种 IdP:


  • ADFS (Active Directory Federation Service)

  • Azure AD

  • G Suite (formerly Google Apps for Work)

  • Okta

  • OneLogin

  • Ping Identity


对企业来说,一套统一的用户管理机制显然更容易管理和维护。很多企业已经建立了 IdP 服务器用来统一管理账号。因此使用未提供单点登录集成的企业微信,有可能会增加一些对用户账号管理的重复工作。

对后台 API 的安全验证机制

上文提到企业微信没有为其上的企业应用提供隔离机制,因此需要应用额外处理可能的安全的风险。但是 workplace 对这点就有较完善的考虑。其提供一种签名机制可以用来验证请求方是否合法。其基本过程可以描述如下:


a.前端需要调用后台 API 的时候,都需要先调用 workplace 提供的 SDK 获取一个签名,在获取该签名的时候,需要提供 appID。每个应用都有唯一的 appID。


b.前端调用后台 API,并带上签名作为参数。


c.后台 API 接收到该请求,根据 appID 和相关参数重新生成签名。然后通过比对当前签名和新生成的签名是否一致来确保当前请求确实来自于同一个应用客户端。


如果应用 A 试图调用其他应用 B 的 API,是无法成功的,因为 A 无法获取到应用 B 的 appID,也就无法在请求中加入正确的签名。当请求到达应用 B 后,签名验证失败,该请求将被退回。

小结

综上,本文结合实际项目 ABC WeChat 对企业微信开发企业应用的集成方式做了介绍,并重点分析了企业微信作为开发平台对应用的支持的优点和不足。文章最后比较了在企业微信和同类型平台 Facebook workplace 上开发企业应用的不同之处。对在企业微信上开发自建应用有一定借鉴意义。

作者简介

秦明辉,现就职于奥博杰天软件有限公司,担任多个项目的架构师和技术负责人。曾担任神州数码系统有限公司的资深工程师,负责智慧城市政务平台、推荐系统和银行智能柜面系统的设计与研发。关注高可用后台服务架构,推荐系统以及 DevOps。


更多内容,请关注前端之巅。



2019-04-02 13:306580

评论 2 条评论

发布
用户头像
关于企业微信的开发流程和问题写得很详细, 感谢!
2019-06-20 11:41
回复
用户头像
兄弟那么6,来我们公司吧,在泰国,月薪大几万,v我,TH0631280401
2019-04-07 16:17
回复
没有更多了
发现更多内容

NIO 看破也说破(五): 搞,今天就搞,搞懂Buffer

小眼睛聊技术

Java 学习 读书笔记 架构 后端

Android工程架构演进及康威定律

石头

hexo博客系统的实现原理与搭建

音视频专家-李超

Hexo 博客

万字总结——反射(框架之魂)

学习Java的小姐姐

Java 反射 Java 25 周年

别做误人子弟的「职业导师」

Tony Wu

职业成长 导师 教练

大数据中台之Kafka,到底好在哪里?

奈学教育

kafka

我是一个连地摊都不会摆的废人

Neco.W

创业 投机 投机者 地摊

如何让解决无法访问 GitHub 的问题?

JackTian

GitHub

白天写代码,晚上摆地摊!9年前摆地摊学会了这些道理...

王磊

centos6.9开机启动服务说明

唯爱

TCP 半连接队列和全连接队列满了会发生什么?又该如何应对?

小林coding

Linux TCP 网络安全 计算机网络 网络协议

原创 | TDD工具集:JUnit、AssertJ和Mockito (十七)编写测试-标签和过滤

编程道与术

Java 编程 TDD 单元测试 JUnit

【写作群星榜】5.29~6.4写作平台优秀作者&文章排名

InfoQ写作社区官方

写作平台 排行榜 热门活动

5G时代,如何彻底搞定海量数据库的设计与实践

奈学教育

海量数据库的设计与实践

使用ADMT和PES实现window AD账户跨域迁移-介绍篇

BigYoung

windows AD ADMT PES 迁移

游戏夜读 | 网络游戏怎么赚钱?

game1night

判例学习(一)梨视频诉字节跳动帮助侵权二审判决

Yin

学习 读书笔记 互联网 知识产权 法律

HTML5 && CSS

shirley

html5 css3

过滤器 和 拦截器 6个区别,别再傻傻分不清了

程序员小富

Java

分布式架构,刚性事务-2PC必须注意的问题及3PC详细解

奈学教育

分布式架构 2PC注意事项 3PC详解

机器学习算法评估指标——2D 目标跟踪

做技术BP的文案Gou

学习 2D 评估标准

ARTS-WEEK02

子路无倦

C++:两百字三段代码解决函数返回局部变量问题

韩小非

c++ 函数栈调用 返回局部变量

python3.8.3安装ipython和jupyter

肖飞码字

python3.x Jupyter Notebook

Silicon Labs Gecko bootloader 简介

taox

zigbee bootlaoder

深入理解JVM垃圾回收机制 - 何为垃圾?

SkyeDance

深入理解JVM 垃圾回收机制

【大厂面试03期】MySQL是怎么解决幻读问题的?

NotFound9

MySQL 数据库 编程 架构

预告|2020中国CRM品牌测评报告

人称T客

MyBatis启动之XMLConfigBuilder解析配置文件(二)

ytao

后端 mybatis

深入理解Java虚拟机

SkyeDance

深入理解JVM

强烈安利第一个画图工具!

我是程序员小贱

高效工作 高效

企业微信自建应用开发初探_大前端_秦明辉_InfoQ精选文章