微信小程序使用face++实现人脸识别登录注册

r囧r小猫 2022-02-21 11:23 387阅读 0赞

Face++是一个 人工智能开放平台，要使用它我们得先注册并进入控制台创建API Key，这是前提。

平台网址：[https://www.faceplusplus.com.cn ][https_www.faceplusplus.com.cn]

**整个项目代码我已经上传到网盘。**

链接：https://pan.baidu.com/s/156C64y-CO0PNw1jWmfgqcw  
提取码：o3jb

**一、编写微信小程序界面**

界面中有一个相机和两个按钮，本文只管功能实现界面没有美化，在IDE中相机可能打不开是空白的，在真机上是可以的，代码如下。

index.wxml：

<view class="container">
    <camera device-position="front" flash="off" binderror="error" style="width: 100%; height: 300px;"></camera>
    <view class="test">
    <button type="primary" bindtap="register">拍照注册</button>
    <button id="verify" type="primary" bindtap="verify">拍照验证</button>
    </view>
    </view>

index.wxss：

/**index.wxss**/
    .test{
       display: flex;
      flex-direction:row;
    }
    #login{
      margin-left: 10px;
    }

**二、功能实现**

**1、创建脸集（FaceSet）**

这是一组用来管理人脸（Face）或人脸集合（FaceSet）的API。通过这组API，您可以实现查询Face属性、新建FaceSet、删除FaceSet、添加Face到FaceSet等功能。FaceSet能够存储的 人脸数量10000个。

**注意：只创建一次，当脸集容量满了可以再创建**

请求代码如下：

wx.request({
                  url: 'https://api-cn.faceplusplus.com/facepp/v3/faceset/create',//请求接口
                  method: 'post',
                  data: {
                    'api_key': '',//请填写你创建的api_key 
                    'api_secret': '',//请填写你的api_secret
                    'outer_id':'15185672300',//账号下全局唯一的 FaceSet 自己自定义，后面要用到
                  },
                  header: {
                    'content-type': 'application/x-www-form-urlencoded',
                  },
                  success(res) {
                    console.log(res.data)//打印
                  },fail:function(e){
                    wx.showModal({
                      title: '提示',
                      content: '创建失败',
                      showCancel: false
                    })
                  },complete:function(){
                    
                  }
                })

请求后打印如下信息：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6cWFhYXNzcw_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6cWFhYXNzcw_size_16_color_FFFFFF_t_70 1][]

**2、人脸注册、登录实现**

请看代码详细注释

**index.js：**

