微信小程序人脸识别登陆模块

微信小程序---人脸识别登陆的实现

关键词：微信小程序人脸识别百度云接口

前言

这是一篇关于一个原创微信小程序开发过程的原创文章。涉及到的核心技术是微信小程序开发方法和百度云人脸识别接口。小程序的主体是一个用于个人密码存储的密码管理器，在登陆注册阶段，需要调用百度云人脸识别接口以及百度云在线人脸库的管理接口。本文主要涉及登陆注册模块的实现，而且不需要PHP后台代码，完全在线调用接口实现，希望后来的你能有所收获！（补充说明，如果要在实际中使用的话，要谨慎，后面的上传图片的步骤存在问题。暂时还未解决！）

步骤

步骤	涉及接口（百度云）
拍摄或者相册选择并上传比对样本照片到人脸库	人脸库管理接口（main:人脸注册）
拍摄照片并上传，云服务器在线比对人脸库照片与上传图片的相似度	人脸识别接口
获取返回结果（相似度）	人脸识别接口

开发过程

1.拍摄人脸图片上传至人脸库---注册

准备工作：需要在百度云注册（或者直接用百度云盘app扫码登陆），并创建人脸识别的应用。（完全免费）

具体如下：

百度云：https://cloud.baidu.com/

注册完成后（或者直接扫码登陆），进入管理控制台->产品服务->人工智能->人脸识别->创建应用->填写必要信息->立即创建

至此，我们已经创建好了人脸识别的应用。接下来，进入应用列表，找到我们才新建的应用，查看人脸库，我们需要创建用户组（用来集中管理小程序的用户人脸照片）

新建组（id不要太复杂，后面还要用的。）

至此，我们已经完成了在云上的所有必要操作。下面，我们在小程序中，拍照上传即可。

拍照上传

需要在pages中新建一个目录，用来承载我们的登陆注册模块。就假定为 camera{camera.js camera.wxml camera.wxss camera.json}

主要文件自然是 *.wxml 和 *.js 了。

camera.wxml

 1 <!-- camera.wxml相机大小需要从重新设置 -->
 2 <camera
 3   device-position="front"
 4   flash="off"
 5   binderror="error"
 6   style="width: 100%; height: 400px;"
 7 ></camera>
 8
 9 <!-- 需要使用 button 来授权登录 -->
10 <button
11   wx:if="{{canIUse}}"
12   open-type="getUserInfo"
13   bindgetuserinfo="bindGetUserInfo"
14   type="primary"
15 >
16   授权
17 </button>
18 <view wx:else>请升级微信版本</view>
19
20 <!-- 拍照按钮 -->
21 <button type="primary" bindtap="takePhoto"> 拍照 </button>
22
23 <button bindtap='btnreg'> 注册须知 </button>

我所谓的授权是，我需要获取用户微信的昵称来充当我人脸库照片的用户id,你可以不需要（设置成一样的，如果是只有一个人使用的话。）

camera.js

调用wxAPI takePhoto() 拍照并获取src -> wx.request() 访问百度云用先前创建的应用的API Key & Screct Key 获取 access_token -> wx.request() 访问百度云上传所拍照片（要经过base64编码）详情可参考小程序API文档以及百度云API文档（接口以及于18年升级至v3）

  1 // camera.js
  2 const app = getApp()
  3 Page({
  4   data: {
  5     canIUse: wx.canIUse('button.open-type.getUserInfo'),
  6     nickName : "",
  7     src : "",//图片的链接
  8     token: "",
  9     base64: "",
 10     msg:""
 11   },
 12
 13   //拍照
 14  takePhoto() {
 15     var that = this;
 16     //拍照
 17     const ctx = wx.createCameraContext()
 18     ctx.takePhoto({
 19       quality: 'high',
 20       success: (res) => {
 21         this.setData({
 22           src: res.tempImagePath//获取图片
 23         })
 24
 25         //图片base64编码
 26         wx.getFileSystemManager().readFile({
 27           filePath: this.data.src, //选择图片返回的相对路径
 28           encoding: 'base64', //编码格式
 29           success: res => { //成功的回调
 30             this.setData({
 31               base64: res.data
 32             })
 33           }
 34         })
 35       }//拍照成功结束
 36
 37     })//调用相机结束
 38
 39       //acess_token获取,qs:需要多次尝试
 40       wx.request({
 41         url: 'https://aip.baidubce.com/oauth/2.0/token', //是真实的接口地址
 42         data: {
 43           grant_type: 'client_credentials',
 44           client_id: '**********************',//用你创建的应用的API Key
 45           client_secret: '************************'//用你创建的应用的Secret Key
 46         },
 47         header: {
 48           'Content-Type': 'application/json' // 默认值
 49         },
 50         success(res) {
 51           that.setData({
 52             token: res.data.access_token//获取到token
 53           })
 54         }
 55       })
 56
 57       //上传人脸进行注册-----test
 58       wx.request({
 59         url: 'https://aip.baidubce.com/rest/2.0/face/v3/faceset/user/add?access_token=' + this.data.token,
 60         method: 'POST',
 61         data: {
 62           image: this.data.base64,
 63           image_type: 'BASE64',
 64           group_id: '********',//自己建的用户组id
 65           user_id: this.data.nickName//这里获取用户昵称
 66         },
 67         header: {
 68           'Content-Type': 'application/json' // 默认值
 69         },
 70         success(res) {
 71           that.setData({
 72             msg: res.data.error_msg
 73           })
 74           console.log(that.data.msg)
 75           //做成功判断
 76           if (that.data.msg == 'SUCCESS') {//微信js字符串请使用单引号
 77             wx.showToast({
 78               title: '注册成功',
 79               icon: 'success',
 80               duration: 2000
 81             })
 82             wx.switchTab({
 83               url: '../UI/ui',
 84             })
 85
 86           }
 87
 88         }
 89       }),
 90
 91       //失败尝试
 92       wx.showToast({
 93         title: '请重试',
 94         icon: 'loading',
 95         duration: 500
 96       })
 97   },
 98   error(e) {
 99     console.log(e.detail)
100   },
101
102 //获取用户信息
103   bindGetUserInfo: function(e){
104     this.setData({
105       nickName: e.detail.userInfo.nickName
106     })
107     wx.showToast({
108       title: '授权成功',
109       icon: 'success',
110       duration: 1000
111     })
112   },
113
114 //先授权登陆，再拍照注册
115   btnreg:function(){
116     wx.showModal({
117       title: '注册须知',
118       content: '先授权登陆，再拍照注册哦！网络可能故障，如果不成功，请再试一下！',
119     })
120   }
121
122 })

