本文介绍如何通过微信小程序的 `web-view` 组件嵌入已集成[H5 JS SDK](https://support.dun.163.com/documents/391676076156063744?docId=675533343461699584)的活体检测页面。该方式不是微信原生 SDK 接入。

## 1. 下载开发工具

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

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

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

## 2. 登录

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

<div align=center>
  <img src="https://yidunfe.nos-jd.163yun.com/qr1669193060758.png" />
</div>

## 3. 创建微信小程序

点击 `+` 后开始创建小程序，AppID 可以先使用测试号的，也可以在 [开发者后台](https://mp.weixin.qq.com/) - 开发管理 - 开发设置 找到自己账号下的 AppID。

<div align=center>
  <img src="https://yidunfe.nos-jd.163yun.com/new-project1669194743034.png" />
</div>

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

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

<div align=center>
  <img src="https://yidunfe.nos-jd.163yun.com/directory1669195663246.png" />
</div>

在 `live-detect.wxml` 下写入以下代码：

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

`web-view` 组件的 `src` 引入的是我们已经部署好的一个静态页面地址，该页面就是我们常规接入[活体检测（NELiveDetection）SDK](https://support.dun.163.com/documents/391676076156063744?docId=675533343461699584)的页面。

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

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

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

**注意：该设置仅用于本地开发和调试。生产环境必须配置合法的 HTTPS 业务域名，不要关闭域名、TLS 版本及 HTTPS 证书校验。**

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

<div align=center>
  <img src="https://yidunfe.nos-jd.163yun.com/uncheck1669196884612.png" />
</div>

## 6. 跳转至检测页面

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

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

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

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

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

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

<div align=center>
  <img src="https://yidunfe.nos-jd.163yun.com/devmode1669260330939.png" width=320/>
</div>

## 7. 获取 token 进行二次校验

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

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

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

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

<div align=center>
  <img src="https://yidunfe.nos-jd.163yun.com/verify1669271798021.png" />
</div>


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

```javascript
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 跳转小程序特定页面为：

```javascript
// 跳转至微信小程校验未通过页面
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 的地方一样，[开发者后台](https://mp.weixin.qq.com/) - 开发管理 - 开发设置，滚动到页面下方能找到 业务域名，点击 修改：

<div align=center>
  <img src="https://yidunfe.nos-jd.163yun.com/url1669274899576.png" width=600/>
</div>

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

## 资源

[1. livedetect-h5 小程序接入 Demo](https://nisptools.nos.netease.com/4432b993ef79494db41fa839f59739d5.zip)
[2. 微信小程序 pages 示例代码](https://nisptools.nos.netease.com/a08e74018b1042a2a42ff3c17e89fc5d.zip)