3分鐘搞定 web人臉識別登錄，這樣式愛了

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"大家好，我是小富~","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在我最開始寫文章的時候曾經寫過一篇文章 基於 Java 實現的人臉識別功能，因爲剛開始碼字不知道寫點什麼，就簡單弄了個人臉識別的Demo。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"但讓我沒想到的是，在過去的一年裏有好多好多粉絲加我好友諮詢這個小demo，因爲裏邊有點小bug，導致一些新手朋友不能成功啓動。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/06/064abb7cd0d281af6eda8a04a20a0166.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"從此我就開啓不厭其煩的解答各種疑問，不過我精力畢竟有限，最後實在回答不過來，乾脆弄了個羣粉絲互相分享經驗。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"問題大面積出現的時候我就想過再出一個完整版的demo，可家裏工作一大堆事搞得一點精力都沒有，一直拖到了現在，正好現在把這個人臉識別登錄功能用在了自己的項目上，藉此機會分享出來了，","attrs":{}},{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"這次儘可能不給大家留（埋）bug 哈哈哈","attrs":{}},{"type":"text","text":" 。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/2c/2cafe373690e7ff9131a97c12e6a3a94.gif","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"具體操作之前先看下成品的效果，線上預覽地址：","attrs":{}},{"type":"link","attrs":{"href":"https://fire100.top","title":"","type":null},"content":[{"type":"text","text":"https://fire100.top","attrs":{}}]},{"type":"text","text":"，這裏大家可以放心，不會收集面部圖片，只是提取了面部特徵，並沒有上傳雲端。下邊我們來做個演示看看效果，識別速度和成功率還是不錯的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/0d/0d90138275d8e841cc7cb1e9480b2713.gif","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"功能流程","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"整個功能的邏輯很簡單，前端調起攝像頭，識別到人臉後拍照上傳到後臺，後端SDK識別出圖片中的人臉特徵後，與數據庫內的用戶人臉特徵做比對，比對成功（相似度在0.8~1之間即算同一個人）登錄，如識別到人臉但數據庫內未比對成功則視爲新用戶註冊。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"注意：如果要在線上應用，必須要使用https才能調起攝像頭，本地測試沒有限制。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8c47626d95004f1c9be9d9a5fee55500~tplv-k3u1fbpfcp-zoom-1.image","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"申請SDK","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"啓動項目之前先做一點準備工作，因爲使用的是三方的人臉識別SDK，所以要先在平臺申請一個賬號，然後在下載對應版本的SDK。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://ai.arcsoft.com.cn/ucenter/resource/build/index.html#/login","title":"","type":null},"content":[{"type":"text","text":"SDK地址","attrs":{}}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"可能會有人擡槓爲啥你不自己寫個人臉識別，別問，問就是不會！","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"目前支持","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Linux","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Windows","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"IOS","attrs":{}}],"attrs":{}},{"type":"text","text":"、","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Android","attrs":{}}],"attrs":{}},{"type":"text","text":"版本，每個實名認證的賬號可以激活100臺設備，換句話說就是同一個賬號申請的SDK可以在100個設備上運行，一般情況下夠用了。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/51/5133e95804de43b7395130b7e09a69ba.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"下載的SDK包目錄結構中","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"libs","attrs":{}}],"attrs":{}},{"type":"text","text":"最爲重要，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"samplecode","attrs":{}}],"attrs":{}},{"type":"text","text":"裏有示例代碼，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"doc","attrs":{}}],"attrs":{}},{"type":"text","text":"有API文檔。我們需要的是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"libs","attrs":{}}],"attrs":{}},{"type":"text","text":"裏邊的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"arcsoft-sdk-face-3.0.0.0.jar","attrs":{}}],"attrs":{}},{"type":"text","text":"、和三個對應平臺的引擎文件","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":".dll","attrs":{}}],"attrs":{}},{"type":"text","text":"或者","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":".so","attrs":{}}],"attrs":{}},{"type":"text","text":"後綴的文件。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/2a/2a75a85bef7d3f4eff815c4f32d77798.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"項目配置","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"項目本身是springboot + vue 前後端分離的，但爲了小夥伴們開箱即用，我把這個功能前後端整合在一起，再用個 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"jpa","attrs":{}}],"attrs":{}},{"type":"text","text":"做持久化，表也不用自己建了，給大家省點時間。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"使用SDK的時候遇到過一點小坑，所以下邊說的詳細一點","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"首先在springboot啓動類所在項目根目錄下創建一個","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"lib","attrs":{}}],"attrs":{}},{"type":"text","text":"目錄，將SDK中解壓出的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"arcsoft-sdk-face-3.0.0.0.jar","attrs":{}}],"attrs":{}},{"type":"text","text":"放進去，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"pom.xml","attrs":{}}],"attrs":{}},{"type":"text","text":"文件中引入這個 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Jar","attrs":{}}],"attrs":{}},{"type":"text","text":"。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/51/51f7dca1225ae65e99dbc552f529bd38.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"java"},"content":[{"type":"text","text":"\n com.arcsoft.face\n arcsoft-sdk-face\n 3.0.0.0\n system\n ${basedir}/lib/arcsoft-sdk-face-3.0.0.0.jar\n\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"maven","attrs":{}}],"attrs":{}},{"type":"text","text":"打包配置要特別注意一點，一定要加上","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"includeSystemScope","attrs":{}}],"attrs":{}},{"type":"text","text":"，這樣 maven 打包時會將外部引入的jar包（比如在根目錄下或","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"resource","attrs":{}}],"attrs":{}},{"type":"text","text":"文件下新加外部jar包）打包到項目jar中，服務器上項目才能運行。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"不加此配置，本地可以運行，因爲本地可以再lib下找到外部包，但是服務器上jar中是沒有的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"\n org.springframework.boot\n spring-boot-maven-plugin\n ${spring-boot.version}\n \n true\n true\n com.firebook.FireBookApplication\n false\n \n\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"application.yml","attrs":{}}],"attrs":{}},{"type":"text","text":" 文件的配置更簡單，搞個數據庫存放人臉特徵數據，填寫申請SDK時得到的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"appId","attrs":{}}],"attrs":{}},{"type":"text","text":" 和 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"sdkKey","attrs":{}}],"attrs":{}},{"type":"text","text":"，以及 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"path","attrs":{}}],"attrs":{}},{"type":"text","text":" 爲存放引擎文件","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":".dll","attrs":{}}],"attrs":{}},{"type":"text","text":"或者","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":".so","attrs":{}}],"attrs":{}},{"type":"text","text":"後綴的文件路徑。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"spring:\n datasource:\n# type: com.zaxxer.hikari.HikariDataSource\n driver-class-name: com.mysql.cj.jdbc.Driver\n url: jdbc:mysql://127.0.0.1:3306/face?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai\n username: root\n password: 123456\n# 人臉識別-windows\nface:\n appId: #*********************\n sdkKey: #*********************\n path: D://face\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"配置好這些直接執行","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"FireControllerApplication","attrs":{}}],"attrs":{}},{"type":"text","text":"就可以了，訪問：","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"127.0.0.1:8081/login/face","attrs":{}}],"attrs":{}},{"type":"text","text":"。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這裏源碼我就不大段大段往出貼了，感興趣的小夥伴自行獲取鏈接下載源碼玩玩吧。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"源碼下載","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"web人臉識別登錄的完整源碼已經上傳到","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Github","attrs":{}}],"attrs":{}},{"type":"text","text":"了，","attrs":{}},{"type":"link","attrs":{"href":"https://github.com/chengxy-nds/Springboot-Notebook","title":"","type":null},"content":[{"type":"text","text":"源碼地址","attrs":{}}]},{"type":"text","text":" ，如果有問題隨時諮詢吧。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/84/84f36b4cf4a4fbb75528c0e132cca67b.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}}]}