微信小程序接入
此文档将会介绍易盾活体检测(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 访问的域名,然后点击下载校验文件,将该文件放置在域名根目录下。