杜興

（貴州電子信息職業(yè)技術(shù)學(xué)院，貴州凱里，556000）

0 引言

在日常中，用戶經(jīng)常在網(wǎng)頁中使用用戶名和密碼才能被后臺(tái)允許進(jìn)行后續(xù)操作。相比這種登錄方式，會(huì)存在忘記密碼、使用場(chǎng)景不夠遍歷便以及不夠智能等情況。因此，本系統(tǒng)設(shè)計(jì)了兼容傳統(tǒng)登錄方式的新型掃臉登錄注冊(cè)系統(tǒng)。

1 系統(tǒng)整體設(shè)計(jì)

整個(gè)系統(tǒng)設(shè)計(jì)采用Web開發(fā)中常用的MVC設(shè)計(jì)模式。系統(tǒng)前端使用基于HTML、CSS以及采用JavaScript語言開發(fā)的自適應(yīng)框架Bootstrap用來快速構(gòu)建布局網(wǎng)頁中的表單、按鈕以及鏈接等常用元素，系統(tǒng)設(shè)計(jì)的每個(gè)需求模塊對(duì)應(yīng)一個(gè)前端的HTML文件，方便系統(tǒng)的設(shè)計(jì)管理和復(fù)用。

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

本系統(tǒng)采用了兩種并行的設(shè)計(jì)思路、即傳統(tǒng)用戶名密碼登錄和掃臉登錄。系統(tǒng)的整體實(shí)現(xiàn)構(gòu)架如圖1所示。

圖1 系統(tǒng)整體構(gòu)架圖

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

該系統(tǒng)的主要?jiǎng)?chuàng)新點(diǎn)是可以不使用密碼的情況下使用人臉進(jìn)行登錄和注冊(cè)。在用戶注冊(cè)和登錄模塊中，會(huì)涉及到網(wǎng)頁驅(qū)動(dòng)本地的攝像頭、以及針對(duì)圖片的采集和數(shù)據(jù)的傳輸，在網(wǎng)頁中驅(qū)動(dòng)攝像頭采用JavaScript語言。另外，前端采用Ajax技術(shù)向后端提交人臉圖片數(shù)據(jù)，由于人臉數(shù)據(jù)是被保存的是圖片格式，不便利于網(wǎng)絡(luò)傳輸，是需要經(jīng)過將圖片進(jìn)行base64編碼的操作。而后端將base64編碼的數(shù)據(jù)解碼成圖片格式數(shù)據(jù)（＊.jpg），為后續(xù)數(shù)據(jù)處理做準(zhǔn)備。在掃臉登錄方式中，用戶提交人臉信息與后端數(shù)據(jù)信息（人臉68個(gè)特征點(diǎn)）進(jìn)行歐式距離比對(duì)，歐式距離小于設(shè)定閾值則登錄成功。

2 用戶注冊(cè)

在用戶注冊(cè)時(shí)，用戶通過如圖2所示的前端界面向后臺(tái)提交信息，頁面中的用戶名和密碼通過form表單以字符串類型提交到后端并存儲(chǔ)到數(shù)據(jù)庫MySql中。其中在注冊(cè)人臉信息是可選項(xiàng)，如果用戶在注冊(cè)時(shí)選擇提交了人臉圖像信息，此時(shí)后端數(shù)據(jù)庫存儲(chǔ)的并不是人臉圖片數(shù)據(jù)，而是存儲(chǔ)的是人臉的68個(gè)特征點(diǎn)。具體流程是獲取前端頁面提交的人臉信息并編碼成base64的數(shù)據(jù)格式，后端將此數(shù)據(jù)解碼成圖片格式，接著經(jīng)過Dlib開源框架先檢測(cè)出人臉?biāo)鶎俚膱D像位置，之后根據(jù)檢測(cè)出的只含有人臉圖片區(qū)域計(jì)算出人臉圖像的68個(gè)特征點(diǎn)，存儲(chǔ)到數(shù)據(jù)庫中。以用戶名為lena、密碼為123456，該部分功能訪問的鏈接為http://127.0.0.1:5000/register.html，其中http://127.0.0.1為本機(jī)服務(wù)器IP地址，5000為端口號(hào)，register.html為訪問的頁面，系統(tǒng)界面如圖2所示。

圖2 用戶注冊(cè)界面圖

