微信小程序实现人脸识别登陆的示例代码(2)

这里要多试几次,我以为可能由于网络的问题,会调用失败, 但其实是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="https://www.jb51.net/{{src}}"></image>

camera2.js 与注册大同小异,区别是图片上传的接口不同(这次是 https://aip.baidubce.com/rest/2.0/face/v3/search 人脸搜素),获取access_token、拍照、照片base64编码都相同。

// camera.js Page({ data: { base64: "", token: "", msg: null }, //拍照并编码 takePhoto() { //拍照 const ctx = wx.createCameraContext() ctx.takePhoto({ quality: 'high', success: (res) => { this.setData({ src: res.tempImagePath }) } }) var that = this; //图片base64编码 wx.getFileSystemManager().readFile({ filePath: this.data.src, //选择图片返回的相对路径 encoding: 'base64', //编码格式 success: res => { //成功的回调 that.setData({ base64: res.data }) } }) //acess_token获取 wx.request({ url: 'https://aip.baidubce.com/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 }) } }) //上传人脸进行 比对 wx.request({ url: 'https://aip.baidubce.com/rest/2.0/face/v3/search?access_token=' + that.data.token, method: 'POST', data: { image: this.data.base64, image_type: 'BASE64', group_id_list: '********'//自己建的用户组id }, header: { 'Content-Type': 'application/json' // 默认值 }, success(res) { that.setData({ msg: res.data.result.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】百度云接口文档.v3版

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/4510f1084fceec1ebc0d6a417f4343eb.html