北京华网天下

课程与会议签到系统详解：每日考勤、签到类型及提醒功能全解析

2024-12-29

来源：网络整理

用户已登录的活动

1-7、几种登录方式

前三个基本已经给大家演示过了。接下来我们来看看每天的出勤情况。这里主要以课程和会议签到为例

1-8、课程听课及签到

首先，我们来看看您可以报名参加哪些课程。

您还可以查看您已报名的课程。

您可以进入课程并查看课程登录状态

可见，我们不仅可以根据位置签到，还要求学生输入正确的考勤码。

如果学生犯错，会有提示

老师或负责考勤的管理员可以设置签到的开始或结束时间。

结束办理登机手续

这样就可以非常方便的实现日常的上课考勤、公司考勤和下班考勤、会议签到和签到。

1-9、签到提醒

当我们登录时，我们会提示用户登录结束时间

如果超过登录时间，您将无法进入登录页面。

2.管理员副作用图2-1、管理员页面

您可以看到我们的管理员可以审核用户、生成二维码和位置签到，并可以开始课程或每日考勤签到。还可以查看人员签到详情

您还可以查看学生或员工的出勤情况

2-2、cms web管理后台

我们可以在管理后台添加活动，添加小程序管理员

还可以添加课程和会议

您还可以查看出勤状态

2-3、数据库和数据表

我们将在这里使用以下数据表

2-4、百度管理后台

我们其实使用百度的管理后台主要是为了使用百度的人脸识别功能。

例如，您可以查看注册的面孔

当然，如果我们使用百度的技术，就需要开通百度开发者账号。所以你需要仔细阅读下一节的准备工作。

3.准备工作（重要）3-1、注册百度开发者账号

我们这里使用的是百度的图像识别技术，所以在使用之前，我们现在需要注册一个百度开发者账号，官方地址：

注册地址：

至于如何注册，我这里就不用教大家了。您自己注册即可。

我们主要使用人脸识别技术

3-2.注册后记得实名注册。

现在要使用百度图像识别，需要实名认证。

根据自身情况选择认证方式

如果你想学习，你只需要个人证明。

3-3.创建人脸识别应用程序

这里我们主要用到的是百度的人脸比对功能，就是提前将待识别人的照片保存到百度数据库中，然后在签到的时候，让对应的人拍照并与人脸进行比对图片存储在数据库中。这是相似的。当相似度达到一定值，如90%相似度时，即可认为识别成功，可以登录。

在此插入图片描述

估计百度正在准备后期收费，不过还是有免费资源可用的。既然可以免费获得，那就先获得免费的。即使以后收费，我们可能也不需要太多的时间来学习如何使用它。几毛钱大概就够我们学习和使用了。

人脸识别官方文档：

点击获取免费资源

既然是免费的，我当然全都得到了。

收到后，耐心等待生效即可。如果你在学习的时候不能免费得到，那么你可以花几毛钱。基本上几毛钱就够我们学习和使用了。

小程序头像是多大尺寸_微信小程序云开发头像上传_头像微信小程序源码

收到上面应该收到的所有内容后，让我们创建应用程序。

默认情况下，与面部识别相关的所有内容均已检查。

只要选择一个人就可以了。

创建好之后我们后面会用到下面两个东西，知道在哪里就行了。

3-4、小程序添加百度域名

这里我们要调用百度的人脸识别接口，所以需要给小程序配置域名。如果不配置的话，会报如下错误。

所以你需要到小程序后台把这个添加到以下位置。

单击上面的服务设置，然后进行以下设置。

一般设置10分钟左右生效。

4.接入人脸识别（重要）4-1、官方文档

当我们把人脸识别接入我们的小程序时，我们一定要阅读百度的官方技术文档。

文档地址：

我们这里主要看这个人脸对比文档。

官方文档没有给出小程序中如何调用的代码。

所以接下来的学习就应该沿着石头哥的脚步去学习。石头哥将一步步带领大家实现小程序的调用。

4-2、人脸登记

如果我们要实现人脸识别，一开始就需要将人脸注册到百度视觉人脸库中。调用的接口如下。

在调用这个之前，我们需要获取对应的，所以我们要做的第一步就是获取

4-2-1，得到

我们后面做的所有操作基本上都会得到这个。

所以我把源码贴给大家，记得替换成自己的。

wx.request({
url: 'https://aip.baidubce.com/oauth/2.0/token',
data: {
grant_type: 'client_credentials',
client_id:, //应用的API Key
client_secret: //应用的Secret Key
},
header: {
'Content-Type': 'application/json' // 默认值
},
success: res => {
this.setData({
token: res.data.access_token //获取到token
})
console.log('获取到的token', this.data.token)
}
})

