基于Flask框架Web版的掃臉登錄系統研究與實現

杜興

（貴州電子信息職業技術學院，貴州凱里，556000）

0 引言

在日常中，用戶經常在網頁中使用用戶名和密碼才能被后臺允許進行后續操作。相比這種登錄方式，會存在忘記密碼、使用場景不夠遍歷便以及不夠智能等情況。因此，本系統設計了兼容傳統登錄方式的新型掃臉登錄注冊系統。

1 系統整體設計

整個系統設計采用Web開發中常用的MVC設計模式。系統前端使用基于HTML、CSS以及采用JavaScript語言開發的自適應框架Bootstrap用來快速構建布局網頁中的表單、按鈕以及鏈接等常用元素，系統設計的每個需求模塊對應一個前端的HTML文件，方便系統的設計管理和復用。

系統后端采用Flask的Web框架來構建整個后端部分。后端使用Python作為程序設計語言，數據庫框架PyMySQL、Dlib人臉識別框架、OpenCV計算機視覺庫及模板渲染庫jinja2等?，F階段多端開發主流設計模式是前后端分離的同步設計模式，而本系統注重掃臉登錄注冊功能的實現，根據系統設計的復雜程度，本系統采用前后端不分離的整體設計思想，方便快速實現整個掃臉系統。

本系統采用了兩種并行的設計思路、即傳統用戶名密碼登錄和掃臉登錄。系統的整體實現構架如圖1所示。

圖1 系統整體構架圖

根據系統設計圖的需求，系統主界面包含傳統方式登錄、掃臉方式登錄以及用戶注冊三部分組成。在傳統登錄模塊中，設計思路是后臺獲取用戶在前端提交的用戶名和密碼后與后端數據庫進行比對（數據校驗），校驗通過則登錄成功。在用戶注冊模塊中，首先考慮存在是否侵犯隱私等問題以及系統所提及的并行設計模式，用戶可以只提交用戶名和密碼，而人臉數據根據用戶自行選擇。如果在注冊時提交了人臉信息，傳統和掃臉兩種登錄方式都可以使用，反之則只能使用傳統方式進行登錄。在掃臉登錄模塊中，用戶需要輸入用戶名和人臉信息（類似于傳統登錄方式的密碼）與后端數據庫進行比對（人臉校驗），校驗通過則登錄成功。

該系統的主要創新點是可以不使用密碼的情況下使用人臉進行登錄和注冊。在用戶注冊和登錄模塊中，會涉及到網頁驅動本地的攝像頭、以及針對圖片的采集和數據的傳輸，在網頁中驅動攝像頭采用JavaScript語言。另外，前端采用Ajax技術向后端提交人臉圖片數據，由于人臉數據是被保存的是圖片格式，不便利于網絡傳輸，是需要經過將圖片進行base64編碼的操作。而后端將base64編碼的數據解碼成圖片格式數據（＊.jpg），為后續數據處理做準備。在掃臉登錄方式中，用戶提交人臉信息與后端數據信息（人臉68個特征點）進行歐式距離比對，歐式距離小于設定閾值則登錄成功。

2 用戶注冊

在用戶注冊時，用戶通過如圖2所示的前端界面向后臺提交信息，頁面中的用戶名和密碼通過form表單以字符串類型提交到后端并存儲到數據庫MySql中。其中在注冊人臉信息是可選項，如果用戶在注冊時選擇提交了人臉圖像信息，此時后端數據庫存儲的并不是人臉圖片數據，而是存儲的是人臉的68個特征點。具體流程是獲取前端頁面提交的人臉信息并編碼成base64的數據格式，后端將此數據解碼成圖片格式，接著經過Dlib開源框架先檢測出人臉所屬的圖像位置，之后根據檢測出的只含有人臉圖片區域計算出人臉圖像的68個特征點，存儲到數據庫中。以用戶名為lena、密碼為123456，該部分功能訪問的鏈接為http://127.0.0.1:5000/register.html，其中http://127.0.0.1為本機服務器IP地址，5000為端口號，register.html為訪問的頁面，系統界面如圖2所示。

