APPCNA 指紋驗證登陸

今天在APP中集成了指紋與手勢登陸功能，本文章分兩部分進行記錄。一是手勢功能的邏輯。二是代碼實現。該APP是採用APPCAN開發，直接用其已寫好的插件，調用至關接口就要能夠了。

 

一、在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)); }

二、手勢設置成功後咱們若是退出，在登陸界面會多一個手勢登陸功能

 

 

 點擊後會對以前設置好了的手勢進行驗證，頁面代碼以下：

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

onclick方法也是很是簡單，只要調用插件uexGestureUnlock的接口就ok。

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

三、上面插件的方法在執行行咱們都要對插件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(); }

四、在驗證手勢成功後會調用自定義的方法 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); } }); }

五、接下來的問題就來了，咱們如何將信息寫入到文件中及讀取呢，請看我下面提供的一組有用的插件接口

//建立文件
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);

 

 

舒適提示：如須要微信投票、點贊、註冊的朋友能夠聯繫我，百萬水軍爲您服務