原文地址：https://www.jb51.net/article/158886.htm

前言

这是一篇关于一个原创微信小程序开发过程的原创文章。涉及到的核心技术是微信小程序开发方法和百度云人脸识别接口。小程序的主体是一个用于个人密码存储的密码管理器，在登陆注册阶段，需要调用百度云人脸识别接口以及百度云在线人脸库的管理接口。本文主要涉及登陆注册模块的实现，而且不需要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 device-position="front" flash="off" binderror="error"  style="width:100%;height:400px;"></camera> 
  3. <!-- 需要使用 button 来授权登录 -->
  4. <button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo" type="primary">
  5.  授权
  6. </button>
  7. <view wx:else>请升级微信版本</view> 
  8. <!-- 拍照按钮 -->
  9. <button type="primary" bindtap="takePhoto"> 拍照 </button> 
  10. <button bindtap=\'btnreg\'> 注册须知 </button>

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

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

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

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

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

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

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

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

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

实际用到的样式

  1. .Top {
  2.   position: absolute;
  3.   top: 0rpx;
  4.   width: 100%;
  5.   bottom: 100rpx;
  6. }
  7. .csscamera {
  8.   margin: 50rpx 5% 0 5%;
  9.   padding: 5%;
  10.   height: 70%;
  11.   width: 80%;
  12.   border: dashed 1rpx rgb(185, 185, 189);
  13. }
  14. .sumbit {
  15.   position: absolute;
  16.   bottom: 0rpx;
  17.   height: 100rpx;
  18.   width: 100%;
  19. }
  1. <view class="Top">
  2. <camera device-position="front" flash="off" binderror="error" class="csscamera"></camera>
  3. <!-- 拍照按钮 -->
  4. <button type="primary" bindtap="takePhoto" class="sumbit"> 识别 </button> 
  5. </view>

 

版权声明：本文为luckyting原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/luckyting/articles/11316754.html