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

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

前言

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

步骤

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

 

 

 

 

 

 

 

开发过程

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

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

具体如下：

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

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

 

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

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

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

---

 拍照上传

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

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

camera.wxml

<!-- 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>

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

camera.js

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

// 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/