vue 手機h5動態銀行支付密碼鍵盤前端
最近的專案都是做跟金融有關的，類似於理財 貸款 錢包等等吧！由於來之前的老專案都是用的是原生鍵盤，有很多侷限性，因為專案需要在微信公眾號或者手機瀏覽器上，這些地方肯定不能用原生鍵盤，然後搞了花了點時間一個h5鍵盤，中途碰到了一些問題
1.採用什麼加密方式，和後端協商了用RAS配合md5
2.後端怎麼給前端傳遞鍵盤值，然後傳遞什麼樣的加密結構資料給後端
3.服務端部署服務單點還是叢集，密碼的失效時間
討論過後後端決定用採用圖片庫以動態的雪碧圖方式把動態鍵盤資料給前端和圖片金鑰，並且把對應公鑰傳過來，前端通過介面獲取到動態雪碧圖通過js動態計算鋪到鍵盤上，然後點選相應的鍵盤區域儲存對應值最終整合成一個物件，通過RSA加密後傳遞給後臺，生成最終的md5密碼值給我，然後做其他介面互動操作,後續風控覺得還是不夠安全，再次優化
前端在做了一次資料處理
前端之前是傳遞時對應鍵盤的數字，然後通過RAS加密傳遞給後臺解密，修改成動態生成6個隨機的offset
然後一個一個賦值到對應的鍵盤上，一個座標代表一個數字，每次輸入值點選對應鍵盤就儲存對應的座標
RAS前的資料結構（為啥有dataType這些值能，是因為考慮後續也可能出現字母鍵盤特殊字元等等，加了一些拓展欄位）
RAS的加密結構資料是隨機的偏移量和對應的點選的偏移量值
RAS的那個加密串就不發了太長了。。。
後端加密加強圖片池加了圖片金鑰，一起通過圖片傳送過來pictureKey，而且密碼雪碧圖是有時間限制，介面呼叫報錯限制，兩種情況都是密碼圖片失效，需要再次獲取新的
期間還碰到前端的一些問題比如說用什麼輸入框，當時發懵用input發現手機原生鍵盤會彈出來，折騰了一會發現行不通，就寫了個div css的模擬鍵盤，還有一些圖片鋪上去的相容啊定位什麼 ，最坑的是後面還加了一個新需求要可以重置密碼需要輸兩次等等吧！踩了不少的坑，還少不了後端的配合。。。附上最終前端鍵盤程式碼，喜歡的點個贊,新手
https://github.com/wxl035446/vue-h5-keyBoard.git
後續在補上後端配置