用Chrome,Edge,360等浏览器如何调用底层硬件模块?

通常情况下,各种标准浏览器无法调用底层硬件外设模块,如指纹仪,身份证读卡器等;需要软件厂商开发Chrome扩展,或者相关插件,这种开发工作门槛较高,维护这样一个开发团队成本也高,不划算。力麒集团的“政务浏览器”产品提供了一个简洁易用的方案。政务浏览器启动后,可以以“中间件”模式运行;该模式下浏览器在后台运行,将硬件模块的接口暴露成Http调用,也可以将模块调用以悬浮的工具栏呈现。具体设置及调用方法如下。

1、设置政务浏览器的运行模式为“中间件模式”
如下图,打开菜单“常用设置”,将运行模式设置为“中间件模式”,设置后,浏览器重启生效。

中间件模式的浏览器启动后,最小化到系统托盘,可以打开设置界面进行设置。可以将各类插件工作以悬浮工具栏的模式呈现,如下图。

2、开启接口http服务,设置白名单
从右上角系统菜单,打开“管控中心”,确保http server已开启;确保应用的地址已经加入到白名单。如下图。

3、在webapp中引入政务浏览器的jssdk,并初始化
web应用调用政务浏览器封装的外设模块,只要引入jssdk即可;该Js SDK有如下优点。

1)、随着浏览器的升级jssdk不用升级;
2)、不管是页面在Chrome运行,然后通过http协议调用外设,还是页面在“政务浏览器”里运行调用外设,接口完全一样,web应用不用做任何修改。

< script src="/resources/zwexplorer-jssdk.js">< /script>
                                    
< script>
     //如果在政务浏览器内打开应用系统,不必设置host和port。
    let data = {
        host: 'localhost',
        port: 56289 //如果政务浏览器的Api Http Server的端口改变了,要设置该port
    }
    zwexplorer.__init(data, (res) => {
        if (res.resultCode != 0) {
            alert(res.resultMessage);
        }
    })
< /script>
                                

3、在webapp中读取身份证
以身份证读取为例,政务浏览器是以插件形式增加各功能,所以要调用该功能,先通过浏览器的“扩展插件”管理界面安装该插件,如下图。Windows下所有插件免费,信创环境下每个政务工具插件License99元

每个插件有自己固定的appName,身份证插件的appName是“IDCardReader”。调用身份证读卡器的代码如下。

function readIdCard() {

  let requestBody = {
    timeout: 30 //表示30秒超时
  }
  zwexplorer.IDCardReader.readIdCardCyclically(requestBody, (resp) => {
    if (resp.resultCode == 0) {
      $("#idcardResult").val(JSON.stringify(resp.data));
    } else {
      $("#idcardResult").val(resp.resultMessage);
    }
        
  })
}

更多调用说明见“身份证插件调用demo”

4、注意事项
通过http调用外设,涉及到“跨域”问题。Chrome浏览器和Edge浏览器均对跨域请求有严格限制,要求业务系统采用ssl协议(即https)才允许调用发布在localhost:52689的API 。 如果应用无法没有安装ssl证书,请用“政务浏览器”访问应用,不要采用第三方浏览器。

更多demo 见“政务浏览器Demo V1.0"