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);

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