href="https://www.cnblogs.com/ljbguanli/p/19623183"

title="发布于

aria-level="2">微信小程序学习实录15:微信小程序基于百度云人脸识别的刷脸打卡开发方案

实践

xmlns="http://www.w3.org/2000/svg">

d="M5,0

style="-webkit-tap-highlight-color:

rgba(0,

src="https://i-blog.csdnimg.cn/direct/45850576e53d4a64a7e8877620fbf8fd.png">

alt="在这里插入图片描述"

src="https://i-blog.csdnimg.cn/direct/c5e0e423f3a14cd1b4e8614080268e65.png">

微信小程序基于百度云人脸识别的刷脸打卡开发方案

id="_3">一、方案概述

你需要开发的是一套基于微信小程序+百度云人脸识别API的刷脸打卡系统，核心功能为用户通过小程序前置摄像头拍摄人脸、压缩图片后上传至后端，与百度云人脸库中的用户人脸信息比对，完成身份验证并实现打卡。

本方案将从技术架构、核心流程、代码实现、部署运维等维度完整阐述开发思路。

二、技术架构设计

id="1__7">1.

punctuation">[微信小程序端

class="token

punctuation">[后端服务（

class="token

punctuation">[百度云人脸识别

class="token

punctuation">[数据库（MySQL

class="token

constant">ID、打卡记录

2.

技术栈选型

层级	技术/工具	说明
小程序端	微信原生框架	负责前端交互、摄像头调用、图片处理
后端	PHP	封装百度云API、处理小程序请求、数据存储
人脸识别	百度云人脸识别SDK	提供人脸注册、比对、活体检测核心能力
数据库	MySQL	存储用户OpenID、人脸库ID、打卡记录
图片存储	阿里云OSS/腾讯云COS	存储用户上传的人脸图片（可选）

id="_28">三、核心功能开发流程

1.

前置准备

id="1_30">（1）百度云人脸识别服务开通

• 登录百度智能云控制台，开通“人脸识别”服务；
• 创建应用，获取API

  Token）；

• 创建人脸库（Group），用于存储企业/组织内的用户人脸信息。

（2）小程序配置

• 在微信公众平台配置小程序服务器域名（uploadFile、request域名）；
• 开启摄像头权限（小程序需在app.json中声明scope.camera权限）；
• 配置用户登录态（获取OpenID作为用户唯一标识）。

id="2__40">2.

核心功能模块开发

（1）用户人脸注册（首次使用）

• 流程：用户授权登录→拍摄人脸→上传后端→调用百度云人脸注册API→绑定OpenID与人脸库ID→存储至数据库；
• 核心接口（百度云）：/rest/2.0/face/v3/faceset/user/add。

id="2_45">（2）刷脸打卡（核心流程）

复用你提供的小程序代码逻辑，优化后核心流程：

punctuation">.chooseMedia调用前置摄像头

class="token

punctuation">[获取图片文件大小并压缩（

class="token

punctuation">[上传压缩后的图片至后端

class="token

punctuation">[后端调用百度云人脸比对

class="token

punctuation">[记录打卡时间

class="token

punctuation">[返回失败提示

class="token

punctuation">]

3.

id="1_60">（1）小程序端核心代码（基于你提供的代码优化）

pages/faceAuth/faceAuth.js

string">'../../utils/util.js'

class="token

property">compressedImageUrl

class="token

property">isLoading

class="token

property">isBtnDisabled

class="token

property">resultMsg

class="token

function">showShare

class="token

function">getUserOpenid

class="token

function">getUserOpenid

class="token

punctuation">.hostDomain

string">'api/user/getOpenid'

class="token

property">resultMsg

class="token

property">resultMsg

class="token

function">chooseImage

class="token

punctuation">.userId

class="token

function">showToast

class="token

property">isBtnDisabled

class="token

property">isLoading

class="token

property">resultMsg

class="token

function">chooseMedia

class="token

property">sourceType

class="token

punctuation">.tempFiles

class="token

punctuation">.tempFilePath

class="token

function">compressImage

class="token

punctuation">(tempFilePath

class="token

function">submitFace

class="token

property">resultMsg

class="token

string">'拍摄取消或失败，请重试'

class="token

property">isLoading

class="token

property">isBtnDisabled

class="token

function">compressImage

class="token

function">compressImage

class="token

property">compressedImageUrl

class="token

punctuation">.tempFilePath

property">compressedImageUrl

class="token

function">submitFace

class="token

punctuation">.compressedImageUrl

punctuation">.imageUrl

class="token

function">uploadFile

class="token

punctuation">.hostDomain

string">'api/face/compare'

class="token

punctuation">(result

class="token

property">resultMsg

class="token

function">showToast

class="token

function">setTimeout

class="token

function">redirectTo

class="token

string">'../faceClock/index'

property">resultMsg

class="token

punctuation">(result

class="token

function">showToast

class="token

property">resultMsg

class="token

property">isLoading

class="token

property">isBtnDisabled

class="token

punctuation">;

id="2PHP_202">（2）后端核心代码（PHP示例）

double-quoted-string">"Content-Type:

application/json;charset=utf-8"

class="token

double-quoted-string">"Access-Control-Allow-Origin:

*"

double-quoted-string">"你的百度云API

Key"

double-quoted-string">"你的百度云Secret

Key"

double-quoted-string">"你的人脸库Group

ID"

single-quoted-string">'userId'

class="token

single-quoted-string">'files'

class="token

function">getAccessToken

class="token

variable">$secretKey

class="token

double-quoted-string">"https://aip.baidubce.com/oauth/2.0/token"

class="token

single-quoted-string">'grant_type'

single-quoted-string">'client_credentials'

class="token

single-quoted-string">'client_id'

single-quoted-string">'client_secret'

function">curl_init

class="token

function">curl_setopt

class="token

constant">CURLOPT_URL

class="token

function">curl_setopt

class="token

constant">CURLOPT_POST

class="token

function">curl_setopt

class="token

constant">CURLOPT_POSTFIELDS

class="token

variable">$postData

class="token

function">curl_setopt

class="token

constant">CURLOPT_RETURNTRANSFER

class="token

function">curl_exec

class="token

function">curl_close

class="token

function">json_decode

class="token

single-quoted-string">'access_token'

class="token

single-quoted-string">''

class="token

function">faceCompare

class="token

variable">$accessToken

class="token

variable">$filePath

class="token

double-quoted-string">"https://aip.baidubce.com/rest/2.0/face/v3/search"

class="token

function">file_get_contents

class="token

variable">$filePath

class="token

function">base64_encode

class="token

single-quoted-string">'image'

variable">$imageBase64

class="token

single-quoted-string">'image_type'

single-quoted-string">'BASE64'

class="token

single-quoted-string">'group_id_list'

single-quoted-string">'user_id'

single-quoted-string">'match_threshold'

function">curl_init

class="token

function">curl_setopt

class="token

constant">CURLOPT_URL

class="token

double-quoted-string">"?access_token="

variable">$accessToken

class="token

function">curl_setopt

class="token

constant">CURLOPT_POST

class="token

function">curl_setopt

class="token

constant">CURLOPT_POSTFIELDS

class="token

function">json_encode

class="token

variable">$postData

class="token

function">curl_setopt

class="token

constant">CURLOPT_HTTPHEADER

class="token

single-quoted-string">'Content-Type:

class="token

function">curl_setopt

class="token

constant">CURLOPT_RETURNTRANSFER

class="token

function">curl_exec

class="token

function">curl_close

class="token

function">json_decode

class="token

function">getAccessToken

class="token

variable">$SECRET_KEY

class="token

variable">$accessToken

class="token

function">json_encode

class="token

single-quoted-string">'code'

single-quoted-string">'msg'

single-quoted-string">'获取百度云Token失败'

class="token

single-quoted-string">'./temp/'

single-quoted-string">'.jpg'

class="token

function">move_uploaded_file

class="token

single-quoted-string">'tmp_name'

class="token

variable">$tempPath

class="token

function">faceCompare

class="token

variable">$accessToken

class="token

variable">$tempPath

class="token

variable">$GROUP_ID

class="token

variable">$tempPath

class="token

single-quoted-string">'error_code'

class="token

function">json_encode

class="token

single-quoted-string">'code'

single-quoted-string">'msg'

single-quoted-string">'error_msg'

class="token

single-quoted-string">'result'

class="token

single-quoted-string">'user_list'

class="token

single-quoted-string">'score'

class="token

function">json_encode

class="token

single-quoted-string">'code'

single-quoted-string">'msg'

single-quoted-string">'人脸比对通过'

class="token

function">json_encode

class="token

single-quoted-string">'code'

single-quoted-string">'msg'

single-quoted-string">'人脸相似度不足（'

class="token

single-quoted-string">'%），打卡失败'

class="token

operator">>

（3）小程序WXML/

WXSS优化

复用你提供的WXML结构，重点优化：

• 增加人脸引导框（帮助用户对齐拍摄）；
• 优化按钮状态（加载中禁用、失败后解锁）；
• 补充活体检测提示（可选，提高安全性）。

id="_300">四、关键优化点

1.

图片处理优化

• 你已实现图片压缩（800*800，质量30%），可补充动态压缩策略：原图＜500KB时不压缩，＞500KB时按比例压缩；
• 上传前校验图片格式（仅允许jpg/png），避免无效上传。

id="2__305">2.

安全性优化

• 增加活体检测：调用百度云活体检测API（/rest/2.0/face/v3/faceverify），防止照片/视频作弊；
• 后端校验用户OpenID：确保请求来自合法用户，防止接口滥用；
• 接口加签：小程序端请求后端时携带签名（如timestamp+nonce+appSecret），防止接口伪造。

3.

体验优化

• 拍摄时增加人脸引导框（你提供的CSS已包含，需关联到WXML）；
• 加载状态可视化：按钮显示loading动画，提示用户等待；
• 错误提示友好化：区分“网络错误”“人脸比对失败”“权限不足”等不同错误类型。

id="_315">五、部署与运维

1.

部署步骤

1. 后端服务部署至云服务器（如阿里云ECS/腾讯云CVM），配置PHP运行环境；
2. 配置域名+HTTPS（微信小程序要求接口必须为HTTPS）；
3. 百度云API配额配置：根据打卡人数调整QPS（每秒请求数），避免接口限流；
4. 小程序代码上传至微信公众平台，提交审核（需说明摄像头、网络等权限用途）。

id="2__322">2.

运维监控

• 日志记录：记录人脸比对失败、接口调用异常等日志，便于排查问题；
• 百度云API监控：查看接口调用量、失败率，及时调整配额；
• 数据库备份：定期备份打卡记录，防止数据丢失。

六、常见问题及解决方案

问题	解决方案
人脸比对成功率低	1. 提高拍摄引导，要求用户正对摄像头；2. 支持用户重新注册人脸
图片上传失败	1. 检查小程序域名配置；2. 增加上传重试机制
百度云Token过期	后端缓存Token（有效期30天），过期自动重新获取
小程序摄像头调用失败	1. 引导用户开启摄像头权限；2. 检查小程序基础库版本，兼容低版本

id="_335">总结

1. 本方案核心是小程序端人脸采集+后端调用百度云API比对，需优先完成百度云人脸库创建、小程序域名配置等前置工作；
2. 关键优化点为图片压缩（减少传输耗时）、活体检测（提高安全性）、友好交互（提升用户体验）；
3. 部署时需注意HTTPS配置、接口权限校验，运维阶段重点监控百度云API调用状态和打卡记录数据安全。