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}}]}