3 分鐘寫個 web 人臉識別登入，這樣式愛了

程式設計師小富發表於2021-11-24
Web

舉報之前仔細看清楚，老子才是原創 ，OK？

這才是抄襲者：部落格：千呼萬喚，web人臉識別登入完整版來了，這樣式我愛了

原文首發連結：mp.weixin.qq.com/s/PHB2c96_1yqiVRm...

什麼玩意？

F2E 前端

大家好，我是小富~

在我最開始寫文章的時候曾經寫過一篇文章 基於 Java 實現的人臉識別功能，因為剛開始碼字不知道寫點什麼，就簡單弄了個人臉識別的Demo。

但讓我沒想到的是，在過去的一年裡有好多好多粉絲加我好友諮詢這個小demo，因為裡邊有點小bug，導致一些新手朋友不能成功啟動。

從此我就開啟不厭其煩的解答各種疑問，不過我精力畢竟有限，最後實在回答不過來，乾脆弄了個群粉絲互相分享經驗。

問題大面積出現的時候我就想過再出一個完整版的demo，可家裡工作一大堆事搞得一點精力都沒有，一直拖到了現在，正好現在把這個人臉識別登入功能用在了自己的專案上，藉此機會分享出來了，這次儘可能不給大家留（埋）bug 哈哈哈 。

具體操作之前先看下成品的效果，線上預覽地址：fire100.top，這裡大家可以放心，不會收集面部圖片，只是提取了面部特徵，並沒有上傳雲端。下邊我們來做個演示看看效果，識別速度和成功率還是不錯的。

功能流程

整個功能的邏輯很簡單，前端調起攝像頭，識別到人臉後拍照上傳到後臺，後端SDK識別出圖片中的人臉特徵後，與資料庫內的使用者人臉特徵做比對，比對成功（相似度在0.8~1之間即算同一個人）登入，如識別到人臉但資料庫內未比對成功則視為新使用者註冊。

注意：如果要線上上應用，必須要使用https才能調起攝像頭，本地測試沒有限制。

p3-juejin.byteimg.com/tos-cn-i-k3u...

申請SDK

啟動專案之前先做一點準備工作，因為使用的是三方的人臉識別SDK，所以要先在平臺申請一個賬號，然後在下載對應版本的SDK。

SDK地址

可能會有人抬槓為啥你不自己寫個人臉識別，別問，問就是不會！

目前支援Linux、Windows、IOS、Android版本，每個實名認證的賬號可以啟用100臺裝置，換句話說就是同一個賬號申請的SDK可以在100個裝置上執行，一般情況下夠用了。

下載的SDK包目錄結構中libs最為重要，samplecode裡有示例程式碼，doc有API文件。我們需要的是libs裡邊的arcsoft-sdk-face-3.0.0.0.jar、和三個對應平臺的引擎檔案.dll或者.so字尾的檔案。

專案配置

專案本身是springboot + vue 前後端分離的，但為了小夥伴們開箱即用，我把這個功能前後端整合在一起，再用個 jpa做持久化，表也不用自己建了，給大家省點時間。

使用SDK的時候遇到過一點小坑，所以下邊說的詳細一點

首先在springboot啟動類所在專案根目錄下建立一個lib目錄，將SDK中解壓出的arcsoft-sdk-face-3.0.0.0.jar放進去，pom.xml檔案中引入這個 Jar。

<dependency>
   <groupId>com.arcsoft.face</groupId>
    <artifactId>arcsoft-sdk-face</artifactId>
    <version>3.0.0.0</version>
    <scope>system</scope>
    <systemPath>${basedir}/lib/arcsoft-sdk-face-3.0.0.0.jar</systemPath>
</dependency>

maven打包配置要特別注意一點，一定要加上includeSystemScope，這樣 maven 打包時會將外部引入的jar包（比如在根目錄下或resource檔案下新加外部jar包）打包到專案jar中，伺服器上專案才能執行。

不加此配置，本地可以執行，因為本地可以再lib下找到外部包，但是伺服器上jar中是沒有的。

<plugin>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-maven-plugin</artifactId>
    <version>${spring-boot.version}</version>
    <configuration>
        <includeSystemScope>true</includeSystemScope>
        <fork>true</fork>
        <mainClass>com.firebook.FireBookApplication</mainClass>
        <skip>false</skip>
    </configuration>
</plugin>

application.yml 檔案的配置更簡單，搞個資料庫存放人臉特徵資料，填寫申請SDK時得到的appId 和 sdkKey，以及 path 為存放引擎檔案.dll或者.so字尾的檔案路徑。

spring:
  datasource:
#    type: com.zaxxer.hikari.HikariDataSource
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://127.0.0.1:3306/face?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai
    username: root
    password: 123456
# 人臉識別-windows
face:
  appId: #*********************
  sdkKey: #*********************
  path: D://face

配置好這些直接執行FireControllerApplication就可以了，訪問：127.0.0.1:8081/login/face。

這裡原始碼我就不大段大段往出貼了，感興趣的小夥伴自行獲取連結下載原始碼玩玩吧。

原始碼下載

web人臉識別登入的完整原始碼已經上傳到Github了，原始碼地址 ，如果有問題隨時諮詢吧。

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章