移动终端 Web版 密码控件实现方式

一、概要

      基于 JS+CSS，采用服务端控制客户端输入逻辑的 Web 版安全输入组件，采用这种机制，可大幅度提高手机、平板系统浏览器中输入密码的安全性。 

组件特点： 

1、用户输入的密码信息在客户端中不会有任何残留，可有效防止恶意程序通过接口，内存查看等方式获取用户密码； 

2、采用 RSA 加密算法对输入内容进行加密，避免恶意程序对通讯链路中的数据进行拦截分析； 

3、可自适应现有主流屏幕分辨率。 

二、实现流程

1、 页面初始化，请求服务端根据规则生成相应的html（密码控件）并返回给前端

2、 用户使用返回的html（密码控件），输入相应的密码

3、 前端将输入的密码通过js RSA算法加密并提交到服务端

4、 服务端根据规则解密后并进行业务逻辑的后续处理

三、实现细节

1、 密码键盘分为数字键盘、字母键盘(含大小写)和全键盘

2、 如果是数字键盘：生成随机安全随机数 0 ~ 9,根据 SecureRandom.nextInt()方法

3、 如果是字母键盘：生成随机26个英文字母，根据chars(97 + i)

4、 如果是全键盘：则是2 、3点的组合

5、 创建一个NumberPasswordImageMaker类，用于将数字按照设定的规则转换成图片 ImageInfo 类

6、 创建一个AlphabetPasswordImageMaker类，用于将字母(含大小写)按照设定的规则转换成图片 ImageInfo 类

7、 创建一个HTMLMaker类，用于将生成的图片转换成DIV

8、 将DIV中对应的KeyIdnex保存在HttpSession中，用于后续比较

9、 将生成的DIV通过约定的方式返回给前端