“指紋登錄“ -- 項目中用到的兩個cordova插件基本使用


1. 概要:   

       最近項目中需要實現指紋登錄,用到了兩個cordova插件

    cordova-plugin-android-fingerprint-auth

    cordova-plugin-touch-id

       簡單記錄一下它們的基本使用過程;

 

2. 實現流程:

  • 初始化 -- 獲取手機指紋識別支持情況(傳感器支持,API支持,用戶設置支持等)
  • 用戶憑證登錄(通常是用戶名+密碼)成功,調取系統指紋驗證,驗證通過,本地存儲用戶憑證;
  • 登錄畫面調用系統指紋驗證,驗證通過,使用本地存儲的用戶憑證執行登錄。

       對手機指紋驗證的個人理解是:指紋認證通過的用戶,對手機而言是可信用戶;而對我們的系統而言,擁有合法有效憑證的人才是可信用戶。第2步中,在用戶使用憑證登錄成功后,調取指紋驗證,意在讓用戶“授權”我們的程序,能夠在指紋驗證通過的情況下使用其憑證,在用戶授權程序后,程序才可以把用戶憑證記錄下來,以用於之后的登錄過程。這兩個可信用戶聯系起來,就相當於手機的可信用戶就是我們系統的可信用戶,在用戶通過指紋驗證后,就可以成功登錄系統。

 

3. 插件使用

1) cordova-plugin-android-fingerprint-auth
 

       文檔地址:https://www.npmjs.com/package/cordova-plugin-android-fingerprint-auth

       這個插件將打開一個本地對話框,提示用戶使用指紋進行身份驗證。如果設備有安全鎖屏(模式、PIN或密碼),用戶可以縮退選擇使用其他方法,進行身份驗證。

 

       注意:此插件僅適用於制造商已實現Android 6.0指紋認證API的設備。這個插件不支持Samsung Pass SDK,也不是所有的三星設備都實現Android 6.0指紋認證API。

    

// 插件安裝
cordova plugin add cordova-plugin-android-fingerprint-auth

 

       插件安裝后,會自動在 window 上綁定 FingerprintAuth 屬性,使用它訪問插件                       

// 使用插件
Call isAvailable() to check the fingerprint status.
 
Call encrypt() or decrypt() show the Authentication Dialog.
 
Call delete() when you want to delete the cipher for the user.

 

       另外,值得一提的是,該插件在指紋驗證過程中提供了憑證加密解密的功能;

       即在保存憑證的指紋驗證過程中將用戶憑證作為參數傳給它,success 回調時會得到 password 加密后的 token;

       在執行指紋驗證登錄的過程中將該token傳給它,在 success 回調時會得到解密后的 password;

       相當於插件給本地存儲的憑證加了個簽名。                

                

// 檢查指紋驗證可用性
FingerprintAuth.isAvailable(isAvailableSuccessCallback, isAvailableErrorCallback);

// 檢查指紋驗證可用性的成功回調
function isAvailableSuccessCallback(result) {
    // result = {
    // isAvailable:boolean, // Fingerprint Authentication Dialog is available for use.
    // isHardwareDetected:boolean, // Device has hardware fingerprint sensor.
    // hasEnrolledFingerprints:boolean // Device has any fingerprints enrolled.
    // }
}

// 指紋驗證;如果需要加解密憑證,需要傳入clientId,usename,password
// 驗證成功的回調中可以獲得加密過的token
FingerprintAuth.encrypt(encryptConfig, encryptSuccessCallback, encryptErrorCallback);
// encryptConfig 參數是一個參數對象
var encryptConfig = {

    clientId         : undefined, // 在使用憑證加解密時是必須的,用於訪問使用android key store,並且是加密的鹽;
    usename          : undefined, // 在使用憑證加解密時是必須的,加密的鹽;
    password         : undefined,// 加密時需要,解密時不需要
    token            : undefined, // 加密時不需要,解密時是必須的,
    disableBackup    : false, // 是否允許用戶使用縮退方案,即當指紋驗證有問題時是否提供用戶密碼等方式驗證的按鈕;
    maxAttempts      : '5', // 最大重試次數,默認為5次,可以比5小
    locale           : "en_US", // 對話框的語言,默認是英文en_US
    userAuthRequired : "false",
    encryptNoAuth    : "false",
    dialogTitle      : 'title', // 對話框標題
    dialogMessage    : 'message', // 對話框的提示文字
    dialogHint       : 'hintIconMsg' // 對話框的指紋圖標顯示的文字
};

