APPCNA 手势验证登录

今天在APP中集成了指纹与手势登录功能，本文章分两部分进行记录。一是手势功能的逻辑。二是代码实现。该APP是采用APPCAN开发，直接用其已写好的插件，调用相当接口就要可以了。

 

1、在APP的个人中心加入手势设置的方法，用户只要登录后进入个人中心就可以设置手势登录功能。

页面代码如下：

 <a href="#" class="my_info" onclick="createGesture()">
                    <div class="fl tuoch_setting">手势设置(仅本机有效)</div>
                    <div class="fr fa fa-angle-right ulev2 sc-text"></div>
                </a>

onclick方法如下，单击后会打开手势设置界面。

isNeedVerifyBeforeCreate参数是在你重设手势时会不会较验之前的手势。我这选的是不校验。只要你登录了，你的手势就可以重新设置。不论你之前用的什么手势。

function createGesture(){ var data={ isNeedVerifyBeforeCreate:false } uexGestureUnlock.create(JSON.stringify(data)); }

2、手势设置成功后我们如果退出，在登录界面会多一个手势登录功能

 

 

 点击后会对之前设置好了的手势进行验证，页面代码如下：

<div id='gestureunlockdiv' class="resxinlang ub-img umhw2" onclick="uexGestureUnlockverify();">手势登录</div>

onclick方法也是非常简单，只要调用插件uexGestureUnlock的接口就ok。

 function uexGestureUnlockverify()
    {
        uexGestureUnlock.verify();
    }

3、上面插件的方法在执行行我们都要对插件uexGestureUnlock进行初始化，包括手势验证的回调方法cbVerify。还有设置手势和验证手势时的监听方法onEventOccur

function initGestureUnlock() { uexGestureUnlock.onEventOccur=function(info){ if(JSON.parse(info).eventCode==11){ appcan.window.openToast("手势密码设置完成！",2000,5,0); } if(JSON.parse(info).eventCode==5){ appcan.window.openToast("手势密码验证成功！",2000,5,0); //登录操作 //GestureLogin();
 } if(JSON.parse(info).eventCode==4 || JSON.parse(info).eventCode==10) { uexGestureUnlock.cancel(); } //1 插件初始化 //2 开始手势密码验证 //3 手势密码验证失败 //4 验证过程被用户取消 //5 手势密码验证成功 //6 开始手势密码设置 //7 用户输入的密码不符合长度要求 //8 开始第二次输入手势密码 //9 两次输入的密码不一致 //10 手势密码设置被用户取消 //11 手势密码设置完成 
 } uexGestureUnlock.cbIsGestureCodeSet=function(info){ if(JSON.parse(info).result){ } } uexGestureUnlock.cbVerify=function(info){ if(JSON.parse(info).errorString=="在未设置密码的情况下进行验证密码操作"){ appcan.alert("请先进行手势设置！"); return false; } if(JSON.parse(info).isFinished=="false") { appcan.alert("手势密码登陆失败！请使用账号密码重新登录！"); $("#gestureunlockdiv").hide(); } if(JSON.parse(info).isFinished) { GestureLogin(); } } uexGestureUnlock.cbCreate=function(info){ } var data={ backgroundImage:"../images/uexGestureUnlockbg.jpg", iconImage:"../images/uexGestureUnlockTouxiang.png", normalThemeColor:"#008cff",  //普通主题色
            selectedThemeColor:"#124dc3",//选中主题色
            errorThemeColor:"#ff0000",   //错误主题色
            cancelVerificationButtonTitle:"取消", minimumCodeLength:5, verificationErrorPrompt:"验证错误!您还可以尝试%d次", verificationBeginPrompt:GestureLoginUserName } uexGestureUnlock.config(JSON.stringify(data)); uexGestureUnlock.isGestureCodeSet(); }

4、在验证手势成功后会调用自定义的方法 GestureLogin()，该方法中有一个变量GestureLoginUserName，就是登录的用户名，这个用户名来自于我们登录成功时写入文件的用户名。

function GestureLogin(){ if(GestureLoginUserName=='') { appcan.window.openToast("请先使用用户名和密码登录！",2000,5,0); return; } showMsg(); appcan.request.ajax({ url:GetServiceHostIp()+"LoginByUserId?userName="+escape(GestureLoginUserName), type:'get', dataType:'json', success:function(data, status, requestCode, response, xhr) { hidenMsg(); if(data.Status=="1") { appcan.window.publish('login',data.Data); appcan.locStorage.setVal('islog','1'); appcan.locStorage.setVal('userId',data.Data.userId); appcan.locStorage.setVal('userName',data.Data.userName); appcan.locStorage.setVal('IdCard',data.Data.idCard); appcan.locStorage.setVal('xmbm',data.Data.xmbm); appcan.window.publish('close_login','0'); uexWindow.evaluateScript("desktop", "0", "location.reload('../approval/desktop.html')"); uexWindow.open("desktop", 0, "../approval/desktop.html", 1, 0, 0, 0); uexWindow.close(); } else if(data.Status=="2"){ appcan.window.openToast(data.Message,2000,5,0); } else{ appcan.window.openToast("用户名或密码错误，错误代码："+data.Status,2000,5,0); } } , error:function(xhr,status,errMessage){ hidenMsg(); appcan.window.openToast('登陆失败,原因：errMessage:'+errMessage+',xhr:'+xhr+',status:'+status,2000,5,0); } }); }

5、接下来的问题就来了，我们如何将信息写入到文件中及读取呢，请看我下面提供的一组有用的插件接口

//创建文件
var file = uexFileMgr.create({ path:"wgt://data/1.txt" }); if(!file){ alert("创建失败!"); } //打开文件
var file = uexFileMgr.open({ path: "wgt://data/1.txt", mode: 3 }); if(!file){ alert("打开失败!"); } //判断文件是否存在
var ret = uexFileMgr.isFileExistByPath("wgt://data/test.txt"); alert(ret); //写文件
var file = uexFileMgr.open({ path: "wgt://data/1.txt", mode: 3 }); uexFileMgr.writeFile(file, 0, "test",function(err){ alert(err); }); //读文件
var file = uexFileMgr.open({ path: "wgt://data/1.txt", mode: 3 }); uexFileMgr.readFile(file, -1,0,function(error,data){ if(!error){ alert(data); }else{ alert("读取失败!"); } }); //关闭文件
var file = uexFileMgr.open({ path: "wgt://data/1.txt", mode: 3 }); var ret = uexFileMgr.closeFile(file); alert(ret);

 

 

温馨提示：如需要微信投票、点赞、注册的朋友可以联系我，百万水军为您服务