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

后续在补上后端配置

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

uniapp，vue中h5项目实现数字密码键盘
本来原生的h5 直接input type="password" 这样会发现也不是说不能输入数字. 只是让用户多了一步操作的切换到数字的情况才能输入. 不知道安卓手机如何反正苹 ...
vue 微信公众号支付接口_基于vue的h5项目之支付宝支付与微信支付
本文仅记录基于vue开发h5项目过程中使用支付宝和微信支付过程中的重点与槽点,仅为前端部分,如有疏漏不正之处,请于文末评论探讨.注意:标红部分灰常重要,仔细阅读官方文档非常重要,耐心非常重要,细心非常 ...
vue支付宝html,Vue的H5页面唤起支付宝支付功能
目前项目中比较常用的第三方支付无非就是支付宝支付和微信支付.下面介绍一下Vue中H5页面如何使用支付宝支付.其实很简单的,只不过是调自己后台的一个接口而已(后台根据支付宝文档,写好支付接口). 触发支 ...
Vue的H5页面唤起支付宝支付
目前项目中比较常用的第三方支付无非就是支付宝支付和微信支付.下面介绍一下Vue中H5页面如何使用支付宝支付.其实很简单的,只不过是调自己后台的一个接口而已(后台根据支付宝文档,写好支付接口). 触发支 ...
element手机验证格式_基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)...
前言开发过程中遇到了一个需求,根据用户选择的联系方式,动态改变输入框的检验条件,并且整个表单是可以增加的在线访问:动态表单校验 github(欢迎star): https://github.com ...
支付宝手机h5网页支付不再提供「继续浏览器付款」按钮了吗
来自圈友的疑惑,记录一下之前写过一篇「支付宝手机h5支付的文章」,如果下载运行过Demo的小伙伴肯定发现了一个问题 > 「Demo中有显示继续浏览器付款按钮,但自己实际环境并没有」难道是操作 ...
手机H5支付和扫码支付的区别是什么？
H5支付就是网页发起的微信.支付宝唤醒,通过微信自带的微信浏览器内jssdk发起的微信支付.支付宝也可以拉起手机浏览器唤醒支付宝发起支付宝支付. 扫码支付即通过手机app进行扫码付款,最常用的软件如微 ...
手机H5网站支付宝、微信支付遇到的问题和注意事项
一.支付宝 1:商家收款额度为0.需要使用主账号登录商家中心补全信息,不能使用员工账号登录,否则"产品中心"一直提示"网络系统繁忙". 2:网站必须通过ICP备 ...
html5 前端动态加载后端,Vue+Element的动态表单，动态表格（后端发送配置，前端动态生成）...
vue+element的动态表单,动态表格(后端发送配置,前端动态生成) 动态表单生成 elementui官网引导关键配置 template中,form和form-item的写法和绑定 data里的 ...
微信H5调用支付宝支付详细（一）！！！
微信公众号H5页面使用支付包手机网站支付!!! 这两天根据公司的需求写了一个从微信公众号的H5(公众号中的网站)页面跳转支付宝支付,大家应该都知道微信和支付宝这两家谁也不让这谁.想在微信中用支付宝那 ...

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

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

最新文章

热门文章