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-aio(https://www.npmjs.com/package/cordova-plugin-fingerprint-aio)
這個插件參考了上邊兩個插件,把android和ios統一了,盡可能的抹平了之前兩個插件處理邏輯上的差異點,並且在github上相對活躍的多,建議使用這個;
注意:這個插件目前最新3.0.1版本,對應cordova-android版本要求8.0.0以上