编辑推荐

用户信息及设备信息采集器

未来已来2018-09-06 14:26

是否还在为无法获取用户信息，无法收集设备信息而不停的码码码呢？现成的脚手架来了，地址： https://github.com/LiuLingyang/collector，食用方式请阅读README.md。

俗话说的好，最珍贵的不是代码本身，而是它的实现思路（不知道是谁说的）。总之先上图再说话。

依步骤解析：

1. 用户访问合作站点页面；

2. 页面打开时，会加载 xxx.js 文件；

3. xxx.js 文件在客户端生成一个隐藏的 iframe；

4.i frame 与宿主机通讯，获取宿主机的基本信息，以及帆布指纹信息；

5.i frame 将获取的信息传入自己的服务器。

*这里的xxx.js就是项目中的collector.bundle.js。

*引入iframe主要是为了解决跨应用之间的数据收集，如果你只是单应用，collector.bundle.js就已经够了（但这需要你手动去修改一些代码，兼容性做的不好）。

同一用户同一设备的再次访问，我们自然不希望重新去获取这些重复的信息。第一次访问后我们会要求后台返回一个uuid给前端，而我们将其存入localStorage中。同一用户的后续访问我们只关注其变化的部分。完善的信息获取流程如下图所示：

*本项目只做了localStorage的判断，如果有需求，可以自行fork。

*帆布指纹和userAgent的解析都已经集成，无需做多余的工作。但应用信息的获取需要在客户端页面自行埋入节点，获取方式也可以多种多样。本项目是通过dom操作拿的（简单粗暴有木有）。

本项目目前还是一个很龊的版本，后台api也没写（本人前端小白一枚，还写不了后台，惭愧），获取的信息也很有限。

目前能获取的信息：