功能介绍
本文介绍在 UniApp(支持 Vue2/Vue3)H5 环境下实现人脸识别、活体检测及人脸核身的技术方案。提供两种路径:纯前端免费方案(适合轻量级验证)和微信官方 SDK 方案(适合高安全性核身,需后端配合)。
方案对比
| 特性 | 纯前端方案 | 微信 SDK 方案 |
|---|---|---|
| 依赖 | 本地开源库 | 微信 JSSDK |
| 后端需求 | 无 | 需要 (Spring Boot/ThinkPHP) |
| 安全性 | 中 | 高 |
| 适用场景 | 简单身份确认 | 金融/支付核身 |
完整流程及源码
1. 纯前端免费方案
适用于对安全性要求不高,希望快速集成的场景。
核心步骤:
- 引入人脸识别库(如 face-api.js 的 uni-app 封装插件)。
- 调用
uni.chooseImage或uni.scanFace获取图像。 - 在客户端进行特征提取与比对。
// 示例:调用摄像头并识别
const handleFaceDetect = () => {
uni.scanFace({
success: (res) => {
console.log('识别结果', res);
// 处理返回的人脸特征数据
},
fail: (err) => {
console.error('识别失败', err);
}
});
};
2. 微信 SDK 方案
适用于微信公众号网页或微信内置浏览器,需后端参与签名验证。
核心步骤:
- 公众号配置:在微信公众平台设置 JS 接口安全域名。
- 前端初始化:使用
wx.config注入权限。 - 调用组件:使用微信提供的 或相关 API。