// 驗證成功的回調
function encryptSuccessCallback(result) {
    // result = {
    // withFingerprint:boolean, // 使用指紋驗證的.
    // withBackup:boolean, // 使用縮退方案驗證的.
    // token:boolean // 驗證成功獲得的token.
    // }
}

// 指紋驗證,解密時,token參數是必須的
// 如果不需要解密憑證,請使用encrypt(不傳入相應option值)
// 驗證成功的回調中可以獲得解密得到的憑證信息
FingerprintAuth.decrypt(decryptConfig, encryptSuccessCallback, encryptErrorCallback);
function encryptSuccessCallback(result) {

    // result = {
    // withFingerprint:boolean, // 使用指紋驗證的.
    // withBackup:boolean, // 使用縮退方案驗證的.
    // password:boolean // 驗證成功,解密得到password
    // }
}

FingerprintAuth.delete(config, successCallback, errorCallback);
FingerprintAuth.dismiss(successCallback, errorCallback);
FingerprintAuth.ERRORS = {
    Key : value
}

 

2)cordova-plugin-touch-id
                

       文檔地址:https://github.com/EddyVerbruggen/cordova-plugin-touch-id

// 安裝后,在使用 window.plugins.touchid 訪問插件
cordova plugin add cordova-plugin-touch-id
                

 

       注意:         

       ios插件提供了指紋驗證的功能,不提供上邊android插件里加解密憑證的能力;

       插件支持iphoneX(有人臉,沒指紋);

       isAvailable函數的successCallback中可以獲得檢測到驗證類型:iphoneX得到是‘face’, 其他是‘touch’,可以在初始化時執行該函數,檢證使用的什么驗證,進而給用戶顯示合適的文字等;

       

// 初始化
window.plugins.touchid.isAvailable(
    function (type) {
        alert(type); // 成功回調: 'face'(iPhone X), 'touch'(others) 
    },
    function (msg) {
        alert('not available, message: ' + msg); // 錯誤回調
    }
);

// 指紋(人臉)驗證,指紋驗證識別可以提供縮退策略的按鈕,使用passcode(解鎖密碼)驗證
window.plugins.touchid.verifyFingerprint(
    'Scan your fingerprint please', 
    function (msg) {
        alert('ok: ' + msg); //成功回調
    }, 
    function (msg) {
        alert('not ok: ' + JSON.stringify(msg));  
    }
);

// 指紋驗證失敗是,對話框中提供用戶使用“password”進行登錄的按鈕,用戶點擊后會在errorCallback中收到error code 為-2,我們可以利用該信息彈出我們自己的密碼輸入框;

window.plugins.touchid.verifyFingerprintWithCustomPasswordFallback(
    'Scan your fingerprint please', // 提示指紋驗證 
    function (msg) {
        alert('ok: ' + msg);
    },
    function (msg) {
        alert('not ok: ' + JSON.stringify(msg));
    }
);

// 功能類似上邊的方法,多了一個case: “password”的按鈕文字我們可以定制
window.plugins.touchid.verifyFingerprintWithCustomPasswordFallbackAndEnterPasswordLabel(
    'Scan your fingerprint please', // 提示指紋驗證 
    'Enter PIN', // 自定義輸入密碼的按鈕文字 
    function (msg) {
        alert('ok: ' + msg);
    },
    function (msg) {
        alert('not ok: ' + JSON.stringify(msg));
    }
);

 

 
------------------------  補充:20200426

最近用到了插件  cordova-plugin-fingerprint-aiohttps://www.npmjs.com/package/cordova-plugin-fingerprint-aio

這個插件參考了上邊兩個插件,把android和ios統一了,盡可能的抹平了之前兩個插件處理邏輯上的差異點,並且在github上相對活躍的多,建議使用這個;

注意:這個插件目前最新3.0.1版本,對應cordova-android版本要求8.0.0以上

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM