微信小程式 人臉識別登陸模塊

来源:https://www.cnblogs.com/yocichen/archive/2019/02/08/10354035.html
-Advertisement-
Play Games

微信小程式 人臉識別登陸的實現 關鍵詞：微信小程式 人臉識別 百度雲介面 前言 這是一篇關於一個原創微信小程式開發過程的原創文章。涉及到的核心技術是微信小程式開發方法和百度雲人臉識別介面。小程式的主體是一個用於個人密碼存儲的密碼管理器，在登陸註冊階段，需要調用百度雲人臉識別介面以及百度雲線上人臉庫的 ...


微信小程式---人臉識別登陸的實現

關鍵詞：微信小程式 人臉識別 百度雲介面

前言

這是一篇關於一個原創微信小程式開發過程的原創文章。涉及到的核心技術是微信小程式開發方法和百度雲人臉識別介面。小程式的主體是一個用於個人密碼存儲的密碼管理器，在登陸註冊階段，需要調用百度雲人臉識別介面以及百度雲線上人臉庫的管理介面。本文主要涉及登陸註冊模塊的實現，而且不需要PHP後臺代碼，完全線上調用介面實現，希望後來的你能有所收穫！

步驟

步驟 涉及介面（百度雲）
拍攝或者相冊選擇 並 上傳比對樣本照片到 人臉庫 人臉庫管理介面（main:人臉註冊）
拍攝照片並上傳，雲伺服器線上比對 人臉庫照片與上傳圖片的相似度 人臉識別介面
獲取返回結果（相似度） 人臉識別介面

 

 

 

 

 

 

 

開發過程

1.拍攝人臉圖片上傳至人臉庫---註冊

準備工作：需要在百度雲註冊（或者直接用百度雲盤app掃碼登陸），並創建人臉識別的應用。（完全免費）

具體如下：

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

註冊完成後（或者直接掃碼登陸），進入管理控制台->產品服務->人工智慧->人臉識別->創建應用->填寫必要信息->立即創建

 

 至此，我們已經創建好了人臉識別的應用。接下來，進入應用列表，找到我們才新建的應用，查看人臉庫，我們需要創建用戶組（用來集中管理小程式的用戶人臉照片）

新建組（id不要太複雜，後面還要用的。）

至此，我們已經完成了在雲上的所有必要操作。下麵，我們在小程式中，拍照上傳即可。

 拍照上傳

需要在pages中新建一個目錄，用來承載我們的登陸註冊模塊。就假定為 camera{camera.js camera.wxml camera.wxss camera.json}

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

camera.wxml

 1 <!-- camera.wxml相機大小需要從重新設置 -->
 2 <camera
 3   device-position="front"
 4   flash="off"
 5   binderror="error"
 6   style="width: 100%; height: 400px;"
 7 ></camera>
 8 
 9 <!-- 需要使用 button 來授權登錄 -->
