⼩程序实现⼈脸识别登陆的⽰例代码
前⾔
这是⼀篇关于⼀个原创⼩程序开发过程的原创⽂章。涉及到的核⼼技术是⼩程序开发⽅法和百度云⼈脸识别接⼝。⼩程序的主体是⼀个⽤于个⼈密码存储的密码管理器，在登陆注册阶段，需要调⽤百度云⼈脸识别接⼝以及百度云在线⼈脸库的管理接⼝。本⽂主要涉及登陆注册模块的实现，⽽且不需要PHP后台代码，完全在线调⽤接⼝实现，希望后来的你能有所收获！
步骤
步骤涉及接⼝（百度云）
拍摄或者相册选择并上传⽐对样本照⽚到⼈脸库⼈脸库管理接⼝（main:⼈脸注册）
拍摄照⽚并上传，云服务器在线⽐对⼈脸库照⽚与上传图⽚的相似度⼈脸识别接⼝
获取返回结果（相似度）⼈脸识别接⼝
开发过程
1.拍摄⼈脸图⽚上传⾄⼈脸库---注册
准备⼯作：需要在百度云注册（或者直接⽤百度云盘app扫码登陆），并创建⼈脸识别的应⽤。（完全免费）
具体如下：
注册完成后（或者直接扫码登陆），进⼊管理控制台->产品服务->⼈⼯智能->⼈脸识别->创建应⽤->填写必要信息->⽴即创建
⾄此，我们已经创建好了⼈脸识别的应⽤。接下来，进⼊应⽤列表，到我们才新建的应⽤，查看⼈脸库，我们需要创建⽤户组（⽤来集中管理⼩程序的⽤户⼈脸照⽚）
新建组（id不要太复杂，后⾯还要⽤的。）
需要在pages中新建⼀个⽬录，⽤来承载我们的登陆注册模块。就假定为 camera{camera.js camera.wxml camera.wxss camera.json}
主要⽂件⾃然是 *.wxml 和 *.js 了。
camera.wxml
<!-- camera.wxml相机⼤⼩需要从重新设置 -->
<camera
device-position="front"
flash="off"
binderror="error"
></camera>
<!-- 需要使⽤ button 来授权登录 -->
<button
wx:if="{{canIUse}}"
open-type="getUserInfo"
bindgetuserinfo="bindGetUserInfo"
type="primary"
>
授权
</button>
<view wx:else>请升级版本</view>
<!-- 拍照按钮 -->
<button type="primary" bindtap="takePhoto"> 拍照 </button>
写文章的小程序<button bindtap='btnreg'> 注册须知 </button>
我所谓的授权是，我需要获取⽤户的昵称来充当我⼈脸库照⽚的⽤户id，你可以不需要（设置成⼀样的，如果是只有⼀个⼈使⽤的话。）
camera.js
调⽤wxAPI takePhoto() 拍照并获取src -> wx.request() 访问百度云⽤先前创建的应⽤的API Key & Screct Key 获取 access_token -&quest() 访问百度云上传所拍照⽚（要经过base64编码）详情可参考以及（接⼝以及于18年升级⾄v3）
// camera.js
const app = getApp()
Page({
data: {
canIUse: wx.canIUse('UserInfo'),
nickName : "",
src : "",//图⽚的链接
token: "",
base64: "",
msg:""
},
//拍照
takePhoto() {
var that = this;
//拍照
const ctx = wx.createCameraContext()
ctx.takePhoto({
quality: 'high',
success: (res) => {
this.setData({
src: pImagePath//获取图⽚
})
//图⽚base64编码
filePath: this.data.src, //选择图⽚返回的相对路径
encoding: 'base64', //编码格式
success: res => { //成功的回调
this.setData({
base64: res.data
})
}
})
}//拍照成功结束
})//调⽤相机结束
//acess_token获取,qs：需要多次尝试
url: 'aip.baidubce/oauth/2.0/token', //是真实的接⼝地址
data: {
grant_type: 'client_credentials',
client_id: '**********************',//⽤你创建的应⽤的API Key
client_secret: '************************'//⽤你创建的应⽤的Secret Key
},
header: {
'Content-Type': 'application/json' // 默认值
},
success(res) {
that.setData({
token: res.data.access_token//获取到token
})
}
})
//上传⼈脸进⾏注册-----test
url: 'aip.baidubce/rest/2.0/face/v3/faceset/user/add?access_token=' + ken,
method: 'POST',
data: {
image: this.data.base64,
image_type: 'BASE64',
group_id: '********',//⾃⼰建的⽤户组id
user_id: this.data.nickName//这⾥获取⽤户昵称
},
header: {
'Content-Type': 'application/json' // 默认值
},
success(res) {
that.setData({
msg: _msg
})
console.log(that.data.msg)
//做成功判断
if (that.data.msg == 'SUCCESS') {//js字符串请使⽤单引号
wx.showToast({
title: '注册成功',
icon: 'success',
duration: 2000
})
})
}
}
}),
//失败尝试
wx.showToast({
title: '请重试',
icon: 'loading',
duration: 500
})
},
error(e) {
console.log(e.detail)
},
//获取⽤户信息
bindGetUserInfo: function(e){
this.setData({
nickName: e.detail.userInfo.nickName
})
wx.showToast({
title: '授权成功',
icon: 'success',
duration: 1000
})
},
//先授权登陆，再拍照注册
btnreg:function(){
wx.showModal({
title: '注册须知',
content: '先授权登陆，再拍照注册哦！⽹络可能故障，如果不成功，请再试⼀下！',
})
}
})
这⾥要多试⼏次，我以为可能由于⽹络的问题，会调⽤失败，但其实是wx.request()是并发的，所以获取access_token和上传请求会冲突（可能没有获取到access_token就上传，会发⽣错误）。
暂时的解决⽅案：
将上传⼈脸的request放在access_token获取请求的success函数中，这样⼀来，就可以保证获取到access_token才进⾏上传操作。
另外，要开启⼩程序 IDE 的不校验合法域名的选项（设置->项⽬设置 -> 勾选不校验......）
⾄此，注册就完成了（即获取⽤户昵称、拍照、上传⼈脸库注册。）
2.拍照上传在线⼈脸识别---登陆
到指定⽤户组中与上传照⽚最相似的⼈脸并返回，⽐对结果。
我们仍然需要再建⽴⼀个页⾯来承载我们的登陆相关操作。就假定为 camera2{camera2.js camera2.wxml camera2.wxss camera2.json}
camera2.wxml
<!-- camera.wxml -->
<camera
device-position="front"
flash="off"
binderror="error"
></camera>
<button type="primary" bindtap="takePhoto">拍照</button>
<view>预览</view>
<image mode="widthFix" src="{{src}}"></image>
// camera.js
Page({
data: {
base64: "",
token: "",
msg: null
},
//拍照并编码
takePhoto() {
/
/拍照
const ctx = wx.createCameraContext()
ctx.takePhoto({
quality: 'high',
success: (res) => {
this.setData({
src: pImagePath
})
}
})
var that = this;
/
/图⽚base64编码
filePath: this.data.src, //选择图⽚返回的相对路径
encoding: 'base64', //编码格式
success: res => { //成功的回调
that.setData({
base64: res.data
})
}
})
//acess_token获取
url: 'aip.baidubce/oauth/2.0/token', //真实的接⼝地址
data: {
grant_type: 'client_credentials',
client_id: '**************************',
client_secret: '*******************************'//⽤⾃⼰的
},
header: {
'Content-Type': 'application/json' // 默认值
},
success(res) {
that.setData({
token: res.data.access_token//获取到token
})
}
})
url: 'aip.baidubce/rest/2.0/face/v3/search?access_token=' + ken,
method: 'POST',
data: {
image: this.data.base64,
image_type: 'BASE64',
group_id_list: '********'//⾃⼰建的⽤户组id
},
header: {
'Content-Type': 'application/json' // 默认值
},
success(res) {
that.setData({
msg: sult.user_list[0].score
})
if(that.data.msg > 80){
wx.showToast({
title: '验证通过',
icon: 'success',
duration: 1000
})
//验证通过，跳转⾄UI页⾯
wx.switchTab({
url: '../UI/ui',
})
}
}
});
wx.showToast({
title: '请重试',
icon: 'loading',
duration: 500
})
},
error(e) {
console.log(e.detail)
}
})
⾄此，我们的登陆也搞定了。
注意：上述的登陆注册是⼀个某个⼩程序的⼀个模块。关系如下
所以，需要在index页⾯中设置按钮，来跳转到注册以及登陆页⾯，然后注册登陆成功后，再跳转⾄其他功能页⾯。
后记
这次⼩程序实战，对我⾃⼰也是⼀个不⼩的挑战，对⽐各个云接⼝、看接⼝⽂档、查资料，耗费了⼤概⼗来天。但是，我相信⼤有裨益。另外，对我参考的博客和回答的诸位表⽰感谢。我们⼀起前进！参考资料
【1】
【2】
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
发表评论