复制

4-2-2、拍摄人脸照片

第二步和第三步需要同时进行，所以我将下面的代码放在第三步中

3-2-3、将人脸注册到百度人脸库

拍照后，我们获取图像并将图像转换为

对应的代码如下：

var that = this;
//拍照
const ctx = wx.createCameraContext()
ctx.takePhoto({
quality: 'high',
success: (res) => {
that.setData({
src: res.tempImagePath //获取图片
})
//图片base64编码
wx.getFileSystemManager().readFile({
filePath: that.data.src, //选择图片返回的相对路径
encoding: 'base64', //编码格式
success: res => { //成功的回调
that.setData({
base64: res.data
})
//第三步：上传人脸进行注册
wx.request({
url: 'https://aip.baidubce.com/rest/2.0/face/v3/faceset/user/add?access_token=' + that.data.token,
method: 'POST',
data: {
image: that.data.base64,
image_type: 'BASE64',
group_id: 'users', //自己建的用户组id
user_id: app.globalData.userInfo.phone, //学号
user_info: app.globalData.userInfo.name //存储学生姓名
},
header: {
'Content-Type': 'application/json' // 默认值
},
success(res) {
that.setData({
msg: res.data.error_msg
})
console.log("人脸注册返回结果", res)
//做成功判断
if (that.data.msg == 'SUCCESS') { //微信js字符串使用单引号
wx.showToast({
title: '注册成功',
icon: 'success',
duration: 2000
})
// that.registerFace()
}
}
}),
//失败尝试
wx.showToast({
title: '请重试',
icon: 'loading',
duration: 500
})
}
})
} //拍照成功结束
}) //调用相机结束

复制

请记住将这些参数替换为您自己的参数

group_id: 'users', //自己建的用户组id
user_id: app.globalData.userInfo.phone, //学号或者用户电话能唯一标识用户的
user_info: app.globalData.userInfo.name //存储用户姓名

复制

我们注册之后，就可以在百度人脸库和我们创建的表中看到这个数据。

4-3、查看人脸数据库

我们进入百度的控制台，找到以下分类

然后点击用户123，就可以看到他注册的人脸照片。

5.人脸比对及二维码生成核心代码

这里我摘录了部分代码。具体详细代码需要用米换完整代码。

当我们完成上面的人脸注册后，我们就可以使用人脸签到功能了。使用它之前的第一步是获取

5-1，得到

// acess_token获取
getTokenInfo() {
var that = this
wx.request({
url: 'https://aip.baidubce.com/oauth/2.0/token',
data: {
grant_type: 'client_credentials',
client_id: app.globalData.client_id, //应用的API Key
client_secret: app.globalData.client_secret //Secret Key
},
header: {
'Content-Type': 'application/json' // 默认值
},
success(res) {
that.setData({
token: res.data.access_token //获取到token
})
console.log(that.data.token)
}
})

},

复制

5-2、人脸对比

核心代码如下：

//拍照并编码
takePhoto() {
let that=this
const ctx = wx.createCameraContext()
ctx.takePhoto({
quality: 'high',
success: (res) => {
//图片base64编码
wx.getFileSystemManager().readFile({
filePath: res.tempImagePath, //选择图片返回的相对路径
encoding: 'base64', //编码格式
success: res => { //成功的回调
that.signInFace(res.data)
}
})
}
})
},

//上传人脸进行比对
signInFace(base64) {
var that = this

if (base64 != "") {
wx.request({
url: 'https://aip.baidubce.com/rest/2.0/face/v3/search?access_token=' + that.data.token,
method: 'POST',
data: {
image: base64,
image_type: 'BASE64',
group_id_list: 'users' //自己建的用户组id
},
header: {
'Content-Type': 'application/json' // 默认值
},
success(res) {
console.log("人脸对比返回结果", res)
if (res.data.error_msg == "match user is not found") {
wx.showModal({
title: '签到失败',
content: '请先注册人脸才可以人脸使用',
})
}

if (res.data.error_msg == "SUCCESS") {
that.setData({
msg: res.data.result.user_list[0].score,
})
// console.log(res)
if (that.data.msg > 80) { //相似度大于80
console.log('人脸识别成功')
} else {
wx.showToast({
title: '人脸识别失败',
})
}
} else {
wx.showToast({
title: '人脸识别失败',
})
}
}
});
}
if (base64 == "") {
wx.showToast({
title: '请重试',
icon: 'loading',
duration: 500
})
}
},