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