APPCNA 指紋驗證登入

zhengwei_cq發表於2020-09-29
APP

今天在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);

 

 

溫馨提示：如需要微信投票、點贊、註冊的朋友可以聯絡我，百萬水軍為您服務

 

 

 

相關文章