功能介绍
本文介绍在 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注入权限。 - 调用组件：使用微信提供的
wx.scanFace或相关 API。 - 后端校验：接收前端上传的 token 或特征值，结合业务逻辑完成核身。
// 示例：微信环境初始化
wx.config({
debug: false,
appId: 'your_appid',
timestamp: timestamp,
nonceStr: nonceStr,
signature: signature,
jsApiList: ['scanFace']
});
wx.ready(() => {
wx.scanFace({
success: function(res){
// 回调处理
}
});
});
3. 后端集成说明
若选择微信方案，后端需处理以下逻辑：
- 生成微信签名所需的参数。
- 验证前端返回的人脸核身凭证。
- 记录操作日志以确保合规。
注意事项：
- 确保用户授权摄像头权限。
- 注意隐私合规，仅收集必要信息。
- 微信方案需申请对应资质。
- 代码中的 AppID 和密钥请替换为实际申请的值。
