随着移动互联技术的发展，一种通过手机扫描二维码完成签到的方式已在单位考勤、培训、会议等各种场景下广泛应用，其相对于传统的签到考勤方式明显更方便、高效且易于管理。目前，能实现类似扫码签到功能的APP、小程序种类繁多，一些主要用于单位员工考勤，一些用于培训或会议人员签到，对于一般的能够胜任，但如果对签到严格且需求多变的机构来说，这些免费的应用就显得有些力不从心了，主要表现在:(1)签到管理类别单一，不能实现多样的签到管理和信息采集，如不能同时实现对签到者相对固定的单位考勤和人员变化较大会议、培训的签到管理;
(2)使用方式较
为繁琐。大型会议或培训人员众多，如果现场下载APP 并注册信息后再签到，由于操作步骤繁琐，不仅会引起现场混乱，而且下载APP 对于现场网络要求也较高，如使用流量也会引起签到者的反感;(3)防签到作弊
的机制不完善。大多数APP 或小程序可以通过登录他
人账号代签;(4)不能实现灵活的后台管理。APP 或
小程序尽管开放了一些后台管理，但仍不能处理多变的
需求。
针对以上问题，将介绍一种基于HTML5并自行构建后台服务和数据管理的扫码签到的实现方法，并探讨扫码签到防作弊的处理方案。
1扫码签到流程
扫码签到是通过移动设备扫描二维码，将签到者的
即时信息通过访问远程服务器进行记录实现签到的过程，完整的流程应包括:(1)由考勤管理员生成考勤项目;(2)将访问考勤项目的链接地址转换成二维码;(3)签到者扫码二维码;
(4)系统记录签到者即时信
息，如签到时间、地点等信息，完成签到。签到过程中，对于首次签到需要验证或登记签到者信息，如单位
考勤人员信息已录入，仅需验证一次即可，如对于会议、培训外来人员签到需要登记一次简要信息。如果在签到过程中出现异常，如地理位置获取等异常可提交由考勤管理员完成签到，如图1所示。
2技术架构
考虑到扫码签到的通用性，应用采用HTML5做为
前端，使用ASP.NET Webapi (简称WebApi)实现与后端交互，如图2所示。此移动Web 开发架构不受平台限制，只要具有浏览器功能的APP，无论还是手机浏览器通过“扫一扫”功能均能实现扫码签到，免去安装APP 的繁琐过程；前后端完全分离，易于开发和维护，必要时也可打包成普通APP 安装使用。
基于HTML5扫码签到的实现及防作弊方案探讨
姚渝涛
（重庆市渝中区教师进修学院，重庆400015）
摘
要：手机扫码签到已广泛应用于各种考勤、会议和培训中，但普通扫码签到应用不能完全适应各种场景的需求。鉴于此，介绍了一种基于HTML5的扫码签到的实现方法，并探讨了扫码签到中可能出现的代签和异地签等问题的解决方案，以及签到信息前后端绑定、手机定位精度等关键技术的实现。关键词：扫码签到；HTML5协议；防作弊
图1
考勤管理员
生成考勤信息
系统
签到人
生成签到二维码首次签到登记或验证并
绑定手机信息获取手机信息、地理位置和签到时间
非首次签到
处理异常并完成签到
获取信息异常获取信息正常
签到时间范围外
签到时间范围内
签到失败
签到成功
记录手机信息、地理位置、签到时间
图2
htm15
webapi
DB
3
设计与实现
3.1数据库
为了适应各种签到场景，将每次签到细分为不同类
别的签到项目，涉及签到的主要数据库表包括，如图3所示：签到项目信息表(Tb_SignInfo)，字段包括：签到名称(SignName)、签到地点名称(SignLocale)、签到地点经纬度(SignLngLat，用于判断实际签到位置与签到位置距离)、签到开始时间(BeginTime)和结束时间(EndTime)等；签到明细表(Tb_SignDetail)，字段包括：签到手机(phone，手机号做为签到ID)、签到时间(SignTime)、签到项目信息ID (SignID)、签到地点经纬度(LngLat)、签到地点地址(Address)、操作系统类型(OsType)、备注(Mem)。另外还包括签到用户表(Tb_User 记录手机、姓名、单位、手机绑定标志等信息)、系统管理员表(Tb_Manager)、签到项目名称表(Tb_Subject)、签到项目类别表(Tb_SubCate)。
3.2WebApi
WebApi 做为一种应用接口框架，能较好地实现前
后端的分离，方便跨域调用和部署，尤其适合移动应用的开发。
扫码签到前端通过调用Webapi 提供的接口和服务，实现登记或验证签到用户、记录签到详细信息等与后端的交互，关键代码如下:
//通过手机验证用户信息[HttpGet]
public object GetUser(string id){
DBRepertoryDataContext dbr =new
DBRepertoryDataContext();
var u =dbr.QueryUser(id);Json(u);}
//首次扫码绑定手机信息[HttpPut]
public object BindPhone(string id){
DBRepertoryDataContext dbr =new
DBRepertoryDataContext();
try {
dbr.SetBinding(id);}
catch {
Json (new {statusCode
="300"});
}
Json (new {statusCode ="
200"});
}
通过GetUser 方法获取手机对应的用户信息，进行签到验证，该方法用于单位考勤签到者固定的情况，对于会议或培训签到者不固定的情况，首次扫码将登记用户基本信息，代码略;BindPhone 方法将首次扫码登记的手机信息与用户在后端绑定。
#region 获取签到信息[HttpGet]
public object GetSignInfo(int id){
DBRepertoryDataContext dbr =new DBReperto⁃ryDataContext();
var si =dbr.QuerySignInfo(id);Json(si);}
#endregion
#region 获取签到用户[HttpGet]
public object GetSignUser(int id){
DBRepertoryDataContext dbr =new DBReper⁃
toryDataContext();
var u =dbr.QuerySignUser(id);
图3
Json(u);
}
#endregion
GetSignUser方法列出所有签到者主要信息，用于会议或培训场景中前端显示签到情况。
#region记录签到信息
[HttpPost]
public object RecSignInfo()
{
int signId=
Convert.ToInt32(HttpContext.Current.Request. Params["signId"]);
string phone=HttpContext.Current.Request. Params["phone"];
string lngLat=HttpContext.Current.Request. Params["lngLat"];
string address=HttpContext.Current.Request. Params["address"];
string osType=HttpContext.Current.Request. Params["osType"];
string mem=HttpContext.Current.Request.Params ["mem"];
DBRepertoryDataContext dbr=new DBRepertory⁃DataContext();
var user=dbr.QueryUser(phone);
if(user==null||!(bool)user.Binding)
{
Json(new{statusCode="999"}); //手机号未绑定
}
try
{
var si=dbr.QuerySignInfo(signId);
var beginTime=si.BeginTime;
var endTime=si.EndTime;
var curTime=DateTime.Now;
if(curTime.CompareTo(beginTime)<0)
{
Json(new{statusCode="101" });//签到时间未到
}
else if(curTime.CompareTo(endTime)>0)
{
Json(new{statusCode="102" });//签到时间已过
}
else
{
if(dbr.QuerySignDetail(phone,signId)==null)
{
var sd=new Tb_SignDetail();
sd.SignId=signId;
sd.Phone=phone;
sd.LngLat=lngLat;
sd.Address=address;
sd.SignTime=curTime;
sd.OsType=osType;
sd.Mem=mem;
dbr.InsertSignDetail(sd);
Json(new{statusCode=" 200"});//签到成功
}
else
{
Json(new{statusCode=" 201"});//已经签到
}
}
}
catch
{
Json(new{statusCode="300" });
}
}
#endregion
RecSignInfo实现扫码签到的逻辑判断，并记录签到信息。
3.3前端
MUI(Mobile User Interface)是一套基于HTML5的，遵循HTML5+规范的，开源的(遵循MIT条款)，用于手机端界面开发的一套框架。其具有轻量级、组件丰富、易于部署等特性，能够较好地实现扫码签到的前端设计。
签到首页index.html通过签到项目ID获取签信息，并通过“高德地图开放平台”提供的JS API定位签到地点。
通过高德JS API获取签到地点信息:
<script type="text/javascript"
src="webapi.amap.
com/maps?v=1.4.8
&key=***&plugin=AMap.Geocoder"></script>//获取地理位置
var map,geolocation;var lnglatXY,ad,mem;
var mapObj =new AMap.Map('iCenter');
mapObj.plugin('AMap.Geolocation',function (){geolocation =new AMap.Geolocation({
enableHighAccuracy:true,//是否使用高精度
//定位，默认:true
timeout:10000,//超过10秒后停止定位，默
//认：无穷大
maximumAge:0,//定位结果缓存0毫秒，默认:0
convert:true,//自动偏移坐标，偏移后的坐
//标为高德坐标，默认:true
showButton:true,//显示定位按钮，默认:true
buttonPosition:'LB',//定位按钮停靠位置，默
//认:'LB'，左下角
buttonOffset:new AMap.Pixel(10,20),
//定位按钮与设置的停靠位置的偏移量，默认:Pixel(10,//20)
showMarker:true,//定位成功后在定位到的用户登录界面设计代码html
//位置显示点标记，默认:true
showCircle:true,//定位成功后用圆圈表示定
//位精度范围，默认:true
panToLocation:true,//定位成功后将定位到的
//位置作为地图中心点，默认:true
zoomToAccuracy:true //定位成功后调整地图
//视野范围使定位位置及精度范围视野内可见，默认:false
});
mapObj.addControl(geolocation);CurrentPosition();
AMap.event.addListener (geolocation,'complete',on⁃Complete);//返回定位信息
AMap.event.addListener (geolocation,'error',onError);//返回定位出错信息});
//返回定位信息回调函数function onComplete(obj){
lnglatXY=String();ad=obj.formattedAddress;if(lnglatXY!=null||ad!=null){
var dis =obj.position.distance(arr);//计算签到地点//和定位之间距离
var res='经纬度:'+lnglatXY+'\n 精度范围:'+obj.ac⁃curacy+'米'+'\n 当前位置:'+ad+"\n 距离签到地点:"+
alert(res);if(dis>200){
mem="定位距离签到地点"+Fixed(2)+"米，超出设定范围!";
document .getElementById ("alertInfo").style.
display="block";
HTML="您的当前位置超出签到地点设定范围，请点击【签到】后与签到管理员联系!";
}else{
mem="";}
if(!signInfoShow){
play="block";
}}else{
alert('未获取定位信息!请在手机【设置】中开启【位置服务】，重扫或刷新并允许获取位置信息!');}}
获取签到项目信息院
function getSignInfo(){
var ua =window.LowerCase();if (ua.match (/MicroMessenger/i)=='micromessen⁃ger'){
mui.ajax(window.domain+'api/Sign/GetSignInfo/'+signId,{
dataType:'json',//服务器返回json 格式数据type:'get',//HTTP 请求类型
timeout:10000,//超时时间设置为10秒;success:function(ret){
HTML=ret.SignName;
HTML=ret.SignLocale;
//将返回签到地点经纬度转换为数组var s=ret.SignLngLat.split(',');var lng=parseFloat(s[0]);var lat=parseFloat(s[1]);arr.push(lng);arr.push(lat);},
error:function(xhr,type,errorThrown){
图6
nerHTML="服务器连接超时，请稍后再试!";
}});
if(phone==null){
window.location.href="regtel.html?id="+signId;
}
如图4所示。
如果是首次扫码签到前端存储的phone 为空，则转到页面regtel.html 验证或注册签到者信息，并在前端和后端绑定手机信息做为签到ID。如图5所示。
var signId=getUrlParam("id");
var ElementById('reg_phone').value;
var btnArray =['否','是'];
if (e.index ==1){
//远程设置用户绑定信息标识
mui.ajax (window.domain+'api/User/
BindPhone/'+phone,{
dataType:'json',//服务器返回json 格式数据
type:'put',//HTTP 请求类型
timeout:10000,//超时时间设置为10秒;
beforeSend:function(){
mask.show();//显示遮罩层
mui("#savePhone").button('loading');},
complete:function(){
mui("#savePhone").button('reset');mask.close();},
success:function(ret){
if(ret.statusCode=="200"){if(checkPhone(phone)){
localStorage.setItem("phone",phone);
innerHTML="设置成功,3秒后将返回签到页...";
window.setTimeout(function(){
window.location.href ="index.html?id="+signId;
},3000);}else{
}}else{
},
...
在会议或培训现场显示已签到人员信息页面sign⁃List.html，如图6所示，代码略
。
图
4
图
5

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。