?譯者 | 陳峻
審校 | 孫淑娟
眾所周知，在向用戶提供某種服務(wù)或銷售某些產(chǎn)品時，身份認(rèn)證是Web應(yīng)用的一個非常重要的方面。它不但能夠幫助服務(wù)提供方將非法用戶拒之門外，而且可以跟蹤用戶的使用狀況。過去，基于電子郵件和密碼組合的身份認(rèn)證方式曾廣為流行。而隨著時間的推移，大型科技公司收獲了龐大的用戶群，并相應(yīng)推出了OAuth的新認(rèn)證概念。即：作為站點的所有者，您信任OAuth提供者對于用戶實施的身份認(rèn)證結(jié)果。而作為回報，OAuth提供者需要向您提供該用戶的詳細(xì)信息。
基于OAuth的身份認(rèn)證對用戶來說十分簡單。他們只需在OAuth提供商處維護(hù)一個帳戶，并使用該帳戶登錄其他所有的相關(guān)網(wǎng)站即可。整個認(rèn)證機(jī)制都交由OAuth來完成。
一段時間過后，無密碼身份認(rèn)證出現(xiàn)了。其基本過程是，當(dāng)您輸入用戶名或電子郵件時，后臺會向您發(fā)送一個鏈接。如果您將該鏈接粘貼到瀏覽器中，它將自動進(jìn)行身份認(rèn)證并完成登錄。
而隨著數(shù)據(jù)集變得越來越大，人工智能（AI）和機(jī)器學(xué)習(xí)（ML）不斷迭代和進(jìn)步，其準(zhǔn)確性也得到了大幅提升。如今，我們可以使用面部識別技術(shù)在Web應(yīng)用中對用戶進(jìn)行身份認(rèn)證。
下面，我將使用FaceIO APIs，構(gòu)建一個簡單的應(yīng)用，以演示如何使用面部識別技術(shù)，對用戶進(jìn)行身份認(rèn)證。
一、為什么需要基于面部識別的身份認(rèn)證?
基于面別識別的身份認(rèn)證有五項優(yōu)點：
1、比傳統(tǒng)方法更快：在面部認(rèn)證方法中，您只需單擊一個按鈕，即可啟動身份認(rèn)證過程，而且能夠在一毫秒內(nèi)完成。而在上述提到的基于電子郵件與密碼的傳統(tǒng)方法中，您必須在鍵盤上逐個輸入字母信息，而在收到認(rèn)證碼后，還得一邊盯著認(rèn)證碼，一邊小心地輸入數(shù)字。
2、不需要專門的硬件：面部認(rèn)證技術(shù)的唯一要求就是攝像頭。而現(xiàn)在，所有的智能手機(jī)都默認(rèn)帶有攝像頭，大多數(shù)臺式機(jī)也都被額外配置了網(wǎng)絡(luò)攝像頭。因此，用戶無需為該技術(shù)專門增配硬件。
3、減少社交平臺上的冒名頂替：面部認(rèn)證最重要的特點便是可以防止冒名頂替。在社交平臺上，許多黑客會冒充他人去創(chuàng)建虛假賬戶，以實施數(shù)字犯罪。而在面部識別技術(shù)的幫助下，社交平臺可以識別創(chuàng)建新帳戶的用戶是否確屬本人。
4、減少機(jī)器人和自動化腳本的攻擊：雖然機(jī)器人和自動化腳本可以幫助人們擺脫重復(fù)性的任務(wù)，但是黑客也可以使用它們向他人發(fā)送垃圾郵件、或猜測密碼。顯然，無論是機(jī)器人還是自動化腳本都不具備面部特征，無法完成身份認(rèn)證。
5、注重隱私：如今，隱私已成為了人們時常關(guān)注的話題。我們將使用的FaceIO API，在身份認(rèn)證過程中采用的是端到端的加密方式。在后端，它們能夠安全地、且僅存儲面部特征的哈希值。這完全符合GDPR和CCPA的要求。
二、一個面部認(rèn)證項目
下面，我將向您展示一個面部認(rèn)證Web應(yīng)用的制作過程。
1.安裝所需的依賴項
創(chuàng)建一個空白目錄，并在其中創(chuàng)建一個index.html文件。當(dāng)然，您也可以添加一個單獨的CSS文件。在此，我僅展示最簡單的主要方面。
如果您使用VSCode進(jìn)行開發(fā)，那么可以使用live-server來提供靜態(tài)文件。在index.html中，我們首先添加如下最基本的HTML標(biāo)簽。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
</html>
左右滑動查看完整代碼FaceIO提供了一個非常方便的Javascript庫，來與其AI模型進(jìn)行交互，并讓我們只需幾行代碼，便可以實現(xiàn)面部識別功能。為此，我們需要通過如下代碼，在HTML文檔的body標(biāo)簽中，添加其CDN（內(nèi)容交付網(wǎng)絡(luò)）。
<body>
<script src="https://cdn.faceio.net/fio.js"></script>
</body>
下面，我們需要創(chuàng)建一個index.js文件，并將該文件鏈接到FaceIO的CDN之后的body標(biāo)簽內(nèi)。
<body>
<script src="https://cdn.faceio.net/fio.js"></script>
<script src="./index.js"></script>
</body>
接著，讓我們創(chuàng)建2個幫助函數(shù)（helper function），以簡化開發(fā)過程。其中的一種可用于注冊用戶（如，注冊函數(shù)），另一種則用于身份認(rèn)證（如，登錄函數(shù)）。
2.注冊用戶
FaceIO同樣通過提供Javascript庫的方式，來簡化用戶的注冊過程。首先，我們在HTML標(biāo)簽中添加一個帶有id="enroll"的按鈕。我們可以使用getElementbyID方法去訪問Javascript文件中的該按鈕。
接著，我們使用如下代碼，來初始化index.js里面的FaceIO對象。為了給FaceIO項目添加公共ID，您可以在項目儀表板中直接產(chǎn)生此類公共ID。
const faceio = new faceIO("<Your Public ID here");
讓我們在注冊按鈕中添加一個事件監(jiān)聽器，以便當(dāng)有人點擊該按鈕時，便可執(zhí)行FaceIO對象的注冊方法。該注冊方法可使用如下備選參數(shù)：
（1）locale是用戶的本地語言。
（2）permissions timeout是等待用戶授予訪問攝像頭權(quán)限的秒數(shù)。
（3）termsTimeout是等待用戶接受FaceIO相關(guān)條款和條件的秒數(shù)。
（4）idleTimeout是嘗試識別人臉時等待的總秒數(shù)。
（5）replyTimeout是等待從FaceIO節(jié)點接收處理后的面部數(shù)據(jù)的秒數(shù)。
（6）userConcent是一個布爾值，表示用戶是否同意掃描他們的面部。如果您已經(jīng)征得用戶的同意，則可以將該值設(shè)置為true。
（7）payload是在注冊函數(shù)中，您可以添加的、以鍵值對象存在的有效負(fù)載。您可以使用該有效負(fù)載功能，附加電子郵件或與用戶相關(guān)的其他信息。如下代碼段展示了本例中的注冊函數(shù)：
enroll.addEventListener("click", async () => {
let response = await faceio.enroll({
locale: "auto",
payload: {
email: "example@gmail.com",
pin: "12345",
},
});
console.log(` Unique Facial ID: ${response.facialId}
Enrollment Date: ${response.timestamp}
Gender: ${response.details.gender}
Age Approximation: ${response.details.age}`);
});
運行此函數(shù)時，用戶面前會出現(xiàn)一個包含有各種條款和條件的彈窗。只有用戶點擊接受，應(yīng)用方可請求攝像頭的訪問權(quán)限。而只有用戶授予了攝像頭的訪問權(quán)限，F(xiàn)aceIO才能開始掃描面部。
FaceIO模型會去尋找能夠?qū)⒂脩襞c他人區(qū)分開來的獨特面部特征。完成后，您需要為自己的面部數(shù)據(jù)添加一個PIN碼，并且妥善保存。
當(dāng)上述所有步驟完成后，F(xiàn)aceIO會向用戶返回一個包含著用戶faceID的userInfo對象。此ID是一個通用的唯一標(biāo)識符，可用來對應(yīng)其性別和年齡（畢竟人工智能模型很容易預(yù)測到用戶的性別和年齡）。此類faceID會被存儲在應(yīng)用的后端，以便在用戶登錄時，通過匹配faceID的方式去認(rèn)證用戶。
在工作流程中，如果發(fā)生任何錯誤，F(xiàn)aceIO會提供大量的錯誤消息。而如果用戶不允許應(yīng)用訪問攝像頭的話，fioErrCode.PERMISSION_REFUSED則會提示錯誤。同樣，如果用戶不接受條款和條件的彈窗的話，服務(wù)器則會拋出fioErrCode.TERMS_NOT_ACCEPTED的錯誤。
3.認(rèn)證用戶
為了啟動身份認(rèn)證流程，請在HTML標(biāo)簽中添加一個帶有id="authenticate"的按鈕，并在getElementbyID方法的幫助下，訪問位于index.js內(nèi)部的該按鈕。現(xiàn)在，當(dāng)用戶按下此按鈕時，我們將能夠啟動簡單的身份認(rèn)證流程。整個認(rèn)證函數(shù)會涉及到permissionTimeout、idleTimeout、replyTimeout、以及前面提到的enroll()等局部函數(shù)。下面展示了對應(yīng)的代碼段：
authenticate.addEventListener("click", async () => {
let response = await faceio.authenticate({
locale: "auto",
});
console.log(` Unique Facial ID: ${response.facialId}
PayLoad: ${response.payload}
`);
});
當(dāng)用戶按下認(rèn)證按鈕時，屏幕上會彈出類似注冊功能的界面。它同樣需要您的攝像頭訪問權(quán)限，以掃描面部信息。掃描完成后，它會要求您輸入在注冊期間設(shè)置的PIN碼。如果PIN碼提供正確，F(xiàn)aceIO會返回您在注冊過程中設(shè)定的面部數(shù)據(jù)和有效負(fù)載。
此外，您也可以通過匹配服務(wù)器中的FaceID，來仔細(xì)檢查身份認(rèn)證的流程。
至此，我們的身份認(rèn)證流程已完成。您可以看到它比使用電子郵件加密碼的身份認(rèn)證流程要更簡潔。也就是說，我們可以把所有繁重的工作都交由FaceIO服務(wù)器、及其AI模型去完成。作為開發(fā)人員，您只需添加應(yīng)用程序邏輯，修改身份認(rèn)證流程，以及提高用戶體驗即可。
4.隱私功能
如前文所述，F(xiàn)aceIO也擁有強(qiáng)大的隱私保護(hù)功能，具體而言：
FaceIO服務(wù)完全符合GDPR和CCPA：此處的GDPR是于2018年通過的《通用數(shù)據(jù)保護(hù)條例》。它要求所有企業(yè)都應(yīng)保護(hù)用戶的個人數(shù)據(jù)和隱私。而CCPA則是《加州消費者保護(hù)法》的縮寫。它讓用戶可以更好地控制自己的數(shù)據(jù)。如果您在這些地區(qū)開展業(yè)務(wù)，就需要遵守這兩部法律。
FaceIO僅存儲用戶的面部特征的哈希值：由于客戶端的代碼庫和組件并不處理任何生物特征數(shù)據(jù)，而且是在后端完成所有的過程，因此它并不會存儲任何未處理過的數(shù)據(jù)，且盡可能少地存儲其他相關(guān)信息。
三、常見問答
1.FaceIO是否獨立于瀏覽器？
FaceIO完全與瀏覽器無關(guān)。它可以運行在包括Chrome、Firefox和Safari在內(nèi)的任何瀏覽器上。而且由于所有處理都在服務(wù)器上完成的，因此FaceIO只需擁有攝像頭訪問權(quán)限即可運行。當(dāng)然，如果您使用某些通過禁用Javascript來保護(hù)隱私的瀏覽器，那么由于FaceIO需要使用Javascript與服務(wù)器通信，因此請務(wù)必啟用之。
2.我們無需從頭開始構(gòu)建模型嗎？
是的。對于那些有人工智能和機(jī)器學(xué)習(xí)基礎(chǔ)的人來說，他們可能會選擇從頭開始構(gòu)建模型，并在自己的Web應(yīng)用中實現(xiàn)面部認(rèn)證的相關(guān)功能。但是由于大多數(shù)Web開發(fā)人員不一定具備此能力，因此使用現(xiàn)有的服務(wù)來實現(xiàn)服務(wù)功能，而無需重復(fù)發(fā)明輪子往往是明智之舉。目前，市場上也有其他競品方案。例如，由AWS提供的AWS Rekognition，具有與FaceIO類似的工作方式。您甚至可以在FaceIO控制面板中選擇AWS Rekognition。
3.隱藏公共ID
正如前文提到的您必須在啟動FaceIO對象期間，提供公共ID。您可以按需使用環(huán)境變量將其隱藏。如果您用到了某個前端框架或構(gòu)建系統(tǒng)，則可以在構(gòu)建時動態(tài)添加ID。例如，如果您使用Nextjs，則可以使用.env.local文件，來保存敏感憑據(jù)。
當(dāng)然，如果您不使用任何框架，則可以使用支持環(huán)境變量的Vite。它能夠構(gòu)建和壓縮您的vanilla js項目，以加快部署速度。您只需創(chuàng)建一個.env文件，并將所有憑據(jù)放入其中即可。不過，請不要忘記將該.env文件放入自己的.gitignore列表中。
原文鏈接：https://hackernoon.com/how-to-authenticate-a-user-via-face-recognition-in-your-web-application
?譯者介紹
陳峻 （Julian Chen），51CTO社區(qū)編輯，具有十多年的IT項目實施經(jīng)驗，善于對內(nèi)外部資源與風(fēng)險實施管控，專注傳播網(wǎng)絡(luò)與信息安全知識與經(jīng)驗；持續(xù)以博文、專題和譯文等形式，分享前沿技術(shù)與新知；經(jīng)常以線上、線下等方式，開展信息安全類培訓(xùn)與授課。
