vue 手机h5动态银行支付密码键盘前端

最近的项目都是做跟金融有关的,类似于理财 贷款 钱包等等吧!由于来之前的老项目都是用的是原生键盘,有很多局限性,因为项目需要在微信公众号或者手机浏览器上,这些地方肯定不能用原生键盘,然后搞了花了点时间一个h5键盘,中途碰到了一些问题

1.采用什么加密方式,和后端协商了用RAS配合md5
2.后端怎么给前端传递键盘值,然后传递什么样的加密结构数据给后端
3.服务端部署服务单点还是集群,密码的失效时间
讨论过后后端决定用采用图片库以动态的雪碧图方式把动态键盘数据给前端和图片密钥,并且把对应公钥传过来,前端通过接口获取到动态雪碧图通过js动态计算铺到键盘上,然后点击相应的键盘区域保存对应值最终整合成一个对象,通过RSA加密后传递给后台,生成最终的md5密码值给我,然后做其他接口交互操作,后续风控觉得还是不够安全,再次优化
前端在做了一次数据处理

前端之前是传递时对应键盘的数字,然后通过RAS加密传递给后台解密,修改成动态生成6个随机的offset
vue 手机h5动态银行支付密码键盘前端_第1张图片

然后一个一个赋值到对应的键盘上,一个坐标代表一个数字,每次输入值点击对应键盘就存储对应的坐标
RAS前的数据结构(为啥有dataType这些值能,是因为考虑后续也可能出现字母键盘特殊字符等等,加了一些拓展字段

RAS的加密结构数据是随机的偏移量和对应的点击的偏移量值

RAS的那个加密串就不发了太长了。。。

后端加密加强图片池加了图片密钥,一起通过图片发送过来pictureKey,而且密码雪碧图是有时间限制,接口调用报错限制,两种情况都是密码图片失效,需要再次获取新的

期间还碰到前端的一些问题比如说用什么输入框,当时发懵用input发现手机原生键盘会弹出来,折腾了一会发现行不通,就写了个div css的模拟键盘,还有一些图片铺上去的兼容啊定位什么 ,最坑的是后面还加了一个新需求要可以重置密码需要输两次等等吧!踩了不少的坑,还少不了后端的配合。。。附上最终前端键盘代码,喜欢的点个赞,新手
https://github.com/wxl035446/vue-h5-keyBoard.git

后续在补上后端配置

 

你可能感兴趣的:(vue)