安全键盘

• 弹出安全键盘
• 关闭安全键盘
• 响应安全键盘
• 密码校验

弹出安全键盘

功能说明

用于 Web 上的输入框调起Native的安全键盘功能进行密码等输入。

功能接口

TMFJSBridge.invoke('showSafeKeyboard', {id,inputType}, callback);

代码示例

<div>
<input id="textInput" readonly="readonly" type="text" onclick="tmf_showSafeKeyboard('textInput');"/>
<script>
function tmf_showSafeKeyboard(elementId) {
    var inputV = document.getElementById(elementId);
    TMFJSBridge.invoke('showSafeKeyboard', {
        id : elementId,                            // string 必选
        inputType: 0                                // integer 键盘类型
    }, function (res) {
        retCode        :res.retCode,            // integer
        msg                :res.msg,                    // string
    });
}
</script>
</div>

注意事项

input 需要设置 readonly="readony" 才能调起安全键盘。

关闭安全键盘

功能说明

JS 方法关闭 Native 的安全键盘。

功能接口

TMFJSBridge.invoke('closeSafeKeyboard', {}, callback);

代码示例

<div>
<script>
function tmf_showSafeKeyboard(elementId) {
    var inputV = document.getElementById(elementId);
    TMFJSBridge.invoke('closeSafeKeyboard', {
    }, function (res) {
    });
}
</script>
</div>

响应安全键盘

功能说明

Native 安全键盘的各种操作回调，JS 需要注册 Event 监听。

回调接口及示例代码

• 键盘输入

document.addEventListener("tmf_sk_inputOneChar",callback);

document.addEventListener("tmf_sk_inputOneChar",function(res){
    var tmf = res.tmf;
    var inputV = document.getElementById(tmf.id);
    inputV.value += tmf.content;
})

• 键盘退格

document.addEventListener("tmf_sk_deleteOneChar",callback);

document.addEventListener("tmf_sk_deleteOneChar",function(res){
        var tmf = res.tmf;
    var inputV = document.getElementById(tmf.id);
    var value = inputV.value;
    if (value.length > 0) {
        inputV.value = value.substring(0, value.length - 1);
    }
})

• 键盘关闭

document.addEventListener("tmf_sk_close",callback);

document.addEventListener("tmf_sk_close",function(res){
    console.log(res.tmf);
})

• 键盘点击确认

document.addEventListener("tmf_sk_complete",callback);

document.addEventListener("tmf_sk_complete",function(res){
    var tmf = res.tmf;
    var inputV = document.getElementById(tmf.id);
    if (tmf.context.length == 0 || inputV.value.length == 0){
        return;
    }
      // 加密数据的解密过程应放在服务端进行，前段不应该解密
})

• 键盘刷新

document.addEventListener("tmf_sk_relayout",callback);

document.addEventListener("tmf_sk_relayout",function(res){
    console.log(res);
      // 这里需要对所有使用安全键盘输入的输入框进行清空。因此只建议敏感信息使用安全键盘进行输入且在10分钟之内完成输入
    var inputs = [""];
    inputs.forEach((v, i) => {
        var inputV = document.getElementById(v);
        inputV.value = "";
    });
})

注意事项

• 安全键盘的解密不应放在前端进行。应将context和text发送至服务端，由服务端完成解密逻辑。

• 键盘刷新事件

  • 键盘的 context 与 Native 对象（iOS 的 webViewController,android的Activity）进行绑定，包含键位映射数据。发生改变时会进行回调。

  • 事件触发

    • 安全键盘弹出方法showSafeKeyboard中，如果type值发生改变，键盘回刷新并执行该回调。
    • 用户在当前页面停留时间超过安全键盘所设置的会话时长（10分钟）时，执行输入操作，context 会发生改变并回调该事件。

  • 当前方法回调时，因为键值映射数据已改变，需要把 H5 页面的所有使用安全键盘进行输入的输入框内容清空，让用户重新输入。

密码校验

弱密码检测

TMFJSBridge.invoke('safeKeyboardWeakCheck', {text,context,strength,repeatNum}, callback);

• callBack

• 调用示例

// 弱密码检测
function tmf_weakCheck(){
    var input4 = keyboardContext['textInput4'];
    var input5 = keyboardContext['textInput5'];
    var strength = document.getElementById('textInput6').value;
    var repeatNum = document.getElementById('textInput7').value;

    TMFJSBridge.invoke('safeKeyboardWeakCheck', {
        text:input4.text,
        context:input4.context,
        strength:strength,
        repeatNum:repeatNum,
    }, function (res){
        console.log(res);
        if (res.isPass == 1 && res.errorCode == 0){
            tmf_alert("弱密码检测通过")
        } else {
            tmf_alert("弱密码检测不通过")
        }
    });
}

二次密码一致性检测

TMFJSBridge.invoke('safeKeyboardDoubleCheck', {text1{text,context},text2{text,context},strength,repeatNum}, callback);

• callBack

• 调用示例

// 弱密码检测
function tmf_weakCheck(){
    var input4 = keyboardContext['textInput4'];
    var input5 = keyboardContext['textInput5'];
    var strength = document.getElementById('textInput6').value;
    var repeatNum = document.getElementById('textInput7').value;

    TMFJSBridge.invoke('safeKeyboardWeakCheck', {
        text:input4.text,
        context:input4.context,
        strength:strength,
        repeatNum:repeatNum,
    }, function (res){
        console.log(res);
        if (res.isPass == 0){
            if (res.errorCode == 7){
                tmf_alert("不通过，两次密码输入不一致")
            } else if (res.errorCode == 0) {
                tmf_alert("不通过，弱密码")
            } else {
                tmf_alert("不通过")
            }
        } else {
            tmf_alert("二次密码一致性检测通过")
        }
    });
}