【轉】微信小程序實現人臉識別登陸的示例代碼

原文地址：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

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

調用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: "",//圖片的鏈接
    baidutoken: "",
    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
            })
          }
        })

        this.getBaiduToken();
      }//拍照成功結束
    })//調用相機結束

  
      //失敗嘗試
      wx.showToast({
        title: '請重試',
        icon: 'loading',
        duration: 500
      })
  },
  error(e) {
    console.log(e.detail)
  },

 getBaiduToken:function(){
   var that=this;
   //acess_token獲取,qs:需要多次嘗試
   wx.request({
     url: 'https://aip.baidubce.com/oauth/2.0/token', //是真實的接口地址
     data: {
       grant_type: 'client_credentials',
       client_id: 'xxx',//用你創建的應用的API Key
       client_secret: 'xx'//用你創建的應用的Secret Key
     },
     header: {
       'Content-Type': 'application/json' // 默認值
     },
     success(res) {
       that.setData({
         baidutoken: res.data.access_token//獲取到token
       })
       that.uploadPhoto();
     }
   })
 },

  uploadPhoto:function()
  {
    var that=this;
    //上傳人臉進行注冊-----test
    wx.request({
      url: 'https://aip.baidubce.com/rest/2.0/face/v3/faceset/user/add?access_token=' + this.data.baidutoken,
      method: 'POST',
      data: {
        image: this.data.base64,
        image_type: 'BASE64',
        group_id: 'tingdemo',//自己建的用戶組id
        user_id: 'ting'//這里獲取用戶昵稱
      },
      header: {
        'Content-Type': 'application/json' // 默認值
      },
      success(res) {     
        that.setData({
          msg: res.data.error_msg
        })
        console.log(that.data.msg)      
        //做成功判斷
        if (that.data.msg == 'SUCCESS') {//微信js字符串請使用單引號
          wx.showToast({
            title: '注冊成功',
            icon: 'success',
            duration: 2000
          })
          wx.switchTab({
            url: '../UI/ui',
          })
        }
      }
    })
  },
  //獲取用戶信息
  bindGetUserInfo: function (e) {
    this.setData({
      nickName: e.detail.userInfo.nickName
    })
    debugger;
    wx.showToast({
      title: '授權成功',
      icon: 'success',
      duration: 1000
    })
  },

  //先授權登陸，再拍照注冊
  btnreg: function () {
    wx.showModal({
      title: '注冊須知',
      content: '先授權登陸，再拍照注冊哦！網絡可能故障，如果不成功，請再試一下！',
    })
  }
})

這里要多試幾次，我以為可能由於網絡的問題，會調用失敗， 但其實是wx.request()是並發的，所以獲取access_token和上傳請求會沖突（可能沒有獲取到access_token就上傳，會發生錯誤）。

另外，要開啟微信小程序 IDE 的 不校驗合法域名的選項（設置->項目設置 -> 勾選 不校驗......）

至此，注冊 就完成了（即獲取用戶昵稱、拍照、上傳人臉庫注冊。）

2.拍照上傳在線人臉識別---登陸

找到指定用戶組中與上傳照片最相似的人臉並返回，比對結果。

我們仍然需要再建立一個頁面來承載我們的登陸相關操作。就假定為 camera2

<!--pages/Camera/verifyphoto.wxml-->
<!-- verifyphoto.wxml相 -->
<camera device-position="front" flash="off" binderror="error"  class="camera"></camera>
<!-- 拍照按鈕 -->
<button type="primary" bindtap="takePhoto"> 識別 </button>

Page({
  data: {
    src:'',
    base64: "",
    baidutoken: "",
    msg: null
  },
  //拍照並編碼
  takePhoto() {
    var that=this;
    //拍照
    const ctx = wx.createCameraContext()
    ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        that.setData({
          src: res.tempImagePath
        })
        //圖片base64編碼
        wx.getFileSystemManager().readFile({
          filePath: that.data.src, //選擇圖片返回的相對路徑
          encoding: 'base64', //編碼格式
          success: res => { //成功的回調          
            that.setData({
              base64: res.data
            })
            that.checkPhoto();
          }
        })
      }
    })  

    wx.showToast({
      title: '請重試',
      icon: 'loading',
      duration: 500
    })
  },
  error(e) {
    console.log(e.detail)
  },
  checkPhoto: function () {
    var that=this;
    //acess_token獲取
    wx.request({
      url: 'https://aip.baidubce.com/oauth/2.0/token', //真實的接口地址
      data: {
        grant_type: 'client_credentials',
        client_id: 'xx',
        client_secret: 'xx'//用自己的
      },
      header: {
        'Content-Type': 'application/json' // 默認值
      },
      success(res) {
        that.setData({
          baidutoken: res.data.access_token//獲取到token
        })        
        that.validPhoto();
      }
    })
  },
  validPhoto:function(){
    var that = this;
    //上傳人臉進行 比對
    wx.request({
      url: 'https://aip.baidubce.com/rest/2.0/face/v3/search?access_token=' + that.data.baidutoken,
      method: 'POST',
      data: {
        image: this.data.base64,
        image_type: 'BASE64',
        group_id_list: 'tingdemo',//自己建的用戶組id
      },
      header: {
        'Content-Type': 'application/json' // 默認值
      },
      success(res) {
        that.setData({
          msg: res.data.result.user_list[0].score
        })
        if (that.data.msg > 80) {
          wx.showToast({
            title: '驗證通過',
            icon: 'success',
            duration: 1000
          })         //驗證通過，跳轉至UI頁面
          wx.switchTab({
            url: '../UI/ui',
          })
        }
      }
    });
  }
})

至此，我們的登陸也搞定了。

實際用到的樣式

.Top {
  position: absolute;
  top: 0rpx;
  width: 100%;
  bottom: 100rpx;
}
.csscamera {
  margin: 50rpx 5% 0 5%;
  padding: 5%;
  height: 70%;
  width: 80%;
  border: dashed 1rpx rgb(185, 185, 189);
}
.sumbit {
  position: absolute;
  bottom: 0rpx;
  height: 100rpx;
  width: 100%;
}

<view class="Top">
<camera device-position="front" flash="off" binderror="error" class="csscamera"></camera>
<!-- 拍照按鈕 -->
<button type="primary" bindtap="takePhoto" class="sumbit"> 識別 </button> 
</view>