WhatsApp网页版登录

2016 年第 1 期 深圳职业技术学院学报No.1, 2016 DOI:10.13899/ki.szptxb.2016.01.004基于 iBeacon 技术的微信“摇一摇”考勤系统的实现郭 玲（深圳职业技术学院 计算机工程学院，广东 深圳 518055）摘 要：介绍了一种结合移动互联网技术和智能手机应用实现的创新型考勤系统．系统采用 iBeacon 设备进行员工定位，使用微信“摇一摇”记录考勤行为，并推送考勤信息到后台处理程序,完成数据存储及数据分析统计．系统具有精确、高效、低成本和部署方便的特点．关键词：考勤；移动互联网；iBeacon 技术；微信“摇一摇”中图分类号：TP399文献标志码：A文章编号：1672-0318 （2016 ）01-0019-05随着移动互联网的迅猛发展以及智能手机的项低耗能蓝牙（BLE ）技术．其工作方式是iBeacon 普及，各种新型的移动考勤系统不断出现并得以推设备使用 BLE 技术向周围发送自己特有的信号，移 广应用，主要包括各种手机客户端考勤 APP软 动设备操作系统定位接收并解释，向等待 iBeacon 件．移动考勤系统是一种利用手机定位机制、位置信号的所有应用软件 APP 反馈信号，发送 UUID 、 服务、移动通讯网络和互联网构建的一种新型的考Major 、Minor ．接收信号的APP 先确认 UUID ，如 勤系统．这些新一代基于移动互联网的考勤系统果确认是发送给自己的信号，则再根据 Major 、 从考勤形态、形式上突破了传统打卡机、指纹机等Minor 的组合进行处理 ．目前 iOS7以上及 固定设备的应用束缚, 不受考勤地点、考勤时间的Android4.0 以上操作系统的手机均支持该技术，根 限制，具有低成本、便捷、高效、规范的优势．目据这项新的定位技术可以做出许多技术应用 ． 前大部分基于移动互联网的考勤系统是利用手机本系统采用 iBeacon 设备进行员工定位，确认 GPS 定位来确定员工的位置，该方案的不足之处在员工位置，通过微信记录考勤信息WhatsApp网页版，包括员工微信 于，用户可以安装相关 GPS 位置模拟器软件，将账号唯一标识（OpenID ）、员工当前位置、考勤时 手机的 GPS 信号模拟到任意地点，导致虚假考间等，并将考勤记录传送给应用服务器做进一步的 勤．另外，使用该考勤系统的用户必须在手机上安统计分析及考勤处理． 装专门的 APP 考勤软件，需要一定的软件部署和1.2 系统架构 维护成本．我们研发的这一微信“摇一摇”考勤系系统架构设计如图 1 所示． 统，基于 iBeacon 技术定位，员工手机启用蓝牙，在指定的考勤地点（如：办公室）内放置 iBeacon 在指定范围内使用微信“摇一摇”，即可轻松实现设备，用户到达该区域范围后，打开手机的蓝牙， 考勤签到．进入手机微信，使用“发现”—“摇一摇周边”，摇一摇手机，微信即会接收到 iBeacon 发射的信号， 1 系统设计包括 UUID 、Major 、Minor ，微信一旦接收到该信 1.1 iBeacon 技术号，便将接收到的设备标识信息和员工的微信账号iBeacon 是苹果公司在 2013 年 9 月推出的一标识信息，推送到该 iBeacon 设备绑定的微信公众收稿日期：2015-10-08作者简介：郭玲（1973-），女WhatsApp网页版，湖南湘潭人，副教授，主要研究方向为Web应用开发、移动应用开发．- 19 -绑定微信公众号发射信号发射信号发射信号配置员工 1 手机微信客户端Ibeacon……员工 n 手机微信客户端设备员工 2 手机微信客户端推送接收到后台处理的Ibeacon 获取用户信息页面信号初始化配置传送各员工客户端考勤信息应用服务器图 1 “摇一摇”考勤系统架构设计图 号后台，微信公众号后台程序记录该用户的考勤服务号，在此基础上进行二次开发来实现各种全新 记录，并将其发送到应用服务器进一步处理．的个性化的应用服务．如商家微官网、微支付、微活动、微报名等，实现和特定用户群体的文字、图 2 系统实现片、语音的全方位信息沟通、互动．微信公众平台 2.1 系统初始化配置从 2012 年 08 月 23 日正式上线以来，各种应用和功首先在微信公众平台对系统做系列初始化能不断被开发推出，层出不穷．我们开发的这一微 设置，然后配置 iBeacon 设备的标识参数，步骤信“摇一摇”考勤系统提供了一种全新的考勤模式． 如图 2 所示．配置完成后，iBeacon 设备即启用，2.1.2 开通“摇一摇周边”权限 用户手机可以接收和反馈 iBeacon设备发射的系统中员工采用微信“摇一摇”的方式作为签 信号．到的动作，我们申请的微信公众号需要开通这一权 2.1.1 申请微信公众号限．使用微信公众平台提供的“申请开通功能”接整个系统的实现基于 iBeacon 设备和微信公口，申请开通“摇一摇周边”权限，申请请求成功 众平台，两者需要在信息上进行联接互通，以微提交后，平台会在 3 个工作日内完成审核．提交的 信公众号作为其绑定的依据和标识，首先在微信参数包括以下内容： 公众平台申请一个微信公众号．http 请求方式: POST （使用https 协议）微信公众平台简称 WeChat ，是腾讯公司在微/shakearound/account/re 信的基础上打造的给个人、企业和组织提供业务gister?access_token=ACCESS_TOKEN 服务与用户管理能力的全新服务平台 ．通过这POST 数据格式：json 一平台，个人和企业都可以申请一个微信的公众POST 数据例子：略 申请微信 开通“摇一摇申请设 配置 iBeaconPOST 的参数包括：调用接口凭证、联系人姓 公众号周边”权限备 ID设备名、联系人电话、联系人邮箱、平台定义的行业代图 2 系统初始化配置步骤号、相关资质文件的图片 url 、申请理由等．深圳职业技术学院学报， （ ） - 20 -2016 15 1调用正常时返回 JSON 包如下：配置完成后即启用，将会不断地向外发送信号，信{data:{ }, errcode: 0, errmsg: success.} 号内容包括 UUID 、Major、Minor 参数． 2.1.3 申请设备 ID2.2 考勤信息接收与推送员工在摇动手机的时候，如果手机接收到了用户使用微信“摇一摇”实现考勤签到，图 3 iBeacon 设备的发射信号，微信必须识别该信号为系统考勤信息的接收与推送流程． 是否来自于系统指定的考勤用 iBeacon ，通过读2.2.1 iBeacon 设备信号接收 取信号中的“UUID 、Major 、Minor ”标识进行检在 iBeacon 信号发射区域范围内，用户打开微 测．我们向微信平台申请设备 ID ，作为微信认可信，使用“摇一摇”，微信将检测到该 iBeacon 设备， 的考勤设备 ID ，将系统的微信公众号与考勤用并读取 Major 、Minor 参数，当这些参数与微信公众 iBeacon 设备进行绑定．使用微信公众平台提供平台中申请的设备 ID 相匹配时，微信则将其视为 的“申请设备ID ”接口发出以下申请：员工签到并作出相关操作，将该用户摇到该设备的http 请求方式：POST （使用https 协议）这一事件通知设备对应的公众号后台．/shakearound/device/ 用户手机进入微信“摇一摇周边”，其界面如图 applyid?access_token=ACCESS_TOKEN4 所示．此时摇动手机如果摇到了正确的考勤POST 数据格式：jsoniBeacon 设备，界面下方即会显示出系统图标和该POST 数据例子：设备对应的导航链接，具体显示如图 5 所示．用户{ quantity:3,点击该导航链接，对应的后台处理页面会进行进一apply_reason:测试,步的分析与处理．comment:测试专用,2.2.2 绑定 iBeacon 设备处理页面poi_id:1234必须先配置好iBeacon 设备的ID 将其与处理页}面绑定，这样在手机微信客户端接收到考勤 iBeacon成功调用后，系统会返回本次申请的批次 ID设备的信号后，就可以链接进入正确的后台处理页 （apply_id ）．使用“查询设备ID 申请审核状态”面，该处理页面部署在应用服务器上． 接口根据 apply_id 可以查询该次申请是否通运行自定义的预处理应用程序调用微信公众平 过．查询到申请成功后，使用“查询设备列表”台提供的“新增页面”接口，指定一个新增的页面， 接口根据该 apply_id 查询本批次申请的所有设备设置导航链接的主标题、副标题，页面 url 地址和 ID 及相关设备信息 , 里面包含关键信息：系统图标图片素材，微信公众平台会返回一个参数 device_id、UUID 、Major 、Minor ，将这4 个数据 page_id 作为为该页面的 ID ．接下来调用“配置设 保留下来备用．备与页面的关联关系”接口将 iBeacon 设备与该处 2.1.4 配置 iBeacon 设备理页面建立管理关系．经过预处理程序的配置，用iBeacon 设备需要自行配置三个标识参数：户使用微信“摇一摇”，在“摇一摇周边”界面将会 UUID 、Major 、Minor ，使用通用配置工具显示该设备对应的页面信息，包括：图标、主标题、 LightBlue 对 iBeacon 设备进行配置，其参数与微副标题，点击链接后将进入 url 地址所对应的后台 信平台中申请的设备 ID 必须一致．iBeacon 设备处理页面．客户端界面显示导航链接用户手机进入“微信”—接收 iBeacon 信号，显用户摇动手机“发现”—“摇一摇”示“周边”选项”微信客户端将 iBeacon信息发送到微信后台图 3 考勤信息接收与推送流程深圳职业技术学院学报， （ ）2016 15 1 - 21 -设备与用户的距离等．用户的 OpenID 是普通用户的标识，对当前公众号唯一．2.3 手机微信客户端查看考勤信息微信后台接收到手机微信客户端送推过来的消息后，将获取用户信息以实现考勤信息的查看，图6 所示为具体的实现流程．2.3.1 用户信息获取微信后台接收到手机微信客户端送推过来的消息后，处理页面调用微信平台的 JSAPI 接口，先判断该用户是否关注了该公众号，如果没有，则提示用户关注该公众号．如果关注了，则直接获取相关的用户信息，调用微信平台的“获取用户基本信息图 4 微信“摇一摇”初始界面（包括UnionID 机制）”接口，根据 OpenID 获取用户信息，返回的用户信息包括昵称、性别、头像、所在城市、国家、省份、语言、用户关注时间、备注、分组 ID 等．2.3.2 手机微信考勤信息查看页面对于已经关注了系统公众号的用户，摇到iBeacon 设备后，点击“摇一摇周边”界面上的导航链接，即可以直接打开员工考勤数据页面进行查看，该页面显示了当前所有的员工考勤情况．包括每个用户的 OpenID 、昵称、头像、位置和考勤时间．其中，OpenID、昵称、头像信息取自于微信公众平台，位置和考勤时间来自于接收到的 iBeacon信号．图 5 接收到正确 iBeacon 信号后的界面2.4 考勤信息存储 2.2.3 考勤信息推送在应用服务器上部署有考勤数据库，系统后台用户在手机微信中摇到考勤 iBeacon设备处理程序获取用户信息后，先判断该用户是否为需 后，微信客户端会把这个事件推送到微信公众号要考勤的用户，并将合法用户的各项考勤信息存储 的后台．推送内容包含摇一摇时“周边”页卡展到考勤数据库．以此为依据，系统支持进一步的多 示出来的页面所对应的设备信息，以及附近最多维度的数据报表汇总和统计分析，管理者可以通过 五个属于该公众账号的设备的信息，该数据中包任何一台能够上网的计算机或手机，就能查询和管 含用户的 OpenID，设备的UUID 、Major、MinorWhatsApp网页版，理考勤．考勤信息存储流程如图 7 所示．用户点击“摇一获取用户显示考勤摇周边”界面的是信息信息微信后台接收客导航链接用户是否关户端推送的考勤注了公众号信息否 提示用户