这里要多试几次，我以为可能由于网络的问题，会调用失败，但其实是wx.request()是并发的，所以获取access_token和上传请求会冲突（可能没有获取到access_token就上传，会发生错误）。

注意：还问题还未解决，如果你有好的想法或者解决办法，请务必留言或评论。

目前我的改动是：

在Page的data中声明一个flag,初始值置为false;在获取access_token的request返回succes中将flag 置为true；
然后，在下面那个上传图片的request函数体外包一层if(false == true),这样就会解决你当前遇到的问题。即：只有在上一个request执行成功才去进行下一个request。
但是，会导致新的问题，Cannot read property 'user_list' of null;at api request success callback function这个似乎是后台返回数据的问题，还未解决，但是网上有人遇到相似的问题，可以参考解决。

另外，要开启微信小程序 IDE 的不校验合法域名的选项（设置->项目设置 -> 勾选不校验......）

至此，注册就完成了（即获取用户昵称、拍照、上传人脸库注册。）

2.拍照上传在线人脸识别---登陆

找到指定用户组中与上传照片最相似的人脸并返回，比对结果。

我们仍然需要再建立一个页面来承载我们的登陆相关操作。就假定为 camera2{camera2.js camera2.wxml camera2.wxss camera2.json}

camera2.wxml

 1 <!-- camera.wxml -->
 2 <camera
 3   device-position="front"
 4   flash="off"
 5   binderror="error"
 6   style="width: 100%; height: 300px;"
 7 ></camera>
 8 <button type="primary" bindtap="takePhoto">拍照</button>
 9 <view>预览</view>
10 <image mode="widthFix" src="{{src}}"></image>

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

 1 // camera.js
 2 Page({
 3   data: {
 4     base64: "",
 5     token: "",
 6     msg: null
 7   },
 8   //拍照并编码
 9   takePhoto() {
10     //拍照
11     const ctx = wx.createCameraContext()
12     ctx.takePhoto({
13       quality: 'high',
14       success: (res) => {
15         this.setData({
16           src: res.tempImagePath
17         })
18       }
19     })
20
21     var that = this;
22     //图片base64编码
23     wx.getFileSystemManager().readFile({
24       filePath: this.data.src, //选择图片返回的相对路径
25       encoding: 'base64', //编码格式
26       success: res => { //成功的回调
27         that.setData({
28           base64: res.data
29         })
30       }
31     })
32
33     //acess_token获取
34     wx.request({
35       url: 'https://aip.baidubce.com/oauth/2.0/token', //真实的接口地址
36       data: {
37         grant_type: 'client_credentials',
38         client_id: '**************************',
39         client_secret: '*******************************'//用自己的
40       },
41       header: {
42         'Content-Type': 'application/json' // 默认值
43       },
44       success(res) {
45         that.setData({
46           token: res.data.access_token//获取到token
47         })
48       }
49     })
50
51     //上传人脸进行 比对
52     wx.request({
53       url: 'https://aip.baidubce.com/rest/2.0/face/v3/search?access_token=' + that.data.token,
54       method: 'POST',
55       data: {
56         image: this.data.base64,
57         image_type: 'BASE64',
58         group_id_list: '********'//自己建的用户组id
59       },
60       header: {
61         'Content-Type': 'application/json' // 默认值
62       },
63       success(res) {
64         that.setData({
65           msg: res.data.result.user_list[0].score
66         })
67         if(that.data.msg > 80){
68           wx.showToast({
69             title: '验证通过',
70             icon: 'success',
71             duration: 1000
72           })
73           //验证通过，跳转至UI页面
74           wx.switchTab({
75             url: '../UI/ui',
76           })
77         }
78       }
79     });
80
81     wx.showToast({
82       title: '请重试',
83       icon: 'loading',
84       duration: 500
85     })
86   },
87   error(e) {
88     console.log(e.detail)
89   }
90 })

至此，我们的登陆也搞定了。

注意：上述的登陆注册是一个某个小程序的一个模块。关系如下

所以，需要在index页面中设置按钮，来跳转到注册以及登陆页面，然后注册登陆成功后，再跳转至其他功能页面。

后记

这次小程序实战，对我自己也是一个不小的挑战，对比各个云接口、看接口文档、查资料，耗费了大概十来天。但是，我相信大有裨益。另外，对我参考的博客和回答的诸位表示感谢。我们一起前进！

参考资料

【1】微信小程序开发文档

【2】百度云接口文档.v3版