微信小程序接入

2024.11.20 10:20:47

    此文档将会介绍易盾活体检测(NELiveDetection)SDK 如何集成到微信小程序。

    1. 下载开发工具

    微信小程序的开发需要使用『微信开发者工具』,下载地址为:

    https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html

    请根据开发电脑的系统进行下载。

    2. 登录

    安装完成后打开『微信开发者工具』,扫描⼆维码进⾏登录:

    3. 创建微信小程序

    点击 + 后开始创建小程序,AppID 可以先使用测试号的,也可以在 开发者后台 - 开发管理 - 开发设置 找到自己账号下的 AppID。

    4. 创建集成 web-view 组件的页面

    双击打开我们新建的 live-detect-demo 后,在 pages/ 文件夹下新建文件夹 live-detect,再右键该目录选择『新建 Page』,名称与目录相同。

    live-detect.wxml 下写入以下代码:

    <view class="container">
      <web-view src="https://your-live-detect-h5"></web-view>
    </view>
    

    web-view 组件的 src 引入的是我们已经部署好的一个静态页面地址,该页面就是我们常规接入活体检测(NELiveDetection)SDK的页面。

    作为测试,您可以先使用这个测试地址 https://yidunfe.nos-jd.163yun.com/statics-platform/wx-live-detect-demo/0.1.0/index.html 替换上述的地址。

    你可以下载上述测试地址所对应的 SDK 接入 demo,包括了 SDK 的常规接入配置以及和微信小程序通信的代码逻辑,可做参考: livedetect-h5小程序接入demo:http://nisptools.nos.netease.com/4432b993ef79494db41fa839f59739d5.zip

    5. 不检验 web-view 的业务域名

    为了快速看到接入效果,暂时不需要配置业务域名,点击右上角详情按钮将本地设置中的 不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书 勾选上。

    6. 跳转至检测页面

    现在我们有了一个嵌套了 web-view 的页面,接着需要一个跳转到该页面的按钮,简单地在 index.wxml 即主页写一个按钮:

    <view class="usermotto">
      <button bindtap="startDetect">开始检测</button>
    </view>
    

    绑定了 startDetect 点击事件,接着在 index.js 中添加以下事件代码:

    startDetect() {
      wx.navigateTo({
        url: '../live-detect/live-detect'
      })
    }
    

    点击开始检测 按钮即可跳转到 web-view 页面了,也就是我们写的活体检测 h5。

    如果要在手机上预览,可点击上方的 预览 按钮,可通过二维码或自动预览的方式,另外,手机端打开后,要打开 开发模式,重新进入小程序,不然会提示无法预览 web-view 内容。

    7. 获取 token 进行二次校验

    在活体检测 h5 页面中,用户按照提示进行活体检测后会返回一个 token,用于和服务端进行二次校验,所以在小程序中我们需要拿到这个值。

    在 h5 中通过微信开放的 JSSDK 能力,使用了以下 API 将 token 跳转到小程序特定的页面 verify/verify

    // 跳转至微信小程序二次检验页面
    window.wx.miniProgram.redirectTo({ url: `/pages/verify/verify?from=h5&event=${eventName}&data=${data}` })
    

    在小程序的 pages 文件夹下新建 verify 文件夹,并右键新建 verify

    打开 verify.js 找到生命周期函数 onLoad,写入以下代码:

    onLoad(options) {
      const { from, event, data } = options
      if (from === 'h5' && event === 'verify') {
        this.setData({
          token: data
        })
        // TODO 这里拿到 data 即是 h5 传递过来的 token,现在可以与服务端通信进行二次检验了
        // ajax('/api/verify', params)
      }
    }
    

    同理还有一个人脸检测失败,还需要一个失败页面,新建的方法和上面一致,测试用的 h5 跳转小程序特定页面为:

    // 跳转至微信小程校验未通过页面
    window.wx.miniProgram.redirectTo({ url: `/pages/unpass/unpass?from=h5&event=${eventName}` })
    

    这两个页面的逻辑完全由你自己决定。

    8. 配置业务域名

    上面的步骤用于本地开发时快速测试,所以我们暂时勾选了 不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书,如果现在要上线的话,我们还需要做以下工作:

    1. 部署你的活体检测 h5 项目,url 的协议必须为 https。

    我们自己开发了接入了活体检测 SDK 的页面,部署上线后的 url 替换 web-view 中的 src 的值,比如上述测试地址 https://yidunfe.nos-jd.163yun.com/statics-platform/wx-live-detect-demo/0.1.0/index.html

    2. 配置 web-view 组件⽀持的业务域名

    与找到 AppID 的地方一样,开发者后台 - 开发管理 - 开发设置,滚动到页面下方能找到 业务域名,点击 修改:

    这里替换成你的 h5 访问的域名,然后点击下载校验文件,将该文件放置在域名根目录下。

    资源

    1. livedetect-h5小程序接入demo.zip 2. 微信小程序 pages 示例代码.zip

    在线咨询 电话咨询:95163223 免费试用