使用流程-安全键盘_微信小程序

从基础库 2.18.0 开始支持

很多小程序业务需要输入一些敏感信息，比如密码口令，身份证，手机号等。不专业的做法是使用明文提交到业务后台，在网络传输中非常容易泄漏出去，同时也不满足合规要求。也有一些改进的做法，利用javascript对敏感信息进行加密，比如把明文的密码口令加密成为密文后再提交到业务后台。但因为小程序本质是基于H5技术，安全性不高，比如在H5上使用javascript比较容易能看到加密逻辑，或者加密强度不够，第三方输入法监听，内存遍历等，还是会造成口令泄露等问题。

为提高微信开放平台生态安全性，针对小程序内数字密码输入场景中可能存在的安全问题，微信侧在input组件开放了安全键盘类型。通过引入安全键盘，小程序可以在用户输入过程中对关键信息时进行加密，防止键盘窃听，内存保护，有效保障用户数据资产的安全。

# 1 生成证书签署请求

开发者可自行生成公钥私钥、证书签署请求，也可通过微信侧提供的工具生成证书签署请求。通过微信侧提供的工具（Windows / Mac）生成证书签署请求的步骤如下：

1. 通过SM2 Generate Key Pair功能生成公钥私钥

2. 通过SM Generate Cert CSR功能生成CSR

# 2 生成证书

在小程序管理后台「开发」-「开发管理」-「开发设置」-「安全键盘证书」板块填入CSR进行生成。

# 3 使用证书

1. 将生成的证书放入小程序代码包中。
2. 在input组件中设置type=“safe-password”，并设置相关参数（safe-password-cert-path、safe-password-time-stamp、safe-password-length、safe-password-nonce、safe-password-salt、safe-password-custom-hash）。

# 代码示例

<input 
  style="border: 1px solid blue;"
  type="safe-password"
  placeholder="123456"
  safe-password-cert-path="/minipro_test_cert.crt" 
  safe-password-time-stamp="1618390369" 
  safe-password-nonce="1618390369" 
  safe-password-salt="zefengwang" 
  safe-password-custom-hash="md5(sha1('foo' + sha256(sm3(password + 'bar'))))"
  bind:blur="onBlur"
  bind:input="onInput"
  value="{{value}}"
></input>
<button bind:tap="onClear">clear</button>

<view>{{detail}}</view>

Page({
  data: {
    value: '123'
  },
  onInput(res) {
    console.log('onInput', res)
    this.setData({
      value: res.detail.value,
    })
  },
  onClear() {
    this.setData({
      value: '',
    })
  },
  onConfirm() {
    console.log('confirm')
  },
  onBlur(res) {
    console.log('onBlur', res)
    this.setData({
      detail: JSON.stringify(res.detail, null, 2)
    })
  },
})