10 <button
11   wx:if="{{canIUse}}"
12   open-type="getUserInfo"
13   bindgetuserinfo="bindGetUserInfo"
14   type="primary"
15 >
16   授權
17 </button>
18 <view wx:else>請升級微信版本</view>
19 
20 <!-- 拍照按鈕 -->
21 <button type="primary" bindtap="takePhoto"> 拍照 </button>
22 
23 <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）

  1 // camera.js
  2 const app = getApp()
  3 Page({
  4   data: {
  5     canIUse: wx.canIUse('button.open-type.getUserInfo'),
  6     nickName : "",
  7     src : "",//圖片的鏈接
  8     token: "",
  9     base64: "",
 10     msg:""
 11   },
 12 
 13   //拍照
 14  takePhoto() {
 15     var that = this;
 16     //拍照
 17     const ctx = wx.createCameraContext()
 18     ctx.takePhoto({
 19       quality: 'high',
 20       success: (res) => {
 21         this.setData({
 22           src: res.tempImagePath//獲取圖片
 23         })
 24 
 25         //圖片base64編碼
 26         wx.getFileSystemManager().readFile({
 27           filePath: this.data.src, //選擇圖片返回的相對路徑
 28           encoding: 'base64', //編碼格式
 29           success: res => { //成功的回調
 30             this.setData({
 31               base64: res.data
 32             })
 33           }
 34         })
 35       }//拍照成功結束
 36 
 37     })//調用相機結束
 38 
 39       //acess_token獲取,qs:需要多次嘗試
 40       wx.request({
 41         url: 'https://aip.baidubce.com/oauth/2.0/token', //是真實的介面地址
 42         data: {
 43           grant_type: 'client_credentials',
 44           client_id: '**********************',//用你創建的應用的API Key
 45           client_secret: '************************'//用你創建的應用的Secret Key
 46         },
 47         header: {
 48           'Content-Type': 'application/json' // 預設值
 49         },
 50         success(res) {
 51           that.setData({
 52             token: res.data.access_token//獲取到token
 53           })
 54         }
 55       })
 56       
 57       //上傳人臉進行註冊-----test
 58       wx.request({
 59         url: 'https://aip.baidubce.com/rest/2.0/face/v3/faceset/user/add?access_token=' + this.data.token,
 60         method: 'POST',
 61         data: {
 62           image: this.data.base64,
 63           image_type: 'BASE64',
 64           group_id: '********',//自己建的用戶組id
 65           user_id: this.data.nickName//這裡獲取用戶昵稱
 66         },
 67         header: {
 68           'Content-Type': 'application/json' // 預設值
 69         },
 70         success(res) {
 71           that.setData({
 72             msg: res.data.error_msg
 73           })
 74           console.log(that.data.msg)
 75           //做成功判斷
 76           if (that.data.msg == 'SUCCESS') {//微信js字元串請使用單引號
 77             wx.showToast({
 78               title: '註冊成功',
 79               icon: 'success',
 80               duration: 2000
 81             })
 82             wx.switchTab({
 83               url: '../UI/ui',
 84             })
 85 
 86           }
 87 
 88         }
 89       }),
 90       
 91       //失敗嘗試
 92       wx.showToast({
 93         title: '請重試',
 94         icon: 'loading',
 95         duration: 500
 96       })
 97   },
 98   error(e) {
 99     console.log(e.detail)
100   },
101 
102 //獲取用戶信息
103   bindGetUserInfo: function(e){
104     this.setData({
105       nickName: e.detail.userInfo.nickName
106     })
107     wx.showToast({
108       title: '授權成功',
109       icon: 'success',
110       duration: 1000
111     })
112   },
113 
114 //先授權登陸，再拍照註冊
115   btnreg:function(){
116     wx.showModal({
117       title: '註冊須知',
118       content: '先授權登陸，再拍照註冊哦！網路可能故障，如果不成功，請再試一下！',
119     })
120   }
121 
122 })

這裡要多試幾次，可能由於網路的問題，會調用失敗。另外，要開啟微信小程式 IDE 的 不校驗合法功能變數名稱的選項（設置->項目設置 -> 勾選 不校驗......）

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

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

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

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

camera2.wxml

 

 1 <!-- camera.wxml -->
 2 <camera
 3   device-position="front"
 4   flash="off"
 5   binderror="error"
 6   style="width: 100%; height: 300px;"
 7 ></camera>
 8 <button type="primary" bindtap="takePhoto">拍照</button>
 9 <view>預覽</view>
10 <image mode="widthFix" src="{{src}}"></image>

camera2.js 與註冊大同小異，區別是圖片上傳的介面不同（這次是 https://aip.baidubce.com/rest/2.0/face/v3/search 人臉搜素），獲取access_token、拍照、照片base64編碼都相同。

 

 1 // camera.js
 2 Page({
 3   data: {
 4     base64: "",
 5     token: "",
 6     msg: null
 7   },
 8   //拍照並編碼
 9   takePhoto() {
10     //拍照
11     const ctx = wx.createCameraContext()
12     ctx.takePhoto({
13       quality: 'high',
14       success: (res) => {
15         this.setData({
16           src: res.tempImagePath
17         })
18       }
19     })
20 
21     var that = this;
22     //圖片base64編碼
23     wx.getFileSystemManager().readFile({
24       filePath: this.data.src, //選擇圖片返回的相對路徑
25       encoding: 'base64', //編碼格式
26       success: res => { //成功的回調
27         that.setData({
28           base64: res.data
29         })
30       }
31     })
32 
33     //acess_token獲取
34     wx.request({
35       url: 'https://aip.baidubce.com/oauth/2.0/token', //真實的介面地址
36       data: {
37         grant_type: 'client_credentials',
38         client_id: '**************************',
39         client_secret: '*******************************'//用自己的
40       },
41       header: {
42         'Content-Type': 'application/json' // 預設值
43       },
44       success(res) {
45         that.setData({
46           token: res.data.access_token//獲取到token
47         })
48       }
49     })
50 
51     //上傳人臉進行 比對
52     wx.request({
53       url: 'https://aip.baidubce.com/rest/2.0/face/v3/search?access_token=' + that.data.token,
54       method: 'POST',
55       data: {
56         image: this.data.base64,
57         image_type: 'BASE64',
58         group_id_list: '********'//自己建的用戶組id
59       },
60       header: {
61         'Content-Type': 'application/json' // 預設值
62       },
63       success(res) {
64         that.setData({
65           msg: res.data.result.user_list[0].score
66         })
67         if(that.data.msg > 80){
68           wx.showToast({
69             title: '驗證通過',
70             icon: 'success',
71             duration: 1000
72           })
73           //驗證通過，跳轉至UI頁面
74           wx.switchTab({
75             url: '../UI/ui',
76           })
77         }
78       }
79     });
80 
81     wx.showToast({
82       title: '請重試',
83       icon: 'loading',
84       duration: 500
85     })
86   },
87   error(e) {
88     console.log(e.detail)
89   }
90 })

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

