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