圖2 用戶注冊界面圖

一般情況下，為了防止用戶在密碼設置過于簡單的情況發生，本系統會在前端對用戶輸入的密碼進行校驗，提前在前端對數據的合理性進行校驗，防止不合理的數據直接傳輸到后端。在校驗密碼合理性中，本系統采用了基于JavaScript語言的正則匹配方法，設計目標是使用戶和密碼必須涵蓋六位字符以上且必須必須涵蓋數字、字母（大小寫）、及特殊字符的兩種或兩種及以上的類別。

為了模型系統的真實性，現在已經在用戶注冊界面中提交不同數量用戶信息。在Navicat數據庫可視化軟件中將數據進行可視化，用戶數據如圖3所示，其中存儲用戶的數據庫名為user_general，用戶名、密碼以及人臉信息分別由字段user_name，user_password，face_data表示，字段的數據類型分別為varchar、varchar、longblob。

圖3 數據庫用戶信息

3 傳統方式登錄

該系統可以采用傳統方式登錄系統，主要設計思想是獲取用戶在前端頁面用戶名和密碼信息提交到后端，后端通過Flask的Web框架與數據庫中進行校驗。在程序上體現即判斷前端提交信息與后端數據庫信息是否相同，如果比對相同則成功登錄該系統。由于本設計注重整個系統的完整性和可行性，在提交用戶名和密碼等信息舍棄掉加密等安全性功能。該部分功能訪問的鏈接為http://127.0.0.1:5000/login，登錄界面如圖4所示。

圖4 系統的主界面

以用戶名和密碼分別為admin和123456a為例，在系統主界面輸入對應的用戶信息則會跳轉到登錄成功的界面，該部分功能訪問的鏈接為http://127.0.0.1:5000/login#，界面如圖5所示。

圖5 用戶登錄成功界面

4 掃臉方式登錄

人臉檢測和識別的優劣決定本系統設計亮點的可行性。在人臉檢測和識別上使用一款基于C++語言開發的機器學習的跨平臺工具庫Dlib，該框架在人臉特征的提取和識別方面有不錯的性能表現。

Dlib框架用作人臉檢測和識別流程比較簡單。首先，獲取前端驅動Web頁面的攝像頭并采集含有人臉的圖像信息提交到后端，然后后端依托Web框架和基于Python語言調用Dlib框架對圖像含有人臉特征信息進行檢測和提取，得到對應的68個特征點（即表示一張人臉），以lena人臉圖像為例，特征點如圖6所示，這一過程與掃臉注冊時的流程類似。然后將該人臉特征點的信息存儲在MySQL數據庫中。最后，將前端提交人臉信息與后端注冊時存儲的人臉信息差異作比較（差異小于設定閾值），小于閾值則登錄成功。

圖6 lena圖像人臉的特征點

在比對前端與后端兩部分人臉信息閾值時，本系統采用歐式距離的方式來衡量前端提交人臉信息和后端存儲人臉信息的相似度情況。具體做法如下，前端采集含有一張含有人臉的圖像，與數據庫的人臉信息進行差值比較，如果兩者差值小于其設定閾值，則被判斷是同一張人臉，否則判定不是。其中，差值的計算方式采用歐式距離的計算方法。如公式1所示，公式中的68表示人臉信息由68個特征點組成，x和y表示前后兩端對應的維度人臉的特征信息。

考慮到日常生活中，用戶在登錄和注時往往是單獨一個人進行操作，基本不存在同時需要多個用戶同時掃多張人臉進行登錄網頁。因此，考慮到此種特殊情況，前端網頁采集的人臉信息超過兩人及其以上時，后端采用基于Dlib框架對含有人臉圖像的數量進行統計，如果統計數量大于二，系統會有相應的信息提示，阻止后續操作流程，以保證登錄系統的健壯性。其中，Dlib人臉框架不僅可以完成人臉檢測和識別的任務，還可以實現統計圖像中人臉數量的功能。