一般情況下，為了防止用戶在密碼設(shè)置過于簡(jiǎn)單的情況發(fā)生，本系統(tǒng)會(huì)在前端對(duì)用戶輸入的密碼進(jìn)行校驗(yàn)，提前在前端對(duì)數(shù)據(jù)的合理性進(jìn)行校驗(yàn)，防止不合理的數(shù)據(jù)直接傳輸?shù)胶蠖?。在校?yàn)密碼合理性中，本系統(tǒng)采用了基于JavaScript語言的正則匹配方法，設(shè)計(jì)目標(biāo)是使用戶和密碼必須涵蓋六位字符以上且必須必須涵蓋數(shù)字、字母（大小寫）、及特殊字符的兩種或兩種及以上的類別。

為了模型系統(tǒng)的真實(shí)性，現(xiàn)在已經(jīng)在用戶注冊(cè)界面中提交不同數(shù)量用戶信息。在Navicat數(shù)據(jù)庫可視化軟件中將數(shù)據(jù)進(jìn)行可視化，用戶數(shù)據(jù)如圖3所示，其中存儲(chǔ)用戶的數(shù)據(jù)庫名為user_general，用戶名、密碼以及人臉信息分別由字段user_name，user_password，face_data表示，字段的數(shù)據(jù)類型分別為varchar、varchar、longblob。

圖3 數(shù)據(jù)庫用戶信息

3 傳統(tǒng)方式登錄

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

圖4 系統(tǒng)的主界面

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

圖5 用戶登錄成功界面

4 掃臉方式登錄

人臉檢測(cè)和識(shí)別的優(yōu)劣決定本系統(tǒng)設(shè)計(jì)亮點(diǎn)的可行性。在人臉檢測(cè)和識(shí)別上使用一款基于C++語言開發(fā)的機(jī)器學(xué)習(xí)的跨平臺(tái)工具庫Dlib，該框架在人臉特征的提取和識(shí)別方面有不錯(cuò)的性能表現(xiàn)。

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

圖6 lena圖像人臉的特征點(diǎn)

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

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

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

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

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

圖7 掃臉登錄頁面

在設(shè)計(jì)掃臉登錄系統(tǒng)的早期調(diào)試過程中發(fā)現(xiàn)只使用人臉特征作為登錄信息可以實(shí)現(xiàn)功能需求。但是，這種方法會(huì)隨著數(shù)據(jù)庫中的人臉信息的數(shù)據(jù)增加而變得隨機(jī)，這種方法會(huì)造成登錄時(shí)間不固定的情況，造成該系統(tǒng)的體驗(yàn)不佳?？偨Y(jié)發(fā)現(xiàn)，在硬件配置相同的情況下，產(chǎn)生這種現(xiàn)象的原因是由很多用戶注冊(cè)時(shí)提交在后臺(tái)數(shù)據(jù)庫人臉特征信息的數(shù)據(jù)量變的越來越大，以及在掃臉登錄時(shí)所提交的人臉信息與后臺(tái)數(shù)據(jù)庫存儲(chǔ)人臉信息計(jì)算差值的先后順序共同決定。為了解決登錄時(shí)間過長(zhǎng)及不固定的情況，掃臉登錄系統(tǒng)采用用戶名和人臉特征信息組合的方式進(jìn)行登錄。采取這種方式可以實(shí)現(xiàn)系統(tǒng)點(diǎn)對(duì)點(diǎn)的人臉信息比對(duì)校驗(yàn)，即用戶在前端頁面提交的人臉信息只與用戶在前端提交的用戶名所屬在后臺(tái)數(shù)據(jù)庫的人臉特征信息進(jìn)行比對(duì)，比對(duì)小于設(shè)定閾值即登錄成功。這種做法也符合支付寶等主流移動(dòng)應(yīng)用支付在做掃臉支付時(shí)用戶應(yīng)同時(shí)輸入人臉特征信息和用戶的手機(jī)尾號(hào)共同登錄，才能成功完成支付功能。

5 實(shí)驗(yàn)環(huán)境

本實(shí)驗(yàn)環(huán)境系統(tǒng)平臺(tái)是Window10 64位系統(tǒng)，處理器型號(hào)是Intel I77500U，運(yùn)行內(nèi)存16GB，顯卡型號(hào)為RTX2060。系統(tǒng)前端頁面使用Google瀏覽器進(jìn)行渲染，系統(tǒng)后端解釋器及該系統(tǒng)設(shè)計(jì)所需主要框架的版本號(hào)如表1所示。

表1 解釋器及框架版本號(hào)

6 結(jié)束語

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