註意：上述的 登陸註冊 是一個某個小程式的一個模塊。關係如下

所以，需要在index頁面中設置按鈕，來跳轉到註冊以及登陸頁面，然後註冊登陸成功後，再跳轉至其他功能頁面。

後記

這次小程式實戰，對我自己也是一個不小的挑戰，對比各個雲介面、看介面文檔、查資料，耗費了大概十來天。但是，我相信大有裨益。另外，對我參考的博客和回答的諸位表示感謝。我們一起前進！

參考資料

【1】微信小程式開發文檔

【2】百度雲介面文檔.v3版

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • SQLite 的 EXISTS 與 NOT EXISTS
    話不多說先來看看表結構： 顯而易見 Pid 存放的 Person 的 id ；下麵重點（奇葩需求！！！！） 我需要向表一（Person）里插入幾條數據（...）這時候不會對錶二做任何操作。 需求：查詢表一（Person）條件是表二（Person_Visison）里有沒有表一（Person）的 id ...
  • 001.Oracle安裝部署-本地文件系統
    一 環境準備 安裝包：linux.x64_11gR2_database_1of2.zip linux.x64_11gR2_database_2of2.zip 二 安裝Oracle準備 2.1 用戶名/組建立 2.2 相關目錄創建 提示：oracle預設不支持CentOS系統安裝，需要如下修改 2.3 ...
  • 安裝mysql的踩坑之旅
    近期的一個項目要求用mysql資料庫，正好系統重裝了，複習下mysql的安裝，哪成想是踩了無數坑啊！ 要安裝首先自然是火速進官網下個安裝包（下載地址https://dev.mysql.com/downloads/file/?id=483327），沒註意mysql都8了，上次安裝的好像是5.幾的。下載 ...
  • MySQL與Redis實現二級緩存
    redis簡介 Redis 是完全開源免費的，遵守BSD協議，是一個高性能的key value資料庫 Redis 與其他 key value 緩存產品有以下三個特點: Redis支持數據的持久化，可以將記憶體中的數據保存在磁碟中，重啟的時候可以再次載入進行使用 Redis不僅僅支持簡單的key val ...
  • Oracle總結之plsql編程（基礎九）
    oracle中plsql編程式控制制語句與迴圈語句使用以及具體案例說明 ...
  • MySQL 基礎知識梳理學習（六）----鎖
    1.什麼是鎖： 對共用資源進行併發訪問，提供數據的完整性和一致性。 2.鎖的區別： Lock Manager的哈希表中 latch是針對程式內部的資源（比如：全局變數）的鎖的定義，而這裡的lock針對的是資料庫的事務。 lock有latch來保證和實現。 3.鎖是用來實現併發控制，併發控制用來實現隔 ...
  • 小菜菜mysql練習解讀分析2——查詢存在" 01 "課程但可能不存在" 02 "課程的情況(不存在時顯示為 null )
    “查詢存在" 01 "課程但可能不存在" 02 "課程的情況(不存在時顯示為 null )” ——翻譯為：課程表裡面，存在01的信息，未必滿足有02的課程情況 ——覺得題意不是很明確，但是就當成練習left join 和right join的理解 1、存在01課程情況 SELECT * from s ...
  • Android Intent實現頁面跳轉
    什麼是Intent Intent可以理解為信使(意圖) 由Intent來協作完成Android各個組件之間的通訊, 也可以說是實現頁面與頁面之間的跳轉 Intent實現頁面之間的跳轉 startActivityForResult(intent, requestCode); //第二種啟動方式 onA ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類