在設置兩個人臉是否屬于同一個人的閾值（歐式距離的值）時，本系統依據計算大量人臉數據的方法獲取人臉相似度閾值。具體做法如下，首先，在LFW（5749個人臉類別）人臉數據集中選取在一個類別中含有兩張及兩張以上人臉信息作為計算歐式距離的人臉圖片樣本，接著使用基于Python語言的Dlib人臉檢測識別框架遍歷計算出不同和相同類別的人臉特征信息歐式距離值，并統計其中的最小值、最大值、均值、眾數以及中位數等有效的數據信息，依照數據的分布情況，最后根據人臉信息比對的敏感程度合理設定閾值大小。

LFW是一個比較經典的人臉數據集，數據集含有5749個類別的人臉，圖片總數量為13233，大約有1680個類別含有兩張及兩張以上的人臉圖片（這部分圖像用于計算圖像的相似度閾值），圖片尺寸為250×250，數據集大部分為為彩色圖像以及含有少量灰度圖像。在計算人臉閾值時發現，由于該人臉數據集是在自然場景下采集，若一張圖片中含有多個人臉圖像時或者出現人臉模糊及遮擋等情況，考慮到掃臉登錄系統采集的人臉環境比較理想，手動的將其剔除防止數據干擾。

在掃臉登錄模塊中，人臉特征信息可被視作為用戶密碼，以該實驗系統為例，兩張人臉圖像的尺寸大小為480×480，識別時間大概為0.002s。（以本系統所運行的硬件配置為例）若點擊圖4中掃臉登錄按鈕，跳轉到掃臉登錄的界面，掃臉登錄頁面如圖7所示，用戶只需輸入用戶名和錄入人臉即可登錄。如果提交的用戶人臉信息與數據庫中人臉信息的歐式距離小于設定值即可成功登錄。該部分功能訪問的鏈接為http://127.0.0.1:5000/face.html，登錄成功的提示界面信息如圖7所示。

圖7 掃臉登錄頁面

在設計掃臉登錄系統的早期調試過程中發現只使用人臉特征作為登錄信息可以實現功能需求。但是，這種方法會隨著數據庫中的人臉信息的數據增加而變得隨機，這種方法會造成登錄時間不固定的情況，造成該系統的體驗不佳。總結發現，在硬件配置相同的情況下，產生這種現象的原因是由很多用戶注冊時提交在后臺數據庫人臉特征信息的數據量變的越來越大，以及在掃臉登錄時所提交的人臉信息與后臺數據庫存儲人臉信息計算差值的先后順序共同決定。為了解決登錄時間過長及不固定的情況，掃臉登錄系統采用用戶名和人臉特征信息組合的方式進行登錄。采取這種方式可以實現系統點對點的人臉信息比對校驗，即用戶在前端頁面提交的人臉信息只與用戶在前端提交的用戶名所屬在后臺數據庫的人臉特征信息進行比對，比對小于設定閾值即登錄成功。這種做法也符合支付寶等主流移動應用支付在做掃臉支付時用戶應同時輸入人臉特征信息和用戶的手機尾號共同登錄，才能成功完成支付功能。

5 實驗環境

本實驗環境系統平臺是Window10 64位系統，處理器型號是Intel I77500U，運行內存16GB，顯卡型號為RTX2060。系統前端頁面使用Google瀏覽器進行渲染，系統后端解釋器及該系統設計所需主要框架的版本號如表1所示。

表1 解釋器及框架版本號

6 結束語

本文主要設計和完成了基于Flask框架Web版掃臉登錄系統用戶注冊、登錄、以及掃臉注冊和登錄的全部功能。在傳統登錄方式中，采用用戶名和密碼進行登錄。在掃臉登錄模式中，人臉作為用戶密碼，而人臉可以由用戶自行選擇。在整個調試過程中，本系統具有識別速度快、兼容傳統登錄和注冊方式、實時性強等特點，具有一定的研究和參考價值。