//index.js
    //获取应用实例
    const app = getApp()
    
    Page({
      data: {
    
      },
    
      onLoad: function () {
    
      }, //人脸注册按钮触发此函数
      register: function () {
        const ctx = wx.createCameraContext() //创建相机上下文
        ctx.takePhoto({
          quality: 'high', //获取原图
          success: (res) => {
            this.setData({
              src: res.tempImagePath //得到拍照后的图片地址
            });
            wx.showToast({
              icon: "loading",
              title: "正在上传中。。。"
            });
            console.log(res);
    
            var that = this;
    
            wx.uploadFile({ //上传图片到接口，获取人脸唯一标识，face_token
    
              url: "https://api-cn.faceplusplus.com/facepp/v3/detect",
              filePath: that.data.src, //刚才拍照的图片地址
              name: 'image_file', //图片的字段名和接口的字段要对应上
              header: {
                "Content-Type": "multipart/form-data" //必须用此header
              },
              formData: {
                'api_key': '3f7C895Stwfxw5yAfFQcrnn5rJ_WBXcD',//请填写你创建的 apikey
                'api_secret': 'R9Y-UKyUZOkXeWYEsXcgLVcsdPFlbiGV',//请填写你的api_secret
    
              },
              success: function (res) {
                console.log(res);
    
                var obj = JSON.parse(res.data); //转换成json格式不然解析不了
    
                if (obj['faces'][0] == null || obj['faces'][0] == '') { //根据反回的数据判断是是否检测到人脸
                  wx.showModal({
                    title: '提示',
                    content: '检测不到人脸',
                    showCancel: true
                  })
                  return;
                } else {
                  that.setData({
                    face_token: obj['faces'][0]['face_token'],//获取得到的人脸标识
                  });
    
    
                  //把新注册的人脸与脸集进行对比获得confidence值 这个值大于80我们就认为人脸集中有这个人
                  wx.request({
                    url: 'https://api-cn.faceplusplus.com/facepp/v3/search',//接口
                    method: 'post',
                    data: {
                      'api_key': '3f7C895Stwfxw5yAfFQcrnn5rJ_WBXcD',//请填写你创建的 apikey
                      'api_secret': 'R9Y-UKyUZOkXeWYEsXcgLVcsdPFlbiGV',//请填写你的api_secret
                      'face_token': that.data.face_token,//传入face_token和脸集中的数据比对
                      'outer_id': '15185672300', //脸集唯一标识，就是上面我们创建的脸集
                      'return_result_count': '1'//返回一条匹配数据，范围1-5
                    },
                    header: {
                      'content-type': 'application/x-www-form-urlencoded',
                    },
                    success(res) {
                      console.log(res.data)
    
                      //var obj = JSON.parse(res.data);
                      that.setData({
                        confidence: res.data['results'][0]['confidence'] //对比得到的可信值
                      });
                    },
                    fail: function (e) {
                      wx.showModal({
                        title: '提示',
                        content: '注册失败',
                        showCancel: false
                      })
                    },
                    complete: function () {
                      wx.hideToast();
                    }
                  })
                  if (that.data.confidence < 80) { //可信值小于80我们就把他加到脸集中
                    //把face_token添加到脸集中
                    wx.request({
                      url: 'https://api-cn.faceplusplus.com/facepp/v3/faceset/addface',//添加到脸集的接口
                      method: 'post',
                      data: {
                        'api_key': '3f7C895Stwfxw5yAfFQcrnn5rJ_WBXcD',//请填写你创建的 apikey
                        'api_secret': 'R9Y-UKyUZOkXeWYEsXcgLVcsdPFlbiGV',//请填写你的api_secret
                        'face_tokens': that.data.face_token,//把上请求得到的人脸标识添加到脸集中
                        'outer_id': '15185672300',
    
                      },
                      header: {
                        'content-type': 'application/x-www-form-urlencoded',
                      },
                      success(res) {
                        console.log(res.data)
    
                        wx.showModal({
                          title: '提示',
                          content: '注册成功',
                          showCancel: false
                        })
                      },
                      fail: function (e) {
                        wx.showModal({
                          title: '提示',
                          content: '注册失败',
                          showCancel: false
                        })
                      },
                      complete: function () {
    
                        wx.hideToast();//隐藏提示
                      }
                    })
                  } else {
                    wx.showModal({
                      title: '提示',
                      content: '你已经注册过了',
                      showCancel: false
                    })
                    return;
                  }
    
                }
                console.log('face_token:' + that.data.face_token);
    
                if (res.statusCode != 200) {
                  wx.showModal({
                    title: '提示',
                    content: '上传失败',
                    showCancel: false
                  })
                  return;
                }
              },
              fail: function (e) {
                console.log(e);
                wx.showModal({
                  title: '提示',
                  content: '上传失败',
                  showCancel: false
                })
              },
              complete: function () {
                wx.hideToast(); //隐藏Toast
    
              }
            })
          }
        })
      },
      error(e) {
        console.log(e.detail)
    
      }, //登录验证
      login: function () {
        var that = this
        const ctx = wx.createCameraContext(); //创建相机上下文
        ctx.takePhoto({
          quality: 'high',
          success: (res) => {
            this.setData({
              src: res.tempImagePath //相机拍照得到照片的地址
            })
            wx.showToast({
              icon: "loading",
              title: "正在上传中。。。"
            });
            wx.uploadFile({ //上传照片和脸集中的照片对比并得出结果
    
              url: 'https://api-cn.faceplusplus.com/facepp/v3/search', //对比人脸接口
              filePath: that.data.src,//上传相机拍照得到照片的地址
              name: 'image_file',
              header: {
                'content-type': 'application/x-www-form-urlencoded'
              },
              formData: {
                'api_key': '3f7C895Stwfxw5yAfFQcrnn5rJ_WBXcD',//请填写你创建的 apikey
                'api_secret': 'R9Y-UKyUZOkXeWYEsXcgLVcsdPFlbiGV',//请填写你的api_secret
                'outer_id': '15185672300', //脸集唯一标识
                'return_result_count': '1',//只反回一条匹配数据
    
              },
              success: function (res) {
    
                if (res.statusCode != 200) {
                  wx.showModal({
                    title: '提示',
                    content: '上传失败',
                    showCancel: false
                  })
                  return;
                }
                console.log(res)
                var obj = JSON.parse(res.data);//转成json对象
                if (obj['faces'][0] == null || obj['faces'][0] == '') {//判断是否检测到人脸
                  wx.showModal({
                    title: '提示',
                    content: '未检测到人脸',
                    showCancel: false
                  })
                  return;
                } else {
                  that.setData({
                    confidence: obj['results'][0]['confidence'] //可信值
                  });
    
                  console.log(obj['results'][0]['confidence']);
    
                  if (that.data.confidence >= 80) { //可信值大于80就认为是同一个人
    
                    wx.showModal({
                      title: '提示',
                      content: '验证通过',
                      showCancel: false
                    })
                    return;
                  } else {
                    wx.showModal({
                      title: '提示',
                      content: '验证失败',
                      showCancel: false
                    })
                    return;
                  }
                }
              },
              fail: function (e) {
                console.log(e);
                wx.showModal({
                  title: '提示',
                  content: '上传失败',
                  showCancel: false
                })
              },
              complete: function () {
                wx.hideToast(); //隐藏Toast
              }
            })
          }
        })
      },
      error(e) {
        console.log(e.detail)
      }
    
    })

整个项目代码我已经上传到网盘。

链接：https://pan.baidu.com/s/156C64y-CO0PNw1jWmfgqcw  
提取码：o3jb

[https_www.faceplusplus.com.cn]: https://www.faceplusplus.com.cn
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6cWFhYXNzcw_size_16_color_FFFFFF_t_70]: /images/20220221/d41527d43ef94de7aa8f24f3ca9e4ff8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6cWFhYXNzcw_size_16_color_FFFFFF_t_70 1]: /images/20220221/7fd988afa5d24b8c810404c725a804de.png