UniApp H5 人脸识别与活体检测实现方案（含前端免费及微信 SDK 方案）

功能介绍

本文介绍在 UniApp（支持 Vue2/Vue3）H5 环境下实现人脸识别、活体检测及人脸核身的技术方案。提供两种路径：纯前端免费方案（适合轻量级验证）和微信官方 SDK 方案（适合高安全性核身，需后端配合）。

方案对比

特性	纯前端方案	微信 SDK 方案
依赖	本地开源库	微信 JSSDK
后端需求	无	需要 (Spring Boot/ThinkPHP)
安全性	中	高
适用场景	简单身份确认	金融/支付核身

完整流程及源码

1. 纯前端免费方案

适用于对安全性要求不高，希望快速集成的场景。

核心步骤：

1. 引入人脸识别库（如 face-api.js 的 uni-app 封装插件）。
2. 调用 uni.chooseImage 或 uni.scanFace 获取图像。
3. 在客户端进行特征提取与比对。

// 示例：调用摄像头并识别
const handleFaceDetect = () => {
  uni.scanFace({
    success: (res) => {
      console.log('识别结果', res);
      // 处理返回的人脸特征数据
    },
    fail: (err) => {
      console.error('识别失败', err);
    }
  });
};

2. 微信 SDK 方案

适用于微信公众号网页或微信内置浏览器，需后端参与签名验证。

核心步骤：

1. 公众号配置：在微信公众平台设置 JS 接口安全域名。
2. 前端初始化：使用 wx.config 注入权限。
3. 调用组件：使用微信提供的 或相关 API。