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

<!-- camera.wxml相机大小需要从重新设置 -->
<camera
 device-position="front"
 flash="off"
 binderror="error"
 style="width: 100%; height: 400px;"
></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>

// camera.js
const app = getApp()
Page({
 data: {
  canIUse: wx.canIUse('button.open-type.getUserInfo'),
  nickName : "",
  src : "",//图片的链接
  token: "",
  base64: "",
  msg:""
 },

 //拍照
 takePhoto() {
  var that = this;
  //拍照
  const ctx = wx.createCameraContext()
  ctx.takePhoto({
   quality: 'high',
   success: (res) => {
    this.setData({
     src: res.tempImagePath//获取图片
    })

    //图片base64编码
    wx.getFileSystemManager().readFile({
     filePath: this.data.src, //选择图片返回的相对路径
     encoding: 'base64', //编码格式
     success: res => { //成功的回调
      this.setData({
       base64: res.data
      })
     }
    })
   }//拍照成功结束

  })//调用相机结束

   //acess_token获取,qs:需要多次尝试
   wx.request({
    url: 'https://aip.baidubce.com/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
   wx.request({
    url: 'https://aip.baidubce.com/rest/2.0/face/v3/faceset/user/add"htmlcode">

<!-- camera.wxml -->
<camera
 device-position="front"
 flash="off"
 binderror="error"
 style="width: 100%; height: 300px;"
></camera>
<button type="primary" bindtap="takePhoto">拍照</button>
<view>预览</view>
<image mode="widthFix" src="/UploadFiles/2021-04-02/{{src}}">

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"text-align: center">

所以，需要在index页面中设置按钮，来跳转到注册以及登陆页面，然后注册登陆成功后，再跳转至其他功能页面。
后记
这次小程序实战，对我自己也是一个不小的挑战，对比各个云接口、看接口文档、查资料，耗费了大概十来天。但是，我相信大有裨益。另外，对我参考的博客和回答的诸位表示感谢。我们一起前进！
参考资料
【1】微信小程序开发文档
【2】百度云接口文档.v3版
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

            
           
            上一篇：详解vue后台系统登录态管理

            下一篇：Angular7中创建组件/自定义指令/管道的方法实例详解