微信小程序?qū)崿F(xiàn)人臉識別登陸的示例代碼
前言
這是一篇關(guān)于一個原創(chuàng)微信小程序開發(fā)過程的原創(chuàng)文章。涉及到的核心技術(shù)是微信小程序開發(fā)方法和百度云人臉識別接口。小程序的主體是一個用于個人密碼存儲的密碼管理器，在登陸注冊階段，需要調(diào)用百度云人臉識別接口以及百度云在線人臉庫的管理接口。本文主要涉及登陸注冊模塊的實現(xiàn)，而且不需要PHP后臺代碼，完全在線調(diào)用接口實現(xiàn)，希望后來的你能有所收獲！
步驟
| 步驟 | 涉及接口（百度云） |
| 拍攝或者相冊選擇 并 上傳比對樣本照片到 人臉庫 | 人臉庫管理接口（main:人臉注冊） |
| 拍攝照片并上傳，云服務(wù)器在線比對 人臉庫照片與上傳圖片的相似度 | 人臉識別接口 |
| 獲取返回結(jié)果（相似度） | 人臉識別接口 |
開發(fā)過程
1.拍攝人臉圖片上傳至人臉庫---注冊
準備工作：需要在百度云注冊（或者直接用百度云盤app掃碼登陸），并創(chuàng)建人臉識別的應(yīng)用。（完全免費）
具體如下：
注冊完成后（或者直接掃碼登陸），進入管理控制臺->產(chǎn)品服務(wù)->人工智能->人臉識別->創(chuàng)建應(yīng)用->填寫必要信息->立即創(chuàng)建
至此，我們已經(jīng)創(chuàng)建好了人臉識別的應(yīng)用。接下來，進入應(yīng)用列表，找到我們才新建的應(yīng)用，查看人臉庫，我們需要創(chuàng)建用戶組（用來集中管理小程序的用戶人臉照片）
新建組（id不要太復(fù)雜，后面還要用的。）
至此，我們已經(jīng)完成了在云上的所有必要操作。下面，我們在小程序中，拍照上傳即可。
拍照上傳
需要在pages中新建一個目錄，用來承載我們的登陸注冊模塊。就假定為 camera{camera.js camera.wxml camera.wxss camera.json}
主要文件自然是 *.wxml 和 *.js 了。
camera.wxml
<!-- camera.wxml相機大小需要從重新設(shè)置 -->
<camera
device-position="front"
flash="off"
binderror="error"
style="width: 100%; height: 400px;"
></camera>
<!-- 需要使用 button 來授權(quán)登錄 -->
<button
wx:if="{{canIUse}}"
open-type="getUserInfo"
bindgetuserinfo="bindGetUserInfo"
type="primary"
>
授權(quán)
</button>
<view wx:else>請升級微信版本</view>
<!-- 拍照按鈕 -->
<button type="primary" bindtap="takePhoto"> 拍照 </button>
<button bindtap='btnreg'> 注冊須知 </button>
我所謂的授權(quán)是，我需要獲取用戶微信的昵稱來充當(dāng)我人臉庫照片的用戶id,你可以不需要（設(shè)置成一樣的，如果是只有一個人使用的話。）
camera.js
調(diào)用wxAPI takePhoto() 拍照并獲取src -> wx.request() 訪問百度云 用先前創(chuàng)建的應(yīng)用的API Key & Screct Key 獲取 access_token ->wx.request() 訪問百度云 上傳 所拍照片（要經(jīng)過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 => { //成功的回調(diào)
this.setData({
base64: res.data
})
}
})
}//拍照成功結(jié)束
})//調(diào)用相機結(jié)束
//acess_token獲取,qs:需要多次嘗試
wx.request({
url: 'https://aip.baidubce.com/oauth/2.0/token', //是真實的接口地址
data: {
grant_type: 'client_credentials',
client_id: '**********************',//用你創(chuàng)建的應(yīng)用的API Key
client_secret: '************************'//用你創(chuàng)建的應(yīng)用的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?access_token=' + this.data.token,
method: 'POST',
data: {
image: this.data.base64,
image_type: 'BASE64',
group_id: '********',//自己建的用戶組id
user_id: this.data.nickName//這里獲取用戶昵稱
},
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',
})
}
}
}),
//失敗嘗試
wx.showToast({
title: '請重試',
icon: 'loading',
duration: 500
})
},
error(e) {
console.log(e.detail)
},
//獲取用戶信息
bindGetUserInfo: function(e){
this.setData({
nickName: e.detail.userInfo.nickName
})
wx.showToast({
title: '授權(quán)成功',
icon: 'success',
duration: 1000
})
},
//先授權(quán)登陸，再拍照注冊
btnreg:function(){
wx.showModal({
title: '注冊須知',
content: '先授權(quán)登陸，再拍照注冊哦！網(wǎng)絡(luò)可能故障，如果不成功，請再試一下！',
})
}
})
這里要多試幾次，我以為可能由于網(wǎng)絡(luò)的問題，會調(diào)用失敗， 但其實是wx.request()是并發(fā)的，所以獲取access_token和上傳請求會沖突（可能沒有獲取到access_token就上傳，會發(fā)生錯誤）。
暫時的解決方案：
將上傳人臉的request放在access_token獲取請求的success函數(shù)中，這樣一來，就可以保證獲取到access_token才進行上傳操作。
另外，要開啟微信小程序 IDE 的 不校驗合法域名的選項（設(shè)置->項目設(shè)置 -> 勾選 不校驗......）
至此，注冊 就完成了（即獲取用戶昵稱、拍照、上傳人臉庫注冊。）
2.拍照上傳在線人臉識別---登陸
找到指定用戶組中與上傳照片最相似的人臉并返回，比對結(jié)果。
我們?nèi)匀恍枰俳⒁粋€頁面來承載我們的登陸相關(guān)操作。就假定為 camera2{camera2.js camera2.wxml camera2.wxss camera2.json}
camera2.wxml
<!-- camera.wxml -->
<camera
device-position="front"
flash="off"
binderror="error"
style="width: 100%; height: 300px;"
></camera>
<button type="primary" bindtap="takePhoto">拍照</button>
<view>預(yù)覽</view>
<image mode="widthFix" src="{{src}}"></image>
camera2.js 與注冊大同小異，區(qū)別是圖片上傳的接口不同（這次是 https://aip.baidubce.com/rest/2.0/face/v3/search 人臉?biāo)阉兀@取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 => { //成功的回調(diào)
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?access_token=' + that.data.token,
method: 'POST',
data: {
image: this.data.base64,
image_type: 'BASE64',
group_id_list: '********'//自己建的用戶組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
})
//驗證通過，跳轉(zhuǎn)至UI頁面
wx.switchTab({
url: '../UI/ui',
})
}
}
});
wx.showToast({
title: '請重試',
icon: 'loading',
duration: 500
})
},
error(e) {
console.log(e.detail)
}
})
至此，我們的登陸也搞定了。
注意：上述的 登陸注冊 是一個某個小程序的一個模塊。關(guān)系如下
所以，需要在index頁面中設(shè)置按鈕，來跳轉(zhuǎn)到注冊以及登陸頁面，然后注冊登陸成功后，再跳轉(zhuǎn)至其他功能頁面。
后記
這次小程序?qū)崙?zhàn)，對我自己也是一個不小的挑戰(zhàn)，對比各個云接口、看接口文檔、查資料，耗費了大概十來天。但是，我相信大有裨益。另外，對我參考的博客和回答的諸位表示感謝。我們一起前進！
參考資料
【2】百度云接口文檔.v3版
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
bootstrap插件treeview實現(xiàn)全選父節(jié)點下所有子節(jié)點和反選功能
這篇文章主要為大家詳細介紹了bootstrap插件treeview實現(xiàn)全選父節(jié)點下所有子節(jié)點、反選功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
很多情況下，需要用到隨機數(shù)，腳本之家特為大家整理了一些具體的使用與說明。2010-08-08
在 ThreeJs 中,動畫是創(chuàng)建動態(tài) 3D 場景的重要組成部分,本文將介紹如何使用 ThreeJs 實現(xiàn)基礎(chǔ)的動畫效果,需要的小伙伴可以參考一下2024-10-10
微信小程序scroll-view實現(xiàn)滾動到錨點左側(cè)導(dǎo)航欄點餐功能(點擊種類,滾動到錨點)
這篇文章主要介紹了微信小程序scroll-view左側(cè)導(dǎo)航欄點餐功能實現(xiàn)，點擊種類，滾動到錨點；滾動到錨點，種類選中,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06
這篇文章主要為大家詳細介紹了js實現(xiàn)時鐘定時器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
這篇文章主要為大家介紹了Javascript實現(xiàn)動態(tài)時鐘效果，非常詳細的注釋代碼，文具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
本篇文章主要介紹了微信小程序入門教程，現(xiàn)在分享給大家，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2016-11-11
微信小程序基于canvas漸變實現(xiàn)的彩虹效果示例
這篇文章主要介紹了微信小程序基于canvas漸變實現(xiàn)的彩虹效果,結(jié)合實例形式分析了微信小程序線性漸變及圓形漸變的相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-05-05
JavaScript基于replace+正則實現(xiàn)ES6的字符串模版功能
這篇文章主要介紹了JavaScript基于replace+正則實現(xiàn)ES6的字符串模版功能,結(jié)合實例形式分析了replace結(jié)合正則實現(xiàn)ES6字符串模板功能的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-04-04
下面小編就為大家?guī)硪黄獪\談JS之tagNaem和